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

虽然Microsoft已经在razor MVC4中创建了一些，但我花了相当长的时间才了解如何基于条件razor表达式在元素上呈现第二个css类。我想和你分享一下

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

[详细信息]

或

[详细信息]

下面，我展示了一些失败的尝试（假设没有详细信息，则会导致标记）

这：

0？“类=详细信息显示”：“类=详细信息隐藏”）>

将呈现以下内容：

这：

0？“类=\“详细信息显示”：“类=\“详细信息隐藏\”）>

将呈现以下内容：

这：

0？“class='details show'”>“class='details hide'”>

将呈现以下内容：

这些都不是正确的标记。

这是：

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

将呈现以下内容：

    <div class="details hide">

---

这是我想要的加价。

我相信视图上仍然可以存在有效的逻辑。但对于这类事情，我同意@BigMike，它更适合放在模型上。话虽如此，问题可以通过三种方式解决：

您的答案（假设这是可行的，我还没有尝试过）：

第二种选择：

@if (Model.Details.Count > 0) {
    <div class="details show">
}
else {
    <div class="details hide">
}

@if（Model.Details.Count>0）{
}
否则{
}

第三种选择：

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

---

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

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

这样，您的视图将更简单，并且将不包含任何逻辑：

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

即使在许多类中也可以使用，如果类为null，则不会呈现该类：

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

使用2个非空属性将呈现：

    <div class="class1 class2"/>

如果class1为空

    <div class=" class2"/>

---

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

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

我不喜欢在视图中包含逻辑，即使是琐碎的逻辑，我也更喜欢使用带有getDetailClass（）方法的ModelView对象。就我个人而言，我更喜欢琐碎的逻辑，拥有getDetailCssClass方法意味着您的模型知道您的视图，打破了这种抽象。我会向模型添加一个HasDetails方法，以减少视图中所需的逻辑，然后将css类逻辑留给视图，这意味着您不必在视图中乱扔

@Model.Details.Count>0

。e、 g.

如果您将所有第一个解决方案包装在一个新的MvcHtmlString实例中或使用Html，那么它们都会起作用。RawI已经接受了这个答案，因为它提供了比我更多的选项。第二个选项导致错误

的“div”元素没有关闭

当然会关闭，因为这里写的不是完整的代码，而是有问题的代码部分。谁知道div中还有多少其他元素；）不适合我。我发现此错误

“ClubsModel”不包含“ClubsFilter”的定义，并且找不到接受“ClubsModel”类型的第一个参数的扩展方法“ClubsFilter”（是否缺少using指令或程序集引用？）

您的问题与发布的问题有什么关系？我认为最好让视图定义css类之类的内容。请记住，视图应该能够在不影响视图模型的情况下进行深度修改（甚至替换），尽管我大体上同意reddy的观点，但在某些情况下，可以按照syned所说的方式进行修改。我就是这样做的。在我的例子中，我依靠一个充满信息的ViewModel对象来渲染视图，它不仅仅是一个数据对象。如果有两个以上的结果，我会这样使用它。例如，5个可能的类。而不是把它放在视线里太乱了。视线是正确的地方。将其格式化为代码块中的变量赋值，这样就不会造成混乱。

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