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属性，而不是为每种情况都有一个单独的按钮元素。

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

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为真时，disable元素存在，并设置为disable

它是如何工作的？

这要归功于Razor的“条件属性”功能。如果您将剃刀变量分配给cshtml（或vbhtml）中的属性，则其行为将如下所示：

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

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

您可以在此article

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不允许您通过包含要插入的属性的字符串文字来插入属性。

Answer 4

执行一次检查，并通过名为enabled的临时变量确定disabled属性。

@code
    var enabled = "disabled='disabled'";
    if(Model.CanBeDeleted)
    enabled = "";
    end code
    <button Html.Raw(enabled) type="button" class="btn btn-danger btn-sm">
            <span class="glyphicon glyphicon-trash"> </span>
            Delete
        </button>

使用razor的条件Html属性

4 个答案: