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?

Answer 1

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> 

Answer 2

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