使用razor的条件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>
}

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

但是,我正在寻找一种方法,我只能disabled在if语句中包含该属性,而不是为每种情况都有一个单独的按钮元素.

有关如何做到这一点的任何建议？

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>

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为true,则disable元素存在,并设置为disable

它是如何工作的？

这要归功于Razor的"条件属性"功能.如果您将razor变量分配给cshtml(或vbhtml)中的属性,它将表现如下:

1. 如果变量或表达式的计算结果为null或false,则它将在结果html中省略该属性.
2. 如果变量或表达式的计算结果为true,它将输出属性AND,并为其赋予一个等于属性名称的值(例如:disabled=disabled,checked=checked......你明白了)
3. 如果变量或表达式求值为非空字符串,则会像往常一样将其分配给属性(例如:class="@myvar"=> class="the_value_of_myvar")
4. 如果变量或表达式求值为空字符串,它将输出该属性但不会分配任何值.

我对这个sintax的喜爱之处在于它极大地帮助您保持剃刀视图的可读性.

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

Answer 3

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

您可以使用 !(感叹号)选择不将单个元素评估为TagHelper

在其当前形式中，Razor TagHelpers 不允许您通过包含要插入的属性的字符串文字来插入属性。