使用 Razor 的条件 HTML 属性

Question

变量 strCSSClass 通常有一个值，但有时为空。

我不想在此输入元素的 HTML 中包含一个空的 class=““，这意味着如果 strCSSClass 为空，我根本不需要 class= 属性。

以下是执行条件 HTML 属性的一种方法：

 <input type="text" id="@strElementID" @(CSSClass.IsEmpty() ? "" : "class=" + strCSSClass) />

有没有更优雅的方式来做到这一点？特别是一个我可以遵循与元素其他部分中使用的语法相同的语法的地方：class=”@strCSSClass”？

原文由 tony722 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

你没有从我那里听到，Razor 的 PM，但是在 Razor 2（Web Pages 2 和 MVC 4）中，我们将在 Razor 中内置条件属性（从 MVC 4 RC 测试成功），所以你可以写东西像这样：

 <input type="text" id="@strElementID" class="@strCSSClass" />

如果 strCSSClass 为空，则类属性根本不会呈现。

进一步阅读

• Jon Galloway - ASP.NET MVC 4 Beta 发布！
• Razor 视图引擎和 ASP.NET MVC 4 中的条件属性

原文由 Erik Porter 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

请注意，您可以这样做（至少在 MVC3 中）：

 <td align="left" @(isOddRow ? "class=TopBorder" : "style=border:0px") >

我认为是剃须刀添加引号实际上是浏览器。正如 Rism 在使用 MVC 4 进行测试时指出的那样（我没有使用 MVC 3 进行测试，但我假设行为没有改变），这实际上会产生 class=TopBorder 但浏览器能够很好地解析它。 HTML 解析器对缺少属性引号有些宽容，但 如果您有空格或某些字符，这可能会中断。

 <td align="left" class="TopBorder" >

或者

<td align="left" style="border:0px" >

提供自己的报价有什么问题

如果您尝试对嵌套引号使用一些常用的 C# 约定，您最终会得到比预期更多的引号，因为 Razor 试图安全地转义它们。例如：

 <button type="button" @(true ? "style=\"border:0px\"" : string.Empty)>

这 应该 评估为 <button type="button" style="border:0px"> 但 Razor 转义了 C# 的所有输出并因此产生：

 style="border:0px"

如果您通过网络查看响应，您只会看到这一点。如果您使用 HTML 检查器，通常您实际上看到的是 DOM，而不是原始 HTML。浏览器将 HTML 解析为 DOM，解析后的 DOM 表示已经应用了一些细节。在这种情况下，浏览器发现属性值周围没有引号，添加它们：

 style=""border:0px""

但在 DOM 检查器中，HTML 字符代码显示正确，因此您实际看到：

 style=""border:0px""

在 Chrome 中，如果您右键单击并选择编辑 HTML，它会切换回来，这样您就可以看到那些讨厌的 HTML 字符代码，清楚地表明您有真正的外引号和 HTML 编码的内引号。

所以尝试自己引用的问题是 Razor 避开了这些。

如果您想完全控制报价

使用 Html.Raw 来防止引号转义：

 <td @Html.Raw( someBoolean ? "rel='tooltip' data-container='.drillDown a'" : "" )>

呈现为：

 <td rel='tooltip' title='Drilldown' data-container='.drillDown a'>

上面的代码非常安全，因为我没有从变量输出任何 HTML。唯一涉及的变量是三元条件。但是， 请注意，如果从用户提供的数据构建字符串，最后一项技术可能会使您面临某些安全问题。例如，如果您从源自用户提供的数据的数据字段构建属性，则使用 Html.Raw 意味着字符串可能包含属性和标记的过早结束，然后开始一个脚本标记，该标记代表当前登录的用户执行某些操作用户（可能与登录用户不同）。也许你有一个包含所有用户图片列表的页面，并且你正在将工具提示设置为每个人的用户名，并且一个用户命名为自己 '/><script>$.post('changepassword.php?password=123')</script> 现在任何其他查看此页面的用户都有他们的密码立即更改为恶意用户知道的密码。

原文由 AaronLS 发布，翻译遵循 CC BY-SA 3.0 许可协议