Conditionals in a Template

In addition to iteration, Razor can also add or remove content on a webpage based on certain conditions. Going back to the coffee example, we could generate the ordered list ONLY IF coffeeOptions contains data. If the list of coffee types is empty, then there is no need to include the <ol> element. Instead, the template could include a <p> element with text stating that there are no options to select.

Display Content if/else

To include conditional logic to display a Razor template element, we use a basic C# if clause.

The general syntax for including a conditional in Razor is:

@if (condition)
{
   // HTML element(s) to add or additional template logic
}

Above, condition represents any expression that can be evaluated to true or false (ie, a boolean).

If condition evaluates to true, then Razor adds the HTML element to the webpage and the content is displayed in the view. If condition is false, then Razor does NOT generate the element, and the content stays off the page.

Let’s look at an example:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12

@if (ViewBag.userSelection == "Instant")
{
   <p>Are you sure about that?</p>
}
else if (ViewBag.userSelection == "French Roast")
{
   <p>Oooh la la!</p>
}
else
{
   <p>Thanks for your order</p>
}

The @if statement in line 1 compares a user’s brew choice to the string "Instant". If they match, then Razor adds the paragraph element to the view.

If they do not match, then the <p> tag on line 3 is not created and the condition on line 5 is evaluated.

If that else if statement is true, then a paragraph element with different internal text is added. Lastly, if neither of those conditions is met, then the paragraph element with text on line 11 is rendered.

Nesting Logic

Just as we can nest loops, we can nest any C# in Razor for advanced control flow.

1
2
3
4
5
6
7
8
9

@if (ViewBag.coffeeOptions.Count > 1)
{
   <ol>
      @foreach(string coffeeType in ViewBag.coffeeOptions)
      {
         <li>@coffeeType</li>
      }
   </ol>
}

The conditional in line 1 checks that coffeeOptions contains more than one item. If true, then the ordered list is rendered in the view using a @foreach loop.

Adding vs. Displaying/Hiding

A conditional statement in a Razor template determines if content is added or not added to a page. This is different from deciding if content should be displayed or hidden.

Hidden content still occupies space on a page and requires some amount of memory. When @if evaluates to false, content remains absent from the page—requiring neither space on the page nor memory. This is an important consideration when including items like images or videos on your website.

Try It Out in HelloASPDotNET

What happens if a user enters an empty string? What would happen if name was null? It’s not pretty.

Use conditional logic to prevent empty strings or null values from making it to the view. Could you provide a generic or default option in the view?

 8
 9
10
11
12
13
14
15

@if(ViewBag.person == null || ViewBag.person == "")
{
    <h1>Welcome, World!</h1>
}
else
{
    <h1>Welcome, @ViewBag.person!</h1>
}

Check Your Understanding

Assume you have a list of integers called numbers, and you display the values in an unordered list.

1
2
3
4
5
6

<ul>
   @foreach(int number in ViewBag.numbers)
   {
      <li>@number</li>
   }
</ul>