如何在Blazor中绑定单选按钮？

Question

Radio button binding is not happening in blazor. As per the documentation it is suggested to use InputRadio tag but this tag doesn't work in blazor and shows binding issue. Any suggestions on how to bind a radio button

Answer 1

Of course it is, it is described here: https://docs.microsoft.com/en-us/aspnet/core/blazor/forms-validation?view=aspnetcore-3.1#radio-buttons

@using System.Globalization
@typeparam TValue
@inherits InputBase<TValue>

<input @attributes="AdditionalAttributes" type="radio" value="@SelectedValue" 
       checked="@(SelectedValue.Equals(Value))" @onchange="OnChange" />

@code {
    [Parameter]
    public TValue SelectedValue { get; set; }

    private void OnChange(ChangeEventArgs args)
    {
        CurrentValueAsString = args.Value.ToString();
    }

    protected override bool TryParseValueFromString(string value, 
        out TValue result, out string errorMessage)
    {
        var success = BindConverter.TryConvertTo<TValue>(
            value, CultureInfo.CurrentCulture, out var parsedValue);
        if (success)
        {
            result = parsedValue;
            errorMessage = null;

            return true;
        }
        else
        {
            result = default;
            errorMessage = $"{FieldIdentifier.FieldName} field isn't valid.";

            return false;
        }
    }
}

Usage

@page "/RadioButtonExample"
@using System.ComponentModel.DataAnnotations

<h1>Radio Button Group Test</h1>

<EditForm Model="@model" OnValidSubmit="@HandleValidSubmit">
    <DataAnnotationsValidator />
    <ValidationSummary />

    @for (int i = 1; i <= 5; i++)
    {
        <label>
            <InputRadio name="rate" SelectedValue="i" @bind-Value="model.Rating" />
            @i
        </label>
    }

    <button type="submit">Submit</button>
</EditForm>

<p>You chose: @model.Rating</p>

@code {
    private Model model = new Model();

    private void HandleValidSubmit()
    {
        ...
    }

    public class Model
    {
        [Range(1, 5)]
        public int Rating { get; set; }
    }
}

Answer 2

The below code works for me

<input type="radio" checked="@(User.Gender == Gender.Male)"
    name="Gender" @onchange="@(() => User.Gender = GenderEnum.Male)" />
<label>Male</label>

<input type="radio" checked="@(User.Gender == Gender.Female)"
    name="Gender" @onchange="@(() => User.Gender = GenderEnum.Female)" />
<label>Female</label>

<input type="radio" checked="@(User.Gender == Gender.Other)"
    name="Gender" @onchange="@(() => User.Gender = GenderEnum.Other)" />
<label>Other</label>

We can also have a function called from @onchange like @onchange="@UpdateGender"