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

Posted 2023-02-15

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

【英文标题】：How to add a second css class with a conditional value in razor MVC 4

【发布时间】：2013-03-20 00:09:47

【问题描述】：

虽然 Microsoft 在 razor MVC4 中创建了一些 automagic rendering of html attributes，但我花了很长时间才了解如何基于条件 razor 表达式在元素上呈现第二个 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"="">。

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

将呈现这个：<div class="'details" hide'="">。

这些都不是正确的标记。

【问题讨论】：

如果您将所有第一个解决方案包装在 MvcHtmlString 的新实例中或使用 Html.Raw

【参考方案1】：

这个：

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

将呈现这个：

    <div class="details hide">

并且是我想要的标记。

【讨论】：

我不喜欢视图中有逻辑，即使它是微不足道的逻辑，我更喜欢使用带有 getDetailClass() 方法的 ModelView 对象。

就我个人而言，我更喜欢琐碎的逻辑，拥有 getDetailCssClass 方法意味着您的模型知道您的视图，从而打破了这种抽象。我会在模型中添加一个 HasDetails 方法以减少视图中所需的逻辑，然后将 css 类逻辑留给视图，这意味着您不必在视图中乱扔@Model.Details.Count > 0。例如<div class="details @(@Model.HasDetails ? "show" : "hide")">

【参考方案2】：

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

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

【参考方案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"/>

【讨论】：

我认为最好让视图定义诸如css类之类的东西。请记住，视图应该能够在不影响视图模型的情况下进行深度修改（甚至替换）

虽然我总体上同意 reddy，但在某些情况下，按照 syned 所说的方式进行操作是合理的。我就是这样做的。在我的例子中，我依靠一个充满信息的 ViewModel 对象来呈现视图，它不仅仅是一个数据对象。

如果有超过 2 个结果，我会这样使用它。例如对于 5 个可能的类。比把它放在视野里会很乱。

视图是正确的地方。将其很好地格式化为代码块中的变量赋值，它不会乱七八糟。

【参考方案4】：

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

【讨论】：

我接受了这个作为答案，因为它提供了比我更多的选择。

第二个选项导致错误The "div" element was not closed

当然会，因为这里写的不是完整的代码，而是有问题的代码部分。谁知道 div 中有多少其他元素 ;)

对我不起作用。我收到此错误'ClubsModel' does not contain a definition for 'ClubsFilter' and no extension method 'ClubsFilter' accepting a first argument of type 'ClubsModel' could be found (are you missing a using directive or an assembly reference?)

您的问题与发布的问题有何关系？