如何在Razor MVC 4中添加第二个具有条件值的CSS类

虽然微软已经在Razor MVC4中创建了一些HTML属性的自动呈现，但我花了相当多的时间才发现如何基于条件Razor表达式在元素上呈现第二个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;="">。

这些都不是正确的标记。

186990 次浏览
小开

这个：

    <div class="details @(Model.Details.Count > 0 ? "show" : "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"))">
小开

可以按如下方式将属性添加到模型中：

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

然后您的视图将变得更简单，并且不包含任何逻辑：

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

这甚至适用于许多类，并且如果类为空，则不会呈现类：

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

如果有2个非空属性，则将呈现：

    <div class="class1 class2"/>

如果Class1为NULL

    <div class=" class2"/>
小开

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

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

提交答案