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?
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:
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.
Member
26 Points
63 Posts
Using Blazor @ Variables to Specify Html Attributes
Jul 18, 2020 06:02 PM|CincySteve|LINK
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?
All-Star
58164 Points
15646 Posts
Re: Using Blazor @ Variables to Specify Html Attributes
Jul 18, 2020 06:34 PM|bruce (sqlwork.com)|LINK
Typically you would bind the value and the let blazor decide.
All-Star
194434 Points
28074 Posts
Moderator
Re: Using Blazor @ Variables to Specify Html Attributes
Jul 24, 2020 05:48 AM|Mikesdotnetting|LINK
With checkboxes in Razor, you should provide a boolean value/expression to the
checkedattribute. If it resolves totrue, the attribute is rendered, otherwise it isn't:<input type="checkbox" checked="@(CheckState == "checked")" />Member
26 Points
63 Posts
Re: Using Blazor @ Variables to Specify Html Attributes
Jul 24, 2020 01:19 PM|CincySteve|LINK
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
All-Star
194434 Points
28074 Posts
Moderator
Re: Using Blazor @ Variables to Specify Html Attributes
Jul 24, 2020 01:32 PM|Mikesdotnetting|LINK