如何更优雅地禁用按钮

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" />
                }

很粗糙。基本上我想在特定条件下禁用该按钮，因为您可以从代码中得出结论。这样做更可取的方法是什么？

原文由 AnonyMouse 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

我不知道你使用的是什么语言，但你可以将你的 if 语句移动到更接近两行之间的实际差异：

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

原文由 Brendan Long 发布，翻译遵循 CC BY-SA 3.0 许可协议

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>

原文由 David Grant 发布，翻译遵循 CC BY-SA 3.0 许可协议