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
Navigazione sfruttando i fragments con Angular
Mappare l'ereditarietà di una gerarchia di oggetti usando il TPT in Entity Framework Core 5
Inizializzazione asincrona di un servizio allo startup di un'applicazione Blazor
Utilizzare i Workspace con NPM 7
Utilizzare le JavaScript Resize Observer API per rispondere ai cambiamenti di dimensione di un oggetto HTML
Use Firebase in Progressive Web Apps
Creare un templated component per Blazor
Realizzare animazioni con Blazor Server
Progressive Web Apps with Angular
Taggare automaticamente un team member in work item tramite Azure DevOps
Blazor <3 Javascript
Utilizzare il Nullish Coalescing con TypeScript
I più letti di oggi
- Docker 101
- (My) DevOps story - from failure to success
- Modificare automaticamente la Wiki da una pipeline YAML con Azure DevOps
- DevOps per le applicazioni desktop
- Welcome to Container&DevOps Day!
- ecco tutte le novità pubblicate sui nostri siti questa settimana: https://aspit.co/wkly buon week-end!
- Gestione dei token negli input di testo con la Universal Windows Platform
- Infrastructure as Code: ARM vs Terraform
- Effettuare il redirect da HTTP a HTTPS con la Azure CDN