Question

这是我目前所拥有的

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

这适用于Chrome，但在Internet Explorer上并不隐藏

我也试过可见性设置为假但没有运气。

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

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

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

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

Answer 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>
}

Answer 2

尝试：

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

将“显示”样式属性与bool模型属性一起使用以定义div的可见性。

Answer 3

您的代码无效，因为IE before v11

版本不支持隐藏的属性

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

*[hidden] { display: none; }

Answer 4

我知道这个问题是专门关于隐藏 div 的，但是如果你不对 div 做任何其他事情（例如在 JavaScript 中），那么你就不能通过使用 Razor {{ 1}} 语法。

@if