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
Creare form tipizzati con Angular
Reactive form tipizzati con FormBuilder in Angular
Eseguire query verso tipi non mappati in Entity Framework Core
Modificare i metadati nell'head dell'HTML di una Blazor Web App
Ottimizzare la latenza in Blazor 8 tramite InteractiveAuto render mode
Utilizzare gli snapshot con Azure File shares
Utilizzare domini personalizzati gestiti automaticamente con Azure Container Apps
Applicare il versioning ai nostri endpoint ASP.NET Core Minimal API
Utilizzare la libreria Benchmark.NET per misurare le performance
Generare file PDF da Blazor WebAssembly con iText
Effettuare il binding di date in Blazor
Recuperare un elemento inserito nella cache del browser tramite API JavaScript