如何添加第二个CSS类与剃刀MVC 4条件值(How to add a second css cla

虽然微软已经创造了一些HTML属性的AUTOMAGIC呈现在剃刀MVC4，我花了相当长的一段时间去找出如何呈现的元素上的第二css类的基础上，有条件的剃刀表达。 我愿与你分享。

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

<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个NOT NULL属性将呈现：

    <div class="class1 class2"/>

如果class1的是空

    <div class=" class2"/>

Answer 4:

您可以使用的String.Format功能，根据病情增加第二类：

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

文章来源: How to add a second css class with a conditional value in razor MVC 4