web-dev-qa-db-ja.com

ボタンをよりエレガントに無効にする方法

私は私の見解の1つに次のかみそりコードを持っています：

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

かなり荒い。コードからワークアウトできるので、基本的には特定の条件下でボタンを無効にしたいと思います。これを行うためのより望ましい方法は何でしょうか？

htmlasp.net-mvc-3razor
23
AnonyMouse

使用している言語はわかりませんが、ifステートメントを2行の実際の違いに近づけることができる場合があります。

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

新しい拡張メソッドによって支援されるマークアップ中心のソリューション：

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>
17
David Grant

これを試して

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

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

肥大化したコードは必要ありません。単純にしてください:-)

2
user1985065

ヘルパーがお手伝いします：

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)
2
Darin Dimitrov
<button @(isEnabled ? null : "disabled")>Butt</button>
1
Oğuzhan Türk

可能な簡単な方法：

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

Asp.net mvc5かみそりを使用する：

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

かみそりがDevToolsに表示されないため、DevToolsからボタンを有効にする試みを防ぎます

1
Andrii