locked
Using Blazor @ Variables to Specify Html Attributes RRS feed

  • 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 to true, 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 does
    It'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 to true, 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 does
    It'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