Conditional Attributes in Razor View Engine and ASP.NET MVC 4

Conditional Attributes in Razor View Engine and ASP.NET MVC 4

ASP.NET MVC 4 and the Razor View Engine v2 were released in beta awhile back with some pretty nice features like ASP.NET MVC 4 Bundling and Minification, EF Data Migrations, and ASP.NET Web API. You can find all of this in my ASP.NET MVC 4 Tutorials. The new Razor View Engine v2 has a couple of nice features, too, like the new "Tilde Slash" feature that avoids the use of Url.Content and Href to convert relative paths to absolute paths. Another nice feature I want to mention in Razor are conditional attributes, which simplify the code you need to write to include attributes on various HTML tags in your Razor Views. This is a Razor View Engine enhancement and available in ASP.NET MVC 4, ASP.NET Web Pages, and any framework that uses Razor as its templating language.

Razor Conditional Attributes in ASP.NET MVC 4

The easiest way to understand conditional attributes in Razor is to create a new ASP.NET MVC 4 Web Application is Visual Studio 2010 or Visual Studio 11. Once you have created it, modify the _Layout.cshtml file so that there is a code block at the top of the file as such:

@{
    string classes = "dark standard";
}

Now make a change to the body tag of your layout so that it assigns the variable to its class attribute.

<body class="@classes">

Run the ASP.NET MVC 4 Web Application and peek at the source HTML. The body tag was rendered as you would expect:

<body class="dark standard">

That makes sense and can be done today using Razor. Now, let's set the classes variable to null and see what happens:

@{
    string classes = null;
}

When you render the page and view the source HTML you may be surprised that the class attribute is missing entirely from the body tag.

<body>

This is the beauty of conditional attributes in Razor v2. Rather than rendering a body tag with an empty class attribute, the new version of Razor removes the entire attribute if the Razor expression equates to null or false. This saves you from writing ugly code in your Razor Views to test the value and omit the attribute yourself.

Empty Strings and Conditional Attributes in Razor

Empty strings are not null. Therefore if the classes variable was set to an empty string, the class attribute on the body tag would render an empty attribute:

@{
    string classes = "";
}

The HTML will look as follows:

<body class="">

This is actually a good thing. It gives you the option of rendering an empty attribute if that is the desired result. Set your initial variable to null if you don't want an empty attribute included in the rendering. Set your initial variable to an empty string if you want an empty attribute included in the rendering.

Checkbox Example in Razor with Conditional Attributes

It is not just about strings with Conditional Attributes. Conditional Attributes in Razor respond to boolean values, which can be very useful for say checkboxes. A checkbox has a checked attribute that you set to checked when the checkbox is supposed to be checked; Otherwise the attribute is not included. This is perfect for Conditional Attributes.

Add the following code block and HTML to your Razor View.

@{
    bool agree = true;
}
<input type="checkbox" name="agree" value="agree" checked="@agree" />

Display the view and look at the HTML source. You will notice that since the variable agree is true, the checked attribute was rendered as follows:

<input type="checkbox" name="agree" value="agree" checked="checked" />

Setting the agree variable to false will not render the checked attribute for the checkbox as desired.

<input type="checkbox" name="agree" value="agree" />

Again, conditional attributes in Razor respond accordingly to true and false values as well as strings and null.

Conclusion

I didn't think I was going to use conditional attributes in Razor a lot, but I have already used the new feature in my latest ASP.NET MVC 4 Project. You can learn about other features in my ASP.NET MVC 4 Tutorials Area. Hope this helps!