Html 如何在 razor MVC 4 中添加具有条件值的第二个 css 类
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15700741/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to add a second css class with a conditional value in razor MVC 4
提问by R. Schreurs
While Microsoft has created some automagic rendering of html attributesin razor MVC4, it took me quite some time to find out how to render a second css class on an element, based on a conditional razor expression. I would like to share it with you.
虽然 Microsoft在 razor MVC4 中创建了一些html 属性的自动渲染，但我花了很长时间才找到如何根据条件 razor 表达式在元素上渲染第二个 css 类。我想与你分享。
Based on a model property @Model.Details, I want to show or hide a list item. If there are details, a div should be shown, otherwise, it should be hidden. Using jQuery, all I need to do is add a class show or hide, respectively. For other purposes, I also want to add another class, "details". So, my mark-up should be:
基于模型属性@Model.Details，我想显示或隐藏列表项。如果有细节，应该显示一个div，否则应该隐藏。使用 jQuery，我需要做的就是分别添加一个类显示或隐藏。出于其他目的，我还想添加另一个类，“详细信息”。所以，我的标记应该是：
<div class="details show">[Details]</div>or <div class="details hide">[Details]</div>
<div class="details show">[Details]</div>或者 <div class="details hide">[Details]</div>
Below, I show some failed attempts (resulting mark-up assuming there are no details).
下面，我展示了一些失败的尝试（假设没有细节，结果标记）。
This: <div @(@Model.Details.Count > 0 ? "class=details show" : "class=details hide")>,
这：<div @(@Model.Details.Count > 0 ? "class=details show" : "class=details hide")>，
will render this: <div class="details" hide="">.
将呈现这个：<div class="details" hide="">。
This: <div @(@Model.Details.Count > 0 ? "class=\"details show\"" : "class=\"details hide\"")>.
这：<div @(@Model.Details.Count > 0 ? "class=\"details show\"" : "class=\"details hide\"")>。
will render this: <div class=""details" hide"="">.
将呈现这个：<div class=""details" hide"="">。
This: <div @(@Model.Details.Count > 0 ? "class='details show'" : "class='details hide'")>
这个： <div @(@Model.Details.Count > 0 ? "class='details show'" : "class='details hide'")>
will render this: <div class="'details" hide'="">.
将呈现这个：<div class="'details" hide'="">。
None of these are correct mark-up.
这些都不是正确的标记。
回答by von v.
I believe that there can still be and valid logic on views. But for this kind of things I agree with @BigMike, it is better placed on the model. Having said that the problem can be solved in three ways:
我相信在视图上仍然可以有有效的逻辑。但是对于这种事情，我同意@BigMike，最好放在模型上。话虽如此，问题可以通过三种方式解决：
Your answer (assuming this works, I haven't tried this):
您的回答（假设这有效，我还没有尝试过）：
<div class="details @(@Model.Details.Count > 0 ? "show" : "hide")">
Second option:
第二种选择：
@if (Model.Details.Count > 0) {
<div class="details show">
}
else {
<div class="details hide">
}
Third option:
第三个选项：
<div class="@("details " + (Model.Details.Count>0 ? "show" : "hide"))">
回答by R. Schreurs
This:
这个：
<div class="details @(Model.Details.Count > 0 ? "show" : "hide")">
will render this:
将呈现这个：
<div class="details hide">
and is the mark-up I want.
是我想要的加价。
回答by syned
You can add property to your model as follows:
您可以按如下方式向模型添加属性：
public string DetailsClass { get { return Details.Count > 0 ? "show" : "hide" } }
and then your view will be simpler and will contain no logic at all:
然后您的视图将更简单，并且根本不包含任何逻辑：
<div class="details @Model.DetailsClass"/>
This will work even with many classes and will not render class if it is null:
这将适用于许多类，并且如果类为空，则不会呈现类：
<div class="@Model.Class1 @Model.Class2"/>
with 2 not null properties will render:
具有 2 个非空属性将呈现：
<div class="class1 class2"/>
if class1 is null
如果 class1 为空
<div class=" class2"/>
回答by Chetan Gaonkar
You can use String.Format function to add second class based on condition:
您可以使用 String.Format 函数根据条件添加第二类：
<div class="@String.Format("details {0}", Details.Count > 0 ? "show" : "hide")">
