如何更优雅地禁用按钮

Question

我的一个观点是以下剃刀代码:

@if (item.PMApproved != true) {
                    <input type="button" class="btnresetinvoice button" value="Reset" data-invoiceid="@item.InvoiceId" />
                }
                else {
                    <input type="button" class="btnresetinvoice button" value="Reset" data-invoiceid="@item.InvoiceId" disabled="disabled" />
                }

非常粗糙.基本上我想在某个条件下禁用该按钮,因为您可以从代码中解决问题.这样做更理想的方式是什么？

Answer 1

我不知道你正在使用什么语言,但你可以将你的if陈述更接近两行之间的实际差异:

<input type="button" class="btnresetinvoice button" value="Reset"
       data-invoiceid="@item.InvoiceId"
       @{ if(item.PMApproved != true) { 
             @:disabled="disabled" 
        } }
/>

Answer 2

以新的扩展方法辅助的以标记为中心的解决方案:

public static class HtmlExtensions
{
   public static HtmlString DisabledIf(this HtmlHelper html, bool condition)
   {
      return new HtmlString(condition ? "disabled=\"disabled\"" : "");
   }
}

在您的视图中,重用wazoo:

<button type="reset" @Html.DisabledIf(someCondition)>Clear Fields</button>

很好的可重用,并且渲染的标记对于空格非常干净:

<button type="reset" disabled="disabled">Clear Fields</button>

Answer 3

尝试这个

<button type="submit" disabled="@(!item.PMApproved)"></button>

Answer 4

使用 asp.net mvc5 剃刀：

@if(condition)
{
   <button data-toggle="collapse" data-target="#content">Details</button>
}
else
{
   <button disabled>Details</button>
}

它会阻止尝试从 DevTools 启用按钮，因为 Razor 对于 DevTools 不可见