使用剃刀的条件 Html 属性

Question

我有一种情况，我想根据在视图模型上设置的属性将按钮显示为启用或禁用。

 @if (Model.CanBeDeleted)
{
    <button type="button" class="btn btn-danger btn-sm">
        <span class="glyphicon glyphicon-trash"> </span>
        Delete
    </button>
}
@if (!Model.CanBeDeleted)
{
    <button disabled="disabled" type="button" class="btn btn-danger btn-sm">
        <span class="glyphicon glyphicon-trash"> </span>
        Delete
    </button>
}

目前在我看来，可以在上面看到的代码确实有效。

但是，我正在寻找一种方法，我可以在 if 语句中仅包装 disabled 属性，而不是为每种情况使用单独的按钮元素。

关于如何执行此操作的任何建议？

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

Answer 1

您可以使用 @Html.Raw 将标记直接注入元素

<button @Html.Raw(Model.CanBeDeleted?"":"disabled='disabled'")
        type="button" class="btn btn-danger btn-sm">
  <span class="glyphicon glyphicon-trash"> </span> Delete
</button>

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

Answer 2

试试这个：

 <button type="button" class="btn btn-danger btn-sm" disabled="@Model.CanBeDeleted">
        <span class="glyphicon glyphicon-trash"> </span>
        Delete
</button>

前进。尝试一下。您会注意到，当 @Model.CanBeDeleted 为 false 时，元素中缺少 disable 属性。相反，当 @Model.CanBeDeleted 为真时 disable 元素存在，并设置为 disable

它是如何工作的？

这要归功于 Razor 的“条件属性”功能。如果您将 razor 变量分配给 cshtml （或 vbhtml ）中的属性，它将表现如下：

1. 如果变量或表达式的计算结果为 null 或 false，它将在生成的 html 中省略该属性。
2. 如果变量或表达式的计算结果为真，它将输出属性并为其分配一个等于属性名称的值（例如： disabled=disabled ， checked=checked …你得到主意）
3. 如果变量或表达式的计算结果为非空字符串，它将像往常一样将其分配给属性（例如： class="@myvar" => class="the_value_of_myvar “）
4. 如果变量或表达式的计算结果为空字符串，它将输出属性但不会分配任何值。

我喜欢这个 sintax 的地方在于它极大地有助于保持剃刀视图的可读性。

您可以在 本文 中阅读更多相关信息

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