Using Blazor @ Variables to Specify Html Attributes

Question

User-343630552 posted

I just tried to use a Blazor field reference to specify the checked state of a checkbox (i.e. <input type="checkbox" @CheckState>, where CheckState is either "checked" or "") and got an exception indicating @CheckState is not a valid attribute, indicating Blazor did not render it to its value.  I played around with it a bit and couldn't get it to work for any attribute I tried.  I could, however, use a field reference as the value of an attribute.

The only workaround I thought of is to specify the entire <input> twice within an @if block.  Not very elegant.  Am I missing something?  If not, does this sound like something I should request as a new feature?  

Answer 1

User-474980206 posted

Typically you would bind the value and the let blazor decide.

Answer 2

User-821857111 posted

With checkboxes in Razor, you should provide a boolean value/expression to the checked attribute. If it resolves to true, the attribute is rendered, otherwise it isn't:

<input type="checkbox" checked="@(CheckState == "checked")" />

Answer 3

User-343630552 posted

Thanks, Bruce and Mike.  As always, you guys are very helpful and appreciated.

I find the treatment of this boolean attribute to be confusing and will explain why in case others who read this post have the same confusion.  I thought I had tried the equivalent of Mike's code, but it didn't work because whatever value I assigned to the checked attribute caused the box to be checked, mirroring what this SO post says (https://stackoverflow.com/questions/4228658/what-values-for-checked-and-selected-are-false) and reinforced by this explanation (https://html.spec.whatwg.org/multipage/common-microsyntaxes.html#boolean-attributes).   I tried reading the W3.org spec, but got lost in what it said.  The key, as I understand it from Mike's code, is to assign a true boolean value (i.e. not true/false with or without quotes).  I am uncertain why that works, but it does.  And by the way, Mike's code also works without the quotes surrounding the boolean expression.  I think I have this right.

Anyway, thanks again for the guidance.  Steve

Answer 4

User-821857111 posted

I am uncertain why that works, but it does

It's a Razor feature known as Conditional Attributes: https://www.mikesdotnetting.com/Article/201/Cleaner-Conditional-HTML-Attributes-In-Razor-Web-Pages