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

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

25

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,756
17
18

4

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

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

22

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,554
4
21
28

answered Apr 15 '12 at 21:36

Brendan Long

53,280
21
146
188

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
2

@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

David Grant · Answer 3 · 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,447
4
29
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

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

5

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

689
1
6
12

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

4

<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

121
1
1

score 3 · Answer 6 · 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 7 · 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

360
2
9
21

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

score 0 · Answer 9 · answered Jan 06 '23 at 18:04

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.

How to disable a button more elegantly

9 Answers9

Linked

Related