如何根据模型值隐藏 div 元素？ MVC答案

【问题标题】：How to hide a div element depending on Model value? MVC如何根据模型值隐藏 div 元素？ MVC
【发布时间】：2014-02-26 15:37:22
【问题描述】：

这是我目前拥有的

 hidden="@(Model.IsOwnedByUser||!Model.CanEdit)"

这在 Chrome 上运行良好，但在 Internet Explorer 上不隐藏

我也尝试将可见性设置为 false，但没有运气。

然后我发现了另一种风格，如下所示

style="@(Model.IsOwnedByUser||!Model.CanEdit)?'display:none'""

我无法让它工作。使用 Razor 语法隐藏元素的正确格式是什么？

或者我会使用 Jquery 来隐藏元素。但实际上是否可以打印出会在页面加载时隐藏元素的 jquery 语句？

【问题讨论】：

第二个说法有什么问题？除了你最后有两个" 并且缺少一个“else”（:''）
style="@(Model.IsOwnedByUser || !Model.CanEdit)?'display:none':'display'" 当我看到源代码时
这是返回：style?'display:none':'display'

【解决方案1】：

以下代码应根据您的模型的 CanEdit 属性值应用不同的 CSS 类。

<div class="@(Model.CanEdit?"visible-item":"hidden-item")">Some links</div>

但如果它是重要的东西，比如编辑/删除链接，你不应该简单地隐藏，因为人们可以在他们的浏览器中更新 css 类/HTML 标记并访问你的重要链接。相反，您应该不向浏览器呈现重要的内容。

@if(Model.CanEdit)
{
  <div>Edit/Delete link goes here</div>
}

【讨论】：

第二种方法是在视图中使用逻辑，这不是一种受欢迎的方法。

【解决方案2】：

试试：

<div style="@(Model.booleanVariable ? "display:block" : "display:none")">Some links</div>

使用带有布尔模型属性的“显示”样式属性来定义 div 的可见性。

【讨论】：

请format您的答案以提高其可读性。解释为什么这样做和/或提供参考资料也会改善您的答案。
我不应该将它用于敏感信息。因为 Display:none 可以通过 Inspect Element 在浏览器中禁用。使用 Shyju 的回答中所述的@if 语句更安全。
@Steven，我们仍然可以通过检查更改类值...或者可以从类名更改显示属性.. 所以几乎没关系
如果您将display:none 放在样式或css 类中，它仍然会被渲染。你会想要阻止 div 渲染，

【解决方案3】：

您的代码不起作用，因为 IE before v11 的版本不支持隐藏属性

如果需要在11版本之前支持IE，添加CSS样式，当隐藏属性出现时隐藏：

*[hidden] { display: none; }

【讨论】：

【解决方案4】：

我知道这个问题是关于隐藏 div，但如果你不对 div 做任何其他事情（例如在 JavaScript 中），那么你可以不使用 Razor @987654321 将它包含在视图的输出中@ 语法。

@if (Model.IsOwnedByUser && Model.CanEdit)
{
<div>Some Links</div>
}

【讨论】：