Click here to Skip to main content
15,867,308 members
Articles / Web Development / ASP.NET

Applying Conditional Attributes in ASP.NET MVC Views

Rate me:
Please Sign up or sign in to vote.
0.00/5 (No votes)
14 Apr 2014CPOL2 min read 11.4K  
How to apply conditional attributes in ASP.NET MVC views

If you have attempted to handle any kind of conditional logic within MVC Views before, you know that the process can often be tricky to get everything to work just right. A feature is present in newer versions of ASP.NET MVC that provides support for handling conditional attributes, which might make those large sets of if-statements and other logic in your Views a thing of the past.

Conditional

Ugly Ifs and Ternary Statements

Previously, if you wanted to add a conditional attribute to a particular element, you would need to use a conditional statement (i.e., an if-statement, switch statement or an inline if-statement using the ternary operator).

If you had needed to check a specific property of your model and apply a class accordingly, you might have some code that resembles the following through an if-statement which:

HTML
<!-- Using an if-statement -->
 <div @{if (Model.YourProperty != null){<text>class="@Model.YourProperty"</text>}}>Your Content</div>

or:

HTML
<!-- Using a ternary operator -->
 <div class="@(Model.YourProperty != null ? Model.YourProperty : "")">Your Content</div>

Using Conditional Attributes in MVC4+

More recent versions of ASP.NET MVC (4 and beyond) support the following syntax:

HTML
<!-- Using a Conditional Attribute -->
<div class="@Model.YourProperty">Your Content</div>

This may appear straight-forward, however the Razor View engine does a bit of work behind the scenes and handles some of the previously seen logic automatically. So if the property or value that you are checking within the attribute is null, the attribute will not even be written at all. (This only applies to null values, an empty string would still render the corresponding attribute.)

Using the syntax above, let’s say we pass a model will the YourClassToApply property as null, previous versions of MVC would render the following:

HTML
<div class>Your Content</div>

However, the newer versions will detect that the property is null and completely ignore writing the attribute at all:

HTML
<div>Your Content</div>

The examples above obviously only demonstrate this functionality with the class attribute, however it should be noted that it will work for any attribute that might be applied the same way. Custom HTML5 data attributes or checked attributes would be excellent choices to handle this way as well.

Filed under: CodeProject, Development

Image 2 Image 3 Image 4 Image 5 Image 6 Image 7 Image 8 Image 9

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


Written By
Software Developer (Senior)
United States United States
An experienced Software Developer and Graphic Designer with an extensive knowledge of object-oriented programming, software architecture, design methodologies and database design principles. Specializing in Microsoft Technologies and focused on leveraging a strong technical background and a creative skill-set to create meaningful and successful applications.

Well versed in all aspects of the software development life-cycle and passionate about embracing emerging development technologies and standards, building intuitive interfaces and providing clean, maintainable solutions for even the most complex of problems.

Comments and Discussions

 
-- There are no messages in this forum --