使用剃须刀的有条件Html属性

我有一种情况，我想显示一个按钮作为启用或禁用取决于视图模型上设置的属性。使用剃须刀的有条件Html属性

@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属性，而不是为每种情况分别设置一个按钮元素。

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

来源

2016-01-22 TomJerrum

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

来源

2016-01-22 15:14:55

执行一次检查并通过名为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>

来源

2016-01-22 14:54:43 Chad

试试这个：

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

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

它是如何工作的？

感谢Razor的“条件属性”功能。如果您在分配剃刀变量的属性附加伤害你的cshtml（或vbhtml）将这样的表现：

如果变量或表达式的计算结果为空或假，它会在ommit生成的HTML属性。
如果变量或表达式的值为true它将输出属性，将其分配等于属性的名称（例如：disabled=disabled，checked=checked ......你的想法）的值
如果变量或表达式评估为非空字符串，它将像往常一样将其分配给属性（例如：class="@myvar" =>class="the_value_of_myvar“）
如果变量或表达式计算为空字符串，则会输出属性但不会分配任何值

我喜欢这个sintax的是它大大的有助于保持剃须刀视图的可读性。

你可以阅读更多关于它在这个article

来源

2017-04-11 22:02:46

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

可以被评价为！（感叹号）

在其目前的形式，剃刀TagHelpers穿上TagHelper选择退出各个元素不允许通过包含要插入的属性的字符串字面值来插入属性。

来源

2017-10-11 22:04:51 pattpass

使用剃须刀的有条件Html属性

回答

相关问题