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
Utilizzare ChatGPT con Azure OpenAI
Sfruttare i KeyedService in un'applicazione Blazor in .NET 8
Definire lo stile CSS in base alle dimensioni del container
Autenticarsi in modo sicuro su Azure tramite GitHub Actions
Usare le variabili per personalizzare gli stili CSS
Visualizzare le change sul plan di Terraform tramite le GitHub Actions
Gestire i null nelle reactive form tipizzate di Angular
Creazione di plugin per Tailwind CSS: espandere le funzionalità del framework dinamicamente
Effettuare il deploy di immagini solo da container registry approvati in Kubernetes
Creare gruppi di client per Event Grid MQTT
Modificare i metadati nell'head dell'HTML di una Blazor Web App
Usare Refit e Polly in Blazor per creare client affidabili e fortemente tipizzati