Razor syntax - how to conditionally wrap some inner HTML

Question

In Razor, there's a curious rule about only allowing closed HTML within an if block.

See:

Razor doesn't understand unclosed html tags

But I have a situation where I want to exclude some outer, wrapping elements under certain conditions. I don't want to repeat all the inner HTML, which is a fair amount of HTML and logic.

Is the only way around the problem to make yet another partial view for the inner stuff to keep it DRY?

Without any other re-use for this new partial, it feels really awkward, bloaty. I wonder if the rule is a limitation of Razor or simply a nannying (annoying) feature.

Answer 1

You can use Html.Raw(mystring). In myString you can write whatever you want, for example a tag opening or closing, without getting any errors at all. I.e.

if (condition) {   @Html.Raw("<div>") }  if (condition) {   @Html.Raw("</div>") } 

NOTE: the @Html.Raw("<div>") can be written in a shorter, alternative form, like this: @:<div>

You can also create your own html helpers for simplifying the razor syntax. These helpers could receive the condition parameter, so that you can do something like this:

@Html.DivOpen(condition)  @Html.DivClose(condition) 

or more complicated helpers that allow to specify attributes, tag name, and so on.

Nor the Raw, neither the html helpers will be detected as "tags" so you can use them freely.

The Best Way to do it

It would be much safer to implement something like the BeginForm html helper. You can look at the source code. It's easy to implement: you simply have to write the opening tag in the constructor, and the closing tag in the Dispose method. The adavantage of this technique is that you will not forget to close a conditionally opened tag.

You need to implement this html helper (an extension method declared in a static class):

  public static ConditionalDiv BeginConditionalDiv(this HtmlHelper html,      bool condition)   {       ConditionalDiv cd = new ConditionalDiv(html, condition);       if (condition) { cd.WriteStart(); }       return cd; // The disposing will conditionally call the WriteEnd()   } 

Which uses a class like this:

  public class ConditionalDiv : IDisposable   {       private HtmlHelper Html;       private bool _disposed;       private TagBuilder Div;       private bool Condition;        public ConditionalDiv(HtmlHelper html, bool condition)       {           Html = html;           Condition = condition;           Div = new TagBuilder("div");       }        public void Dispose()       {           Dispose(true /* disposing */);           GC.SuppressFinalize(this);       }        protected virtual void Dispose(bool disposing)       {         if (!_disposed)         {             _disposed = true;             if (Condition) { WriteEnd(); }         }       }         public void WriteStart()        {            Html.ViewContext.Writer.Write(Div.ToString(TagRenderMode.StartTag));        }         private void WriteEnd()        {            Html.ViewContext.Writer.Write(Div.ToString(TagRenderMode.EndTag));        }   } 

You can use this with the same pattern as BeginForm. (Disclaimer: this code is not fully tested, but gives an idea of how it works. You can accept extra parameters for attributes, tag names and so on).

Answer 2

Declare razor helper using @helper HeplerName(), call by @HeplerName() anywhere. And you can add params if you want.

@if (condition) {   <div class="wrapper">     @MyContent()   </div> } else {   @MyContent() }  @helper MyContent() {   <img src="/img1.jpg" /> } 

Edit (thanks to @Kolazomai for bringing up the point in comments):

ASP.NET Core 3.0 no longer supports @helper but supports HTML markup in method body. New case will look like this:

@if (condition) {   <div class="wrapper">     @{ MyContent(); }   </div> } else {   @{ MyContent(); } }  @{   void MyContent()   {     <img src="/img1.jpg" />   } }