c# - 使用 Razor 的条件 Html 属性

Question

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

@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 属性，而不是为每种情况使用单独的按钮元素。

有什么关于如何做到这一点的建议吗？

Answer 1

试试这个:

<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. 如果变量或表达式的计算结果为空字符串，它将输出属性但不会分配任何值。

我喜欢这个语法的一点是它极大地有助于保持 Razor View 的可读性。

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