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

帮助者可以提供帮助：

public static class HtmlExtensions
{
    public static IHtmlString ApproveButton(this HtmlHelper htmlHelper, MyViewModel item)
    {
        var button = new TagBuilder("input");
        button.Attributes["type"] = "button";
        button.Attributes["value"] = "Reset";
        button.AddCssClass("btnresetinvoice");
        button.AddCssClass("button");
        button.Attributes["data-invoiceid"] = item.InvoiceId.ToString();
        if (item.PMApproved)
        {
            button.Attributes["disabled"] = "disabled";
        }
        return new HtmlString(button.ToString(TagRenderMode.SelfClosing));
    }
}

然后：

@Html.ApproveButton(item)

Answer 5

<input type="button" value="Reset" @{@((!item.PMApproved) ? null : new { disabled = "disabled" })}; />

不需要那些臃肿的代码，只需保持简单： - ）

Answer 6

<button @(isEnabled ? null : "disabled")>Butt</button>

Answer 7

可能的简便方法：

<input type="button" @(item.PMApproved ? "disabled" : "") />

Answer 8

使用asp.net mvc5剃须刀：

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

它可以防止尝试从DevTools启用按钮，因为剃须刀对于DevTools不可见

如何更优雅地禁用按钮

8 个答案: