如何在剃刀MVC 4中添加带有条件值的第二个CSS类

尽管微软已经在剃刀MVC4中创建了html属性的自动渲染，但是我花了很多时间才发现如何基于条件剃刀表达式在元素上渲染第二个CSS类。我想和你分享。

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

<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&quot;="">。

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

将呈现此： <div class="'details" hide&#39;="">。

这些都不是正确的标记。

我认为，视图上仍然存在有效的逻辑。但是对于这种我同意@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个非null属性将呈现：

    <div class="class1 class2"/>

如果class1为null

    <div class=" class2"/>

您可以使用String.Format函数根据条件添加第二类：

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