Razor syntax - how to conditionally wrap some inner HTML
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" />
}
}
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).
The following code is based on the answer of @JotaBe, but simplified and extendable:
public static class HtmlHelperExtensions
{
public static IDisposable BeginTag(this HtmlHelper htmlHelper, string tagName, bool condition = true, object htmlAttributes = null)
{
return condition ? new DisposableTagBuilder(tagName, htmlHelper.ViewContext, htmlAttributes) : null;
}
}
public class DisposableTagBuilder : TagBuilder, IDisposable
{
protected readonly ViewContext viewContext;
private bool disposed;
public DisposableTagBuilder(string tagName, ViewContext viewContext, object htmlAttributes = null) : base(tagName)
{
this.viewContext = viewContext;
if (htmlAttributes != null)
{
this.MergeAttributes(HtmlHelper.AnonymousObjectToHtmlAttributes(htmlAttributes));
}
this.Begin();
}
protected virtual void Begin()
{
this.viewContext.Writer.Write(this.ToString(TagRenderMode.StartTag));
}
protected virtual void End()
{
this.viewContext.Writer.Write(this.ToString(TagRenderMode.EndTag));
}
public void Dispose()
{
this.Dispose(true);
GC.SuppressFinalize(this);
}
protected virtual void Dispose(bool disposing)
{
if (!this.disposed)
{
this.disposed = true;
this.End();
}
}
}
This can be used the following way within Razor views:
@using (Html.BeginTag("div"))
{
<p>This paragraph is rendered within a div</p>
}
@using (Html.BeginTag("div", false))
{
<p>This paragraph is rendered without the div</p>
}
@using (Html.BeginTag("a", htmlAttributes: new { href = "#", @class = "button" }))
{
<span>And a lot more is possible!</span>
}