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?

Answer 1

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:

1. If the variable or expression evaluates to null or false, it will ommit the attribute in the resulting html.
2. 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)
3. 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")
4. 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

Answer 2

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>