title: How to add a second css class with a conditional value in razor MVC 4
body: <p>While Microsoft has created some <a href="https://stackoverflow.com/questions/8061647/conditional-html-attributes-using-razor-mvc3#answer-8071699">automagic rendering of html attributes</a> 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.</p>
  
  <p>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:</p>
  
  <p><code>&lt;div class="details show"&gt;[Details]&lt;/div&gt;</code> or <code>&lt;div class="details hide"&gt;[Details]&lt;/div&gt;</code></p>
  
  <p>Below, I show some failed attempts (resulting mark-up assuming there are no details).</p>
  
  <p>This: <code>&lt;div @(@Model.Details.Count &gt; 0 ? "class=details show" : "class=details hide")&gt;</code>,</p>
  
  <p>will render this: <code>&lt;div class="details" hide=""&gt;</code>.</p>
  
  <p>This: <code>&lt;div @(@Model.Details.Count &gt; 0 ? "class=\"details show\"" : "class=\"details hide\"")&gt;</code>.</p>
  
  <p>will render this: <code>&lt;div class=""details" hide&amp;quot;=""&gt;</code>.</p>
  
  <p>This: <code>&lt;div @(@Model.Details.Count &gt; 0 ? "class='details show'" : "class='details hide'")&gt;</code></p>
  
  <p>will render this: <code>&lt;div class="'details" hide&amp;#39;=""&gt;</code>.</p>
  
  <p>None of these are correct mark-up.</p>