虽然微软已经在razor MVC4中创建了大约automagic rendering of html attributes个,但我花了相当长的时间来了解如何基于条件剃刀表达式在元素上呈现第二个CSS类.我想和你分享一下.

基于模型属性@Model.Details,我希望显示或隐藏列表项.如果有详细信息,则应显示div,否则应将其隐藏.使用jQuery,我所需要做的就是分别添加一个类显示或隐藏.出于其他目的,我还想添加另一个类"Details".所以,我的加价应该是:

<div class="details show">[Details]</div><div class="details hide">[Details]</div>

下面,我展示了一些失败的try (假设没有任何细节,则会导致加价).

这个:<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;="">.

这些都不是正确的加价.

推荐答案

我相信,在观点上仍然可以有合理的逻辑.但对于这类事情,我同意@BigMike,它更适合放在模型上.话虽如此,这个问题可以通过三种方式解决:

你的答案(假设这个可行,我还没有试过这个):

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

第二个选项:

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

第三种 Select :

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

Html相关问答推荐

包装长线条之前需要什么CSS,但仅需要最小宽度?

为移动显示重新排序内容

HTML CSS如何使用图像作为中心点将元素置于中心

我的表的第一列似乎是推其他2列到右边,我不能改变它

有没有可能一个按钮,有焦点,然后再次点击它清除它的焦点,只是使用css?

用于删除页面页眉上的超链接的CSS

在窄屏幕上显示表格,每个单元格占一行

不呈现孙子元素,使用R htmlTools::Taglist为分页的pdf生成HTML

如何在VB.NET中用打印预览和直接打印的方式在Html中打印数据表的内容,包括页眉/设置纸张/方向/适合页面/总计

30000ms后超时重试:期望找到元素:someElement,但从未找到它

R 中的网页抓取数字?

如何用js和CSS在两点之间画一条线

在选项标签中如何添加Django模板的条件

CSS "overflow"不能显示整个单词

W3Schools 幻灯片相同高度

在 vscode 中找不到 htmltagwrap 命令

CSS 斜角与 3 行对齐

CSS Padding 将右对齐的对象推离页面

隐藏在标题后面的下拉菜单

focusout() Select 器不适用于搜索框