Con Blazor, rispetto al consolidato ASP.NET MVC, non abbiamo bisogno di librerie o codice javascript per modificare l'interfaccia sulla base degli input utente.
Un controllo che può presentare alcune difficoltà nello styling grafico è tipicamente la textarea: spesso ci troviamo a non sapere come gestire al meglio la grandezza, per visualizzare una porzione adeguata del testo inserito o per non occupare troppo spazio nella pagina.
In Blazor, per impostare la dimensione, potremo utilizare il testo inserito, unitamente ad un valore massimo e minimo attraverso i metodi Math.Min e Math.Max, e implementare questa logica di resize in pochissime righe di codice:
@page "/sample" <textarea id="data" @bind-value="formModel.Text" rows="@this.GetRows" @bind-value:event="oninput"></textarea> @code { private readonly SampleFormModel formModel = new SampleFormModel(); private int minRows = 3; private int maxRows = 20; private int GetRows() { var rowCount = Math.Max(formModel.Text.Split('\n').Length, formModel.Text.Split('\r').Length); return Math.Min(Math.Max(rowCount,minRows),maxRows); } }
Come prima cosa, abbiamo calcolato il numero di righe, in maniera che funzioni con qualsiasi sistema operativo, per poi vincolare il risultato nel range che abbiamo stabilito. Poi abbiamo impostato questo valore in binding con l'attributo rows della textarea. Un dettaglio che è importante riguarda l'impostazione di
@bind-value:event="oninput"
Si tratta di un passaggio necessario, perchè normalmente il binding avviene solo alla perdita del focus, mentre noi vogliamo che si aggiorni a ogni nuovo carattere digitato.
Commenti
Per inserire un commento, devi avere un account.
Fai il login e torna a questa pagina, oppure registrati alla nostra community.
Approfondimenti
Esportare ed analizzare le issue di GitHub con la CLI e GraphQL
Load test di ASP.NET Core con k6
Utilizzare HiLo per ottimizzare le insert in un database con Entity Framework
Supporto ai tipi DateOnly e TimeOnly in Entity Framework Core
Creare gruppi di client per Event Grid MQTT
Usare una container image come runner di GitHub Actions
Ottenere il contenuto di una cartella FTP con la libreria FluentFTP
Generare file per il download da Blazor WebAssembly
Paginare i risultati con QuickGrid in Blazor
Aggiungere interattività lato server in Blazor 8
Gestire undefined e partial nelle reactive forms di Angular
Utilizzare QuickGrid di Blazor con Entity Framework