How to add a second css class with a conditional value in razor MVC 4

Question

While Microsoft has created some automagic rendering of html attributes in razor MVC4, it took me quite some time to find out how to render a second css class on an element, based on a conditional razor expression. I would like to share it with you.

Based on a model property @Model.Details, I want to show or hide a list item. If there are details, a div should be shown, otherwise, it should be hidden. Using jQuery, all I need to do is add a class show or hide, respectively. For other purposes, I also want to add another class, "details". So, my mark-up should be:

<div class="details show">[Details]</div> or <div class="details hide">[Details]</div>

Below, I show some failed attempts (resulting mark-up assuming there are no details).

This: <div @(@Model.Details.Count > 0 ? "class=details show" : "class=details hide")>,

will render this: <div class="details" hide="">.

This: <div @(@Model.Details.Count > 0 ? "class=\"details show\"" : "class=\"details hide\"")>.

will render this: <div class=""details" hide"="">.

This: <div @(@Model.Details.Count > 0 ? "class='details show'" : "class='details hide'")>

will render this: <div class="'details" hide'="">.

None of these are correct mark-up.

All of your first solutions would've worked if you wrapped them in a new instance of MvcHtmlString or used Html.Raw — Kyle
– Kyle, Commented Jul 23, 2013 at 19:43

von v. · Accepted Answer · 2013-03-29 10:01:53Z

397

I believe that there can still be and valid logic on views. But for this kind of things I agree with @BigMike, it is better placed on the model. Having said that the problem can be solved in three ways:

Your answer (assuming this works, I haven't tried this):

<div class="details @(@Model.Details.Count > 0 ? "show" : "hide")">

Second option:

@if (Model.Details.Count > 0) {
    <div class="details show">
}
else {
    <div class="details hide">
}

Third option:

<div class="@("details " + (Model.Details.Count>0 ? "show" : "hide"))">

answered Mar 29, 2013 at 10:01

von v.

17.1k5 gold badges62 silver badges89 bronze badges

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

5 Comments

R. Schreurs Over a year ago

I've accepted this as the answer, since it offers more options than mine.

Intrepidis Over a year ago

The 2nd option causes the error The "div" element was not closed

von v. Over a year ago

Of course it will as what's written here is not the complete code but rather the part of the code that is in question. Who knows how many other elements are in the div ;)

Martin Erlic Over a year ago

Didn't work for me. I got this error

'ClubsModel' does not contain a definition for 'ClubsFilter' and no extension method 'ClubsFilter' accepting a first argument of type 'ClubsModel' could be found (are you missing a using directive or an assembly reference?)

von v. Over a year ago

How is your problem related to the posted question?

Sanchitos · Accepted Answer · 2019-08-10 00:32:34Z

95

This:

    <div class="details @(Model.Details.Count > 0 ? "show" : "hide")">

will render this:

    <div class="details hide">

and is the mark-up I want.

edited Aug 10, 2019 at 0:32

Sanchitos

8,5996 gold badges54 silver badges53 bronze badges

answered Mar 29, 2013 at 9:40

R. Schreurs

9,2245 gold badges48 silver badges67 bronze badges

3 Comments

BigMike Over a year ago

I don't like having logic in views, even if it's trivial logic, I prefer using a ModelView object with a getDetailClass() method.

Chris Diver Over a year ago

Personally I prefer the trivial logic, having a getDetailCssClass method means that your Model is aware of your View, breaking down that abstraction. I would add an HasDetails method to the Model to reduce the logic required in the view, then leave the css class logic to the view, that means you don't have to litter the view with @Model.Details.Count > 0. e.g. <div class="details @(@Model.HasDetails ? "show" : "hide")">

Pragmateek Mar 18 at 10:17

For those coming later as it adds confusion: @BigMike was talking of a view model (not a business/data model) which is shaped to match the need of the view as its name implies, so by construction it is aware of the view, and is the right place to put this kind of view related logic, especially if it can be shared between many views.

syned · Accepted Answer · 2013-07-23 19:36:57Z

31

You can add property to your model as follows:

    public string DetailsClass { get { return Details.Count > 0 ? "show" : "hide" } }

and then your view will be simpler and will contain no logic at all:

    <div class="details @Model.DetailsClass"/>

This will work even with many classes and will not render class if it is null:

    <div class="@Model.Class1 @Model.Class2"/>

with 2 not null properties will render:

    <div class="class1 class2"/>

if class1 is null

    <div class=" class2"/>

answered Jul 23, 2013 at 19:36

syned

2,31119 silver badges23 bronze badges

4 Comments

tobiak777 Over a year ago

I think it's better to let the view define things such as the css classes. Remember that the view should be able to be deply modified (or even replaced) without it affecting the View Model

Gonzalo Méndez Over a year ago

Although I agree with reddy in general, there might be cases in which it can be justified to do it the way syned says. I did it exactly like that. In my case I'm relying on a ViewModel object full of information for rendering the view, it's not just a data object.

cah1r Over a year ago

I'd use it like this if there were more than 2 outcomes. For example for 5 possible classes. Than it'd be messy to keep it in view.

Tom Blodget Over a year ago

The view is the right place. Format it nicely as variable assignments in a code block and it won't be messy.

Chetan Gaonkar · Accepted Answer · 2018-11-13 13:18:26Z

8

You can use String.Format function to add second class based on condition:

<div class="@String.Format("details {0}", Details.Count > 0 ? "show" : "hide")">

answered Nov 13, 2018 at 13:18

Chetan Gaonkar

812 silver badges1 bronze badge

Comments

carloswm85 · Accepted Answer · 2022-12-27 15:03:53Z

1

A more reusable approach inside your Razor code:

@functions {
    public static string Displayed(int count)
    {
        return count > 0 ? "show" : "hide";
    }
}

Using it:

<div class="@Displayed(Details.count)">Details content</div>

Which you can reuse anywhere in your code.

answered Dec 27, 2022 at 15:03

carloswm85

2,6611 gold badge28 silver badges35 bronze badges

Collectives™ on Stack Overflow

How to add a second css class with a conditional value in razor MVC 4

5 Answers 5

5 Comments

3 Comments

4 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

5 Comments

3 Comments

4 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related