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    lt div class  details show  gt  Details  lt  div gt  or  lt div class  details hide  gt  Details  lt  div gt   Below  I show some failed attempts  resulting mark-up assuming there are no details    This   lt div    Model Details Count  gt  0    class details show     class details hide   gt    will render this   lt div class  details  hide    gt    This   lt div    Model Details Count  gt  0    class   details show       class   details hide     gt    will render this   lt div class   details  hide amp quot     gt    This   lt div    Model Details Count  gt  0    class  details show      class  details hide    gt   will render this   lt div class   details  hide amp  39     gt    None of these are correct mark-up

User · Answer

You can use String Format function to add second class based on condition    lt div class   String Format  details  0    Details Count  gt  0    show     hide    gt

User · Answer

This        lt div class  details   Model Details Count  gt  0    show     hide    gt    will render this        lt div class  details hide  gt    and is the mark-up I want

User · Answer

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     lt div class  details    Model Details Count  gt  0    show     hide    gt    Second option    if  Model Details Count  gt  0         lt div class  details show  gt    else        lt div class  details hide  gt      Third option    lt div class     details      Model Details Count gt 0    show     hide     gt

User · Answer

You can add property to your model as follows       public string DetailsClass   get   return Details Count  gt  0    show     hide        and then your view will be simpler and will contain no logic at all        lt div class  details  Model DetailsClass   gt    This will work even with many classes and will not render class if it is null        lt div class   Model Class1  Model Class2   gt    with 2 not null properties will render        lt div class  class1 class2   gt    if class1 is null       lt div class   class2   gt

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

Examples related to razor

Examples related to asp.net-mvc-4

Examples related to html