使用剃刀的条件 Html 属性

Posted 2023-03-05

【中文标题】使用剃刀的条件 Html 属性

【英文标题】：Conditional Html attribute using razor

【发布时间】：2016-04-29 05:11:40

【问题描述】：

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

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

对我如何做到这一点有什么建议吗？

【参考方案1】：

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

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

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

【参考方案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）中的属性，它将表现如下：

如果变量或表达式的计算结果为 null 或 false，它将省略生成的 html 中的属性。 如果变量或表达式的计算结果为 true，它将输出属性并为其分配一个与属性名称相等的值（例如：disabled=disabled、checked=checked... 你明白了） 如果变量或表达式的计算结果为非空字符串，它将照常将其分配给属性（例如：class="@myvar" => class="the_value_of_myvar"） 如果变量或表达式的计算结果为空字符串，它将输出属性但不会分配任何值。

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

您可以在article 中了解更多信息

【讨论】：

考虑到 OP 的用例，我发现这个答案更清晰。

我对@9​​87654335@ 的checked 属性应用了相同的机制。感谢您添加“继续。试试吧。”，否则我可能已经放弃了这个解决方案！

如果适合我<input asp-for="CompanyName" class="form-control" disabled=@Model.IsEdit />

一个看起来很简单但给我带来麻烦的问题的最佳答案，直到我找到这个，谢谢

【参考方案3】：

您可以使用@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>

【讨论】：

不幸的是，这在 ASP.NET Core 中不起作用:(

【参考方案4】：

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

@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>