CODEWITHSUNDEEP
htmlasp.net-mvc-3razor
AnonyMouse
AnonyMouse

Reputation: 18630

How to disable a button more elegantly

I have on one of my views the following razor code:

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

Pretty rough. Basically I want to disable the button under a certain condition as you'd be able to work out from the code. What would be a more desirable way of doing this?

Upvotes: 36

Views: 54402

Answers (9)

Leniel Maccaferri
Leniel Maccaferri

Reputation: 102378

This will do it elegantly:

<button type="button"
        class="save"
        onclick="doSomething()"
        style="@(hasValidationErrors ? "background-color:gray;cursor:default" : string.Empty)" @(hasValidationErrors ? "disabled" : string.Empty)
        title="@validationErrors"
        @{
            if (ViewModel.Property == true)
            {
                @:disabled="disabled"
            }
         }>

Notice ViewModel.Property == true... this will add the disabled attribute to the button only if that view model property holds true. If false, no disabled attribute will be present and as such the button will be enabled.

Upvotes: 0

Simone S.
Simone S.

Reputation: 1916

Try this:

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

Upvotes: 32

Andrii
Andrii

Reputation: 699

Using asp.net mvc5 razor:

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

It prevents attempting to enable button from DevTools, because razor not visible for DevTools

Upvotes: 5

Ire
Ire

Reputation: 29

Possible easy way:

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

Upvotes: 1

Brendan Long
Brendan Long

Reputation: 54242

I don't know what language you're using, but you might be able to move your if statement closer to the actual different between the two lines:

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

Upvotes: 21

Oğuzhan T&#252;rk
Oğuzhan T&#252;rk

Reputation: 380

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

Upvotes: 3

David Grant
David Grant

Reputation: 3477

A markup-centric solution aided by a new extension method:

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

In your views, reuse out the wazoo:

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

Nicely reusable, and the rendered markup is very clean with regards to whitespace:

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

Upvotes: 22

user1985065
user1985065

Reputation: 131

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

No need for that bloated code, just keep it simple :-)

Upvotes: 5

Darin Dimitrov
Darin Dimitrov

Reputation: 1038710

A helper could help:

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));
    }
}

and then:

@Html.ApproveButton(item)

Upvotes: 3

Related Questions