如何在razorMVC 4中添加一个条件值的第二个CSS类

虽然微软已经在razorMVC4中创build了一些自动渲染的html属性，但是花了我相当长的时间才发现如何在一个元素上渲染第二个CSS类，这是基于条件razorexpression式的。我想与你分享。

基于模型属性@ Model.Details，我想显示或隐藏一个列表项。如果有细节，应该显示div，否则应该隐藏。使用jQuery，我所需要做的就是分别添加一个类show或hide。为了其他目的，我还想添加另一个类“细节”。所以，我的标记应该是：

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

下面，我展示了一些失败的尝试（假设没有细节导致标记）。

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

将呈现这个： <div class="details" hide=""> 。

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

将呈现这个： <div class=""details" hide"=""> 。

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

会呈现这个： <div class="'details" hide'=""> 。

这些都不是正确的标记。

我相信在这个意见上仍然有可能是有逻辑的。但是对于这种我赞同@BigMike的东西，最好放在模型上。说了这个问题可以用三种方法来解决：

你的答案（假设这个工作，我没有尝试过）：

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

第二个选项：

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

第三个选项：

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

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

将呈现这个： <div class="details hide">并且是我想要的标记。

您可以将属性添加到您的模型，如下所示：

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

那么你的观点就会更简单，而且根本不包含任何逻辑：

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

即使对于许多类，这也将起作用，如果它为null，则不会呈现类：

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

与2非空属性将呈现：

  <div class="class1 class2"/>

如果class1为null

  <div class=" class2"/>