Conditional Html attribute using razor

Question

I have a situation where I want to display a button as being enabled or disabled depending on a property which has been set on the view model.

@if (Model.CanBeDeleted)
{
    <button type="button" class="btn btn-danger btn-sm">
        <span class="glyphicon glyphicon-trash"> </span>
        Delete
    </button>
}
@if (!Model.CanBeDeleted)
{
    <button disabled="disabled" type="button" class="btn btn-danger btn-sm">
        <span class="glyphicon glyphicon-trash"> </span>
        Delete
    </button>
}

The code currently in my view, which can be seen above, does work.

However, I am looking for a way that I can wrap only the disabled attribute in the if statement rather than having a separate button element for each case.

Any suggestions for how I can do this?

Kemuel Sanchez · Accepted Answer · 2017-04-11 22:02:46Z

42

Try this:

<button type="button" class="btn btn-danger btn-sm" disabled="@Model.CanBeDeleted">
        <span class="glyphicon glyphicon-trash"> </span>
        Delete
</button>

Go ahead. Try it. You'll notice that when @Model.CanBeDeletedis false, the disable attribute is missing from the element. Conversely, when @Model.CanBeDeleted is true the disableelement is present, and is set to disable

How does it work?

It's thanks to Razor's "conditional attributes" feature. if you assign a razor variable to an atribute in your cshtml (or vbhtml) it will behave like this:

If the variable or expression evaluates to null or false, it will ommit the attribute in the resulting html.
If the variable or expression evaluates to true it will output the attribute AND will assign it a value equal to the name of the attribute (e.g.: disabled=disabled, checked=checked... you get the idea)
If the variable or expression evaluates to a non-empty string it will assign it to the atribute as usual (e.g.: class="@myvar" => class="the_value_of_myvar")
If the variable or expression evaluates to an empty string, it will output the attribute but won't assign any value.

What I love about this sintax is that it greatly helps in keeping your razor views readable.

You can read more about it in this article

answered Apr 11, 2017 at 22:02

Kemuel Sanchez

6808 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

hulkhan Over a year ago

I find this answer much cleaner given the OP's use case.

R. Schreurs Over a year ago

I applied the same mechanism for the checked attribute on a checkbox. Thanks for adding "Go ahead. Try it.", otherwise I may have discarded this solution up front!

Yawar Ali Over a year ago

if works for me <input asp-for="CompanyName" class="form-control" [email protected] />

Dimitris Thomas Over a year ago

best answer for an issue that looked easy but gave me some trouble until i found this, thank you

Nicolas Cadilhac Over a year ago

Does not work if the attribute is preceded by "data-". For instance, if I set an attribute like data-test="@null" it is added to the html.

KyleMit · Accepted Answer · 2017-04-06 13:13:17Z

34

You can use @Html.Raw to inject markup directly into elements

<button @Html.Raw(Model.CanBeDeleted?"":"disabled='disabled'") 
        type="button" class="btn btn-danger btn-sm">
  <span class="glyphicon glyphicon-trash"> </span> Delete
</button>

edited Apr 6, 2017 at 13:13

KyleMit♦

31.4k74 gold badges517 silver badges712 bronze badges

answered Jan 22, 2016 at 15:14

Nicolas Repiquet

9,3273 gold badges36 silver badges54 bronze badges

1 Comment

infografnet Over a year ago

Unfortunately this is not working in ASP.NET Core :(

pattpass · Accepted Answer · 2017-10-11 22:04:51Z

5

<!button @(Model.CanBeDeleted?"":"disabled='disabled'") 
type="button" class="btn btn-danger btn-sm">
  <span class="glyphicon glyphicon-trash"> </span> Delete
</!button>

You can Opt out individual elements from being evaluated as a TagHelper with !(Exclamation Point)

In its current form, Razor TagHelpers don't allow you to insert attributes by including the string literal of the attribute you want to insert.

answered Oct 11, 2017 at 22:04

pattpass

1311 silver badge5 bronze badges

Comments

Chad · Accepted Answer · 2016-01-22 14:54:43Z

0

Do the check once and have the disabled property be determined by a temporary variable called enabled.

@code
    var enabled = "disabled='disabled'";
    if(Model.CanBeDeleted)
    enabled = "";
    end code
    <button Html.Raw(enabled) type="button" class="btn btn-danger btn-sm">
            <span class="glyphicon glyphicon-trash"> </span>
            Delete
        </button>

answered Jan 22, 2016 at 14:54

Chad

8928 silver badges24 bronze badges

Collectives™ on Stack Overflow

Conditional Html attribute using razor

4 Answers 4

5 Comments

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

5 Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related