Come sappiamo, Blazor è dotato di un gran numero di componenti per le form di input, quali InputCheckbox, InputDate, InputSelect, e via discorrendo. Purtroppo tra essi non passa inosservala la mancanza di un radio button, che è però previsto con l'arrivo di .NET 5.0.

Tuttavia, se non vogliamo aspettare questa prossima major release, o se non abbiamo in programma di effettuare il porting della nostra applicazione, abbiamo comunque l'alternativa di creare un componente custom con un'implementazione simile a quella che troveremo in .NET 5.0.

@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;
        }
    }
}

Come si evince dal codice, il componente custom eredita da InputBase, ed è quindi a tutti gli effetti riconosciuto da Blazor come un componente di input. Oltre alle proprietà ereditate dalla classe base abbiamo aggiunto il parametro SelectedValue che permetterà al componente di valorizzare l'attributo value, ed eseguito l'override dei metodi di validazione come ulteriore verifica sulla tipologia di valore assegnato

Saremo così in grado di inserire radio button in pagina utilizzando il nostro nuovo componente e valorizzandone le proprietà esposte come nell'esempio in basso:

<InputRadio name="children" SelectedValue="1" @bind-Value="model.children" />1
<InputRadio name="children" SelectedValue="2" @bind-Value="model.children" />2
<InputRadio name="children" SelectedValue="3" @bind-Value="model.children" />3

Come ultima nota è necessario tenere presente che se lavoriamo a un progetto in cui è abilitato C#8, con la proprietà

<Nullable>enable</Nullable>

occerrerà disabilitare il controllo sui tipi nullabili all'inizio della sezione @code inserendo il seguente snippet di codice:

@code {
    #nullable disable
    ...
}