如何在razor MVC 4中添加带条件值的第二个css类

Question

虽然微软在剃刀MVC4中创建了一些html属性的自动渲染,但我花了很长时间才找到如何基于条件剃刀表达式在元素上渲染第二个css类.我想和你分享.

基于模型属性@ 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&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"/>

这甚至可以用于许多类,如果它为null,则不会呈现类:

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

使用2个非null属性将呈现:

    <div class="class1 class2"/>

如果class1为null

    <div class=" class2"/>

Answer 4

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

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