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
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 ... }
Commenti
Per inserire un commento, devi avere un account.
Fai il login e torna a questa pagina, oppure registrati alla nostra community.
Approfondimenti
Utilizzare il metodo CountBy di LINQ per semplificare raggruppamenti e i conteggi
Collegare applicazioni server e client con .NET Aspire
Utilizzare Hybrid Cache in .NET 9
Generare velocemente pagine CRUD in Blazor con QuickGrid
Eseguire una ricerca avanzata per recuperare le issue di GitHub
Configurare lo startup di applicazioni server e client con .NET Aspire
Managed deployment strategy in Azure DevOps
Gestione file Javascript in Blazor con .NET 9
Integrare un servizio esterno con .NET Aspire
Gestire i dati con Azure Cosmos DB Data Explorer
Gestione CSS in Blazor con .NET 9
Ordine e importanza per @layer in CSS