如何在 razor MVC 4 中添加具有条件值的第二个 css class

Question

虽然 Microsoft 在 razor MVC4 中创建了一些html 属性的自动渲染，但我花了相当长的时间才找出如何基于条件 razor 表达式在元素上渲染第二个 css class。 我想和你分享。

基于 model 属性@Model.Details，我想显示或隐藏列表项。 如果有细节，应该显示一个div，否则应该隐藏。 使用 jQuery，我需要做的就是分别添加一个 class 显示或隐藏。 出于其他目的，我还想再补充一个class，“详情”。 所以，我的标记应该是：

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

这些都不是正确的标记。

Answer 1

我相信在视图上仍然可以有有效的逻辑。 但是对于这种事情，我同意@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"))">

Answer 2

这：

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

将呈现这个：

    <div class="details hide">

是我想要的加价。

Answer 3

您可以按如下方式向模型添加属性：

    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 为空

    <div class=" class2"/>

Answer 4

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

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

Answer 5

Razor 代码中一种更可重用的方法：

@functions {
    public static string Displayed(int count)
    {
        return count > 0 ? "show" : "hide";
    }
}

使用它：

<div class="@Displayed(Details.count)">Details content</div>

您可以在代码中的任何地方重复使用。