How to disable a button more elegantly

Question

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?

what could possibly be more desirable? What flaws do you see in your solution? — Tomas, Apr 15 '12 at 21:34
It's the [razor template engine](http://haacked.com/archive/2011/01/06/razor-syntax-quick-reference.aspx) which allows C# scripting via `@` prefix. — Yogu, Apr 15 '12 at 21:40

David Grant · Answer 1 · 2013-11-18T17:08:22.877

20

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>

edited Nov 18 '13 at 17:08

answered Nov 16 '13 at 01:37

David Grant

3,426
4
28
33

1

Great solution that really follows the spirit of the framework. Make sure you put the method in a namespace that MVC can see. – Daniel Feb 09 '18 at 00:07

score 19 · Accepted Answer · edited Aug 25 '16 at 07:54

19

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

edited Aug 25 '16 at 07:54

datoml

5,164
3
19
27

answered Apr 15 '12 at 21:36

Brendan Long

51,248
19
139
179

Doesn't seem to be accepting the disabled part in the if statement. It says the name 'disabled' does not exist in the current context – AnonyMouse Apr 15 '12 at 21:40
1

@AnonyMouse - Fixed now thanks to Yogu. In the future, you should include the language in your question so people don't have to guess at the syntax. – Brendan Long Apr 15 '12 at 21:46
I'm trying to use this in my code but the `@:` seems to be hiding the `}` in my code which causes a syntax error any ideas on that? – Mykroft Jun 20 '13 at 14:48
@Mykroft Maybe try putting the plaintext on its own line? Or just the `` syntax instead? – Brendan Long Jun 20 '13 at 15:49
I ended up putting `this.write` instead. Not a big deal but you may want to recheck the code in your answer and make sure it works with the `/>` on the end there. – Mykroft Jun 20 '13 at 17:30
This didnt work for me (razor does not compile) - went with @David Grant solution below – wal Jun 18 '14 at 23:04
I was able to get this to work by using a syntax similar to the one found in [this answer](http://stackoverflow.com/a/9399772/744014). – Scott Sep 21 '15 at 20:05
I find code like this is ok until you need to add a 2nd, 3rd and 4th class conditionally, too. – Chad Aug 22 '16 at 20:48

Simone S. · Answer 3 · 2022-05-27T15:18:01.830

18

Try this:

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

edited May 27 '22 at 15:18

answered Apr 25 '13 at 21:57

Simone S.

1,518
15
17

3

Only solution on this page that works for me in `.Net Core 2.1` – Alex Jun 24 '18 at 09:06

score 3 · Answer 4 · answered Apr 16 '12 at 06:45

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)

score 3 · Answer 5 · answered Jul 15 '13 at 20:46

3

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

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

answered Jul 15 '13 at 20:46

user1985065

111
1
1

score 3 · Answer 6 · answered Apr 25 '16 at 08:40

3

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

answered Apr 25 '16 at 08:40

Oğuzhan Türk

350
2
10
20

Andrii · Answer 7 · 2019-09-30T06:24:30.497

3

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

edited Sep 30 '19 at 06:24

answered Sep 30 '19 at 06:15

Andrii

629
1
5
12

score 1 · Answer 8 · answered Jul 25 '19 at 14:16

1

Possible easy way:

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

answered Jul 25 '19 at 14:16

Ire

29
3

How to disable a button more elegantly

8 Answers8

Linked

Related