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.