Uso dei componenti modello

  • 4 minuti

I componenti modello, che possono essere riutilizzati in diverse applicazioni, offrono una base di layout e logica provata e testata, facilitando la personalizzazione degli elementi dell'interfaccia utente. I componenti modello applicano un design standardizzato in un'app Web, definendo elementi comuni e applicandoli coerentemente a tutte le pagine. I modelli possono semplificare gli aggiornamenti, come ad esempio il rebranding, poiché le modifiche necessarie vengono effettuate solamente nella posizione centrale del modello.

In questa unità verranno descritti i componenti modello e come è possibile incorporarli in un'applicazione Blazor.

Tipo RenderFragment

Un componente modello fornisce il layout e la logica per uno o più frammenti di markup HTML. Il rendering HTML viene eseguito usando il contesto fornito dal componente modello. Il componente modello usa un oggetto RenderFragment come segnaposto in cui il markup viene inserito in fase di esecuzione.

Un modello è semplicemente un componente Razor ordinario. Per usare un modello, il componente consumatore fa riferimento al modello come qualsiasi altro componente. Il nome ChildContent è quello predefinito per un parametro RenderFragment. È possibile assegnare al parametro un nome diverso, ma è necessario specificare questo nome quando la pagina di test applica il modello.

Parametri RenderFragment<T> generici

Per impostazione predefinita, la RenderFragment classe funge da segnaposto per un blocco di markup HTML. Tuttavia, è possibile usare il tipo generico RenderFragment<TValue> per eseguire il rendering di altri tipi di contenuto, usando un parametro di tipo e fornendo la logica per gestire il tipo specificato nel componente modello.

Si supponga, ad esempio, di voler creare un modello che visualizza gli elementi in una raccolta. È possibile usare un ciclo foreach di C# per scorrere la raccolta e visualizzare gli elementi trovati. Tuttavia, la raccolta potrebbe contenere dati di qualsiasi tipo, quindi occorre un modo generico per eseguire il rendering di ogni elemento.

Per scrivere un componente modello di tipo generico, è necessario specificare il parametro di tipo nel componente modello stesso e nel componente consumatore del modello. L'elenco seguente rappresenta le caratteristiche comuni dei componenti del modello di tipo generico.

  • Il parametro di tipo in un componente modello viene introdotto usando la direttiva @typeparam. Se necessario, un componente modello può avere più parametri di tipo.
  • Il modello definisce un parametro che contiene una raccolta enumerabile di oggetti del tipo specificato dal parametro di tipo.
  • Il modello definisce anche un ChildContent parametro basato sul tipo generico RenderFragment che accetta lo stesso parametro di tipo.

Componenti basati su modelli di ASP.NET Core Blazor.

Verificare le conoscenze

1.

Quale tipo di oggetto parametro è necessario configurare in un componente Blazor al fine di condividere un frammento di HTML?

2.

Qual è il nome del parametro che acquisisce tutto il markup all'interno di un componente senza richiedere la creazione di un altro tag?