Answered by:
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?
Saturday, July 18, 2020 6:02 PM
Answers
-
User-474980206 posted
Typically you would bind the value and the let blazor decide.
- Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
Saturday, July 18, 2020 6:34 PM -
User-821857111 posted
With checkboxes in Razor, you should provide a boolean value/expression to the
checked
attribute. If it resolves totrue
, the attribute is rendered, otherwise it isn't:<input type="checkbox" checked="@(CheckState == "checked")" />
- Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
Friday, July 24, 2020 5:48 AM -
User-821857111 posted
I am uncertain why that works, but it doesIt's a Razor feature known as Conditional Attributes: https://www.mikesdotnetting.com/Article/201/Cleaner-Conditional-HTML-Attributes-In-Razor-Web-Pages- Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
Friday, July 24, 2020 1:32 PM
All replies
-
User-474980206 posted
Typically you would bind the value and the let blazor decide.
- Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
Saturday, July 18, 2020 6:34 PM -
User-821857111 posted
With checkboxes in Razor, you should provide a boolean value/expression to the
checked
attribute. If it resolves totrue
, the attribute is rendered, otherwise it isn't:<input type="checkbox" checked="@(CheckState == "checked")" />
- Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
Friday, July 24, 2020 5:48 AM -
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
Friday, July 24, 2020 1:19 PM -
User-821857111 posted
I am uncertain why that works, but it doesIt's a Razor feature known as Conditional Attributes: https://www.mikesdotnetting.com/Article/201/Cleaner-Conditional-HTML-Attributes-In-Razor-Web-Pages- Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
Friday, July 24, 2020 1:32 PM