Adding inline conditional statements in an MVC View

Question

I'm trying to dynamically add a class to a div in an MVC View; in this case error. I find myself creating a Razor If-Else block which means my view has lots of duplicated code. I have tried a few differant Razor scenario's but can't find a reasonable way to conditionally append new classes. Can anyone suggest an approach that avoids duplicating code and keeps View decisions in the View.

@if (ViewData.ModelState["Title"] != null && ViewData.ModelState["Title"].Errors.Any())
{
    <div class="select error">
        @Html.DropDownListWithTooltipFor(m => m.Title, Model.Titles, new { required = string.Empty, @class = "sel" })
    </div>
}
else
{
    <div class="select">
        @Html.DropDownListWithTooltipFor(m => m.Title, Model.Titles, new { required = string.Empty, @class = "sel" })
    </div>
}

Community · Accepted Answer · 2017-05-23 11:43:14Z

3

Try this:

 <div @(condition ? "class=select error" : "class = select">
 </div>

Razor will add the quotes for you (class = "select error"). This should work in MVC3. Also, take a look at: Conditional HTML Attributes using Razor MVC3 and MVC3 - Conditionally add id element with Razor (actually pretty much duplicates)

Note the answer of Erik Porter: If you can do it with MVC4, then there's a more elegant way:

<div class="@yourClass" />

edited May 23, 2017 at 11:43

CommunityBot

11 silver badge

answered Oct 13, 2012 at 12:34

Artur Udod

4,8011 gold badge35 silver badges59 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

JoeGeeky Over a year ago

@artur_udod I tried

<div @(ViewData.ModelState["Title"] != null && ViewData.ModelState["Title"].Errors.Any() ? "class=select error" : "class=select") >

but it resulted in <div class=select error >. This obviously is wrong... I tried to escape quotes but then it renders the encoded version which is also wrong. Any ideas?

JoeGeeky Over a year ago

Ok, I got it... this sample works.

<div class="@((ViewData.ModelState["Title"] != null && ViewData.ModelState["Title"].Errors.Any()) ? "select error" : "select")" >

Brian Ogden Over a year ago

<div class="@yourClass" /> is not a more elegant way, the CSS just leaked out of the view and into the controller, no bueno

Collectives™ on Stack Overflow

Adding inline conditional statements in an MVC View

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related