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
Routing statico e PreRendering in una Blazor Web App
Creare alias per tipi generici e tuple in C#
Sfruttare i KeyedService in un'applicazione Blazor in .NET 8
Configurare il nome della run di un workflow di GitHub in base al contesto di esecuzione
Autenticarsi in modo sicuro su Azure tramite GitHub Actions
Filtering sulle colonne in una QuickGrid di Blazor
Sviluppare un'interfaccia utente in React con Tailwind CSS e Preline UI
Eseguire operazioni sui blob con Azure Storage Actions
Utilizzare un service principal per accedere a Azure Container Registry
Hosting di componenti WebAssembly in un'applicazione Blazor static
Eseguire query per recuperare il padre di un record che sfrutta il tipo HierarchyID in Entity Framework
Supportare il sorting di dati tabellari in Blazor con QuickGrid
I più letti di oggi
- anche domani dalle 17:30 seguite con noi live #build15 https://aspit.co/build15
- Webcast 'AJAX & ATLAS Overview'
- a #igds il 25 e 26/10 a Milano puoi sviluppare un gioco per #wp8 con @AppCampus. in palio 70.000 Euro: https://aspit.co/apa
- WinJS in Windows Phone 8.1
- la RC di #vs13 è compatibile con #win81 RTM, non con la Preview. l'annuncio ufficiale è su https://aspit.co/any
- Ancora un bug: esce Mono 0.23
- SSL Certificates for everyone on Azure
- Mostrare una MessageBox con un custom control
- disponibile la preview 1 ci #dotnetcore 2.1, #aspnetcore, #efcore. performance, novità e migliorie su https://aspit.co/bmf
- si continua a #netconfit con 'developing modern web apps with #aspnetcore', con il nostro @dbochicchiohttps://aspit.co/netconf-18