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

nfg76nw0  于 2022-12-31  发布在  其他
关注(0)|答案(5)|浏览(135)

虽然微软已经在razor MVC4中创建了一些html属性的automagic渲染,但我花了相当长的时间才找到如何基于条件razor表达式在元素上渲染第二个css类。我想和你分享一下。
基于模型属性@Model. Details,我想显示或隐藏一个列表项。如果有细节,就应该显示一个div,否则就应该隐藏它。使用jQuery,我需要做的就是分别添加一个类show或hide。出于其他目的,我还想添加另一个类"details"。因此,我的标记应该是:
<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;="">.
这些都不是正确的加价。

piah890a

piah890a1#

我相信观点上仍然可以有合理的逻辑,但对于这种事情我同意@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"))">
p1iqtdky

p1iqtdky2#

这一点:

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

将呈现以下内容:

<div class="details hide">

也是我想要的利润。

hvvq6cgz

hvvq6cgz3#

可按如下所示向模型中添加属性:

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"/>
btqmn9zl

btqmn9zl4#

可以使用String.format函数根据条件添加第二类:

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

wh6knrhe5#

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

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

使用它:

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

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

相关问题