Add an InputRadio component

[MarkStega]

I have the the following in my cshtml

    <td>
        <input type="radio" name="vacation" bind="@northwestVacation" /> Northwest @northwestVacation<br>
        <input type="radio" name="vacation" bind="@sinaiVacation" /> Sinai @sinaiVacation
    </td>

with corresponding properties northwestVacation and sinaiVacation in my code. During a debug session I see the get called numerous times for each but even with a true value the corresponding radio button is not in the selected state. And, as I select either button I never see the set called on either property.

[SteveSandersonMS]

Yes, radio buttons aren't one of the supported input elements yet. This is a good thing to add to the backlog.

[MarkStega]

@SteveSandersonMS

It appears that the issue for the input type of radio is the generated code for the GetValue (100) against 'value'

builder5.OpenElement(97, "input");
builder5.AddAttribute(98, "type", "radio");
builder5.AddAttribute(99, "name", "vacation");
builder5.AddAttribute(100, "value", Microsoft.AspNetCore.Blazor.Components.BindMethods.GetValue(northwestVacation));
builder5.AddAttribute(101, "onchange", Microsoft.AspNetCore.Blazor.Components.BindMethods.SetValueHandler(__value => northwestVacation = __value, northwestVacation));

as opposed to a checkbox with the same binding that generates the GetValue (117) against 'checked'

builder5.OpenElement(115, "input");
builder5.AddAttribute(116, "type", "checkbox");
builder5.AddAttribute(117, "checked", Microsoft.AspNetCore.Blazor.Components.BindMethods.GetValue(northwestVacation));
builder5.AddAttribute(118, "onchange", Microsoft.AspNetCore.Blazor.Components.BindMethods.SetValueHandler(__value => northwestVacation = __value, northwestVacation));

I gave a shot at understanding the Blazor BindTagHelperDescriptorProvider() where I believe this code is being generated I think by the GetElementBindData().

As far as I can tell all that is needed for radio support is the addition of one line to BindAttributes.cs of

    [BindInputElement("radio", null, "checked", "onchange")]

to get the appropriate element of a radio button to get the value of the binding.

[MarkStega]

@SteveSandersonMS
Adding the [BindInputElement(...)] to BindAttributes.cs does indeed make the code adding the attributes the same for a checkbox or a radio button. However, that isn't enough. So I have some more spelunking of the Blazor project to do (And I was hoping for the simplest one line PR ever )

[MarkStega]

@SteveSandersonMS
The exploration continues. I added code to EventForDotNet.ts in FromDOMEvent() of

      case 'change': {
        const targetIsCheckbox = isCheckbox(element);
        const targetIsRadio = isRadio(element);
        const newValue = (targetIsCheckbox || targetIsRadio) ? !!element['checked'] : element['value'];
        return new EventForDotNet<UIChangeEventArgs>('change', { type: event.type, value: newValue });
      }

function isRadio(element: Element | null) {
  return element && element.tagName === 'INPUT' && element.getAttribute('type') === 'radio';
}

I see the first assignment of the radio button in the property but not subsequent changes. I guess this means I need to figure out the caller of FromDOMEvent()

[julienGrd]

Hello, what the current situation on this subject

I was using this kind of code until now, was worked in preview 3/4, but today i see it not work on preview 5, the checked is not render correctly, but the on change still working

<label class="form-check-label">
                      <input class="form-check-input" type="radio" name="rbSelectChildren" checked="@(Model.ShowAllDossiers == true)" onchange="@(() => Model.ShowAllDossiers = true)" /> 
Tous les dossiers
</label>

<label class="form-check-label">
                      <input class="form-check-input" type="radio" name="rbSelectChildren" checked="@(Model.ShowAllDossiers == false)" onchange="@(() => Model.ShowAllDossiers = false)" />
Uniquement les
</label>

[DanTsion]

Hello, same question to @SteveSandersonMS ...
Do you advance to the issue ?
Thanks

[robertmclaws]

Has this been figured out yet? Preview 9 (and therefore RTM) is eminent.

[SQL-MisterMagoo]

Radio buttons are not hard to work with in Blazor - I have a gist and Blazor Fiddle that demonstrates this here : https://gist.github.com/SQL-MisterMagoo/bc5713fb26bf84bf810d48d1f45c361a

[MarkStega]

Essentially a similar implementation but with an integer backing store:

            <tr>
                <th>
                    Saturday display:
                </th>
                <td align="left">
                    <input type="radio" name="group" checked="@(pGroupCode == 0)" @onchange="@(() => pGroupCode = 0)" /> Group with Friday<br />
                    <input type="radio" name="group" checked="@(pGroupCode == 1)" @onchange="@(() => pGroupCode = 1)" /> Group with Monday<br />
                    <input type="radio" name="group" checked="@(pGroupCode == 2)" @onchange="@(() => pGroupCode = 2)" /> Do not show
                </td>
            </tr>

and the code:

        protected int pGroupCode { get; set; }

[granicz]

In case anyone is interested, here is it for F# and Bolero (which implements a Model-View-Update programming model on top of Blazor): fsbolero/Bolero#75

[javiercn]

We don't have an InputRadio component itself that works with forms.

This is something that could be built, but I suggest filing a separate issue to track it elsewhere instead of here.

[SteveHindmarsh]

Any news on this yet? I can't get Blazor radio buttons to work with enums and the docs example given does not work? https://docs.microsoft.com/en-us/aspnet/core/blazor/forms-validation?view=aspnetcore-3.1

[chucker]

@SteveHindmarsh while binding directly may not work yet, writing a component that generates all the radio buttons from an enum isn't that hard.

[SteveHindmarsh]

Yes the Blazor paradigm makes things blisteringly simple once you start getting familiar however, if I hadn't wasted time with the incorrect documentation I may have now had exactly that. Anyhow it's allowed me to get familiar with EditContext.OnFieldChanged and the EditContext.NotifyFieldChanged event which has allowed me to program a solution. Blazor rocks!