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
Eseguire chiamate hedging gRPC con ASP.NET Core 6
Usare il throttling per limitare la frequenza degli eventi in Blazor
Estensione del markdown in GitHub
Caricare immagini a differenti risoluzioni in HTML con srcset
Gestire le dipendenze dei nostri pacchetti NuGet in Visual Studio 2019
Divertissement con il jwt token
Utilizzare il Service Bus Explorer integrato del portale Azure
Integrare dive nelle pipeline di Azure DevOps e GitHub
Compilare automaticamente applicazioni .NET 6 con le pipeline di Azure DevOps e GitHub Action
Esecuzione a matrici nelle pipeline YAML di Azure DevOps
Effettuare una chiamata HTTP in Angular usando le promise e RxJs 7
Creare Azure Function con supporto a OpenAPI
I più letti di oggi
- Usare il throttling per limitare la frequenza degli eventi in Blazor
- devConf 2022 - Online
- Utilizzare la parola chiave var con lambda expression e method group in C# 10
- ecco tutte le novità pubblicate sui nostri siti questa settimana: https://aspit.co/wkly buon week-end!
- Chiamare direttamente un numero di telefono con HTML5