How to write elegant conditional bits of markup in Razor views?

Question

Suppose the following model:

public class ViewBookModel
{
    public string Title { get; set; }
    public string Subtitle { get; set; }
}

I'm currently rendering it like this in my Razor view:

<h1>@Model.Title</h1>
@if (Model.Subtitle != null)
{ 
    <h2>@Model.Subtitle</h2>
}

My question is about the Subtitle bit. The above approach feels a little clunky, and can get repetitive (which is probably a bad sign) at times.

Are there any better, less verbose, more elegant ways to handle this situation?

---

I had considered (a) the option now mentioned in Mat's Mug's answer, as well as (b) moving the condition to the model:

public class ViewBookModel 
{
    // ...
    public string ShowSubtitle { 
        get { return string.IsNullOrEmpty(Subtitle); } 
    }
}

With this change to the view:

@if (Model.ShowSubtitle)

However, that doesn't address my main issue: the verbosity (i.e. 4 lines of view code just to display Subtitle).

Answer 1

If you find a pattern getting too repetitive, you can use @helper instead:

@helper ShowIfNotNull(string header) {
    @if (!string.IsNullOrEmpty(header))
        @:<h2>header</h2>
    }
}

<h1>@Model.Title</h1>
@ShowIfNotNull(Model.Subtitle)

Answer 2

To give an alternate solution: you can do this with pure CSS3 using the :empty selector.

h2:empty {
  display: none
}

The :empty selector will match on all empty tags. 'Empty' can include HTML-comments, but not whitespace.

Here's a more detailed explanation.

Answer 3

Subtitle being a string, a more elegant way of testing whether it's null would be to use string.IsNullOrEmpty(Model.Subtitle), like this:

<h1>@Model.Title</h1>
@if (!string.IsNullOrEmpty(Model.Subtitle))
{ 
    <h2>@Model.Subtitle</h2>
}

Answer 4

My answer was originally an edit to @EricB's post, but that edit got rejected by a mod, suggesting it was better suited as a competing answer. If this answer helps you, please consider responding to (upvoting ;)) his answer.

---

If you find a pattern getting too repetitive, you can use @helper instead:

@helper ShowIfNotNull(string header) {
    if (!string.IsNullOrEmpty(header)) {
        <h2>@header</h2>
    }
}

And use it like this:

<h1>@Model.Title</h1>
@ShowIfNotNull(Model.Subtitle)

Alternatively, you can create an HtmlHelper extension that does the same thing:

public static class StringExtensions
{
    public static IHtmlString ShowIfNotNull(this HtmlHelper htmlHelper, string text, string tagName)
    {
        var builder = new TagBuilder(tagName);
        builder.SetInnerText(text);
        return new HtmlString(builder.ToString());
    }
}

Which can be called like this:

@Html.ShowIfNotNull(Model.Subtitle, "h2")