componenti ASP.NET core Blazor basato su modelli

Questo articolo illustra in che modo i componenti modelli possono accettare uno o più modelli di interfaccia utente come parametri, che possono quindi essere usati come parte della logica di rendering del componente.

Componenti basati su modelli

I componenti modello sono componenti che ricevono uno o più modelli di interfaccia utente come parametri, che possono essere utilizzati nella logica di rendering del componente. Usando i componenti basati su modelli, è possibile creare componenti di livello superiore più riutilizzabili. Un paio di esempi includono:

• Componente di tabella che consente a un utente di specificare modelli per l'intestazione, le righe e il piè di pagina della tabella.
• Componente elenco che consente a un utente di specificare un modello per il rendering degli elementi in un elenco.

Un componente basato su modelli viene definito specificando uno o più parametri del componente di tipo RenderFragment o RenderFragment<TValue>. Un frammento di rendering rappresenta un segmento dell'interfaccia utente di cui eseguire il rendering. RenderFragment<TValue> accetta un parametro di tipo che può essere specificato quando viene richiamato il frammento di rendering.

Nota

Per altre informazioni su RenderFragment, vedere ASP.NET Componenti di baseRazor.

Spesso, i componenti modello sono tipizzato in modo generico, come illustrato nel componente seguente TableTemplate . Il tipo <T> generico in questo esempio viene usato per eseguire il rendering IReadOnlyList<T> dei valori, che in questo caso è una serie di righe di animali domestici in un componente che visualizza una tabella di animali domestici.

TableTemplate.razor:

@typeparam TItem
@using System.Diagnostics.CodeAnalysis

<table class="table">
    <thead>
        <tr>@TableHeader</tr>
    </thead>
    <tbody>
        @foreach (var item in Items)
        {
            if (RowTemplate is not null)
            {
                <tr>@RowTemplate(item)</tr>
            }
        }
    </tbody>
</table>

@code {
    [Parameter]
    public RenderFragment? TableHeader { get; set; }

    [Parameter]
    public RenderFragment<TItem>? RowTemplate { get; set; }

    [Parameter, AllowNull]
    public IReadOnlyList<TItem> Items { get; set; }
}

Quando si usa un componente basato su modelli, è possibile specificare i parametri del modello usando elementi figlio che corrispondono ai nomi dei parametri. Nell'esempio <TableHeader>...</TableHeader> seguente e <RowTemplate>...<RowTemplate> fornire RenderFragment<TValue> modelli per TableHeader e RowTemplate del TableTemplate componente.

Specificare l'attributo nell'elemento Context componente quando si desidera specificare il nome del parametro di contenuto per il contenuto figlio implicito (senza alcun elemento figlio di wrapping). Nell'esempio seguente l'attributo Context viene visualizzato nell'elemento TableTemplate e si applica a tutti i RenderFragment<TValue> parametri del modello.

Pets1.razor:

@page "/pets-1"

<PageTitle>Pets 1</PageTitle>

<h1>Pets Example 1</h1>

<TableTemplate Items="pets" Context="pet">
    <TableHeader>
        <th>ID</th>
        <th>Name</th>
    </TableHeader>
    <RowTemplate>
        <td>@pet.PetId</td>
        <td>@pet.Name</td>
    </RowTemplate>
</TableTemplate>

@code {
    private List<Pet> pets = new()
    {
        new Pet { PetId = 2, Name = "Mr. Bigglesworth" },
        new Pet { PetId = 4, Name = "Salem Saberhagen" },
        new Pet { PetId = 7, Name = "K-9" }
    };

    private class Pet
    {
        public int PetId { get; set; }
        public string? Name { get; set; }
    }
}

In alternativa, è possibile modificare il nome del parametro usando l'attributo nell'elemento ContextRenderFragment<TValue> figlio. Nell'esempio seguente l'oggetto Context è impostato su RowTemplate anziché TableTemplatesu :

Pets2.razor:

@page "/pets-2"

<PageTitle>Pets 2</PageTitle>

<h1>Pets Example 2</h1>

<TableTemplate Items="pets">
    <TableHeader>
        <th>ID</th>
        <th>Name</th>
    </TableHeader>
    <RowTemplate Context="pet">
        <td>@pet.PetId</td>
        <td>@pet.Name</td>
    </RowTemplate>
</TableTemplate>

@code {
    private List<Pet> pets = new()
    {
        new Pet { PetId = 2, Name = "Mr. Bigglesworth" },
        new Pet { PetId = 4, Name = "Salem Saberhagen" },
        new Pet { PetId = 7, Name = "K-9" }
    };

    private class Pet
    {
        public int PetId { get; set; }
        public string? Name { get; set; }
    }
}

Gli argomenti del componente di tipo RenderFragment<TValue> hanno un parametro implicito denominato context, che può essere usato. Nell'esempio Context seguente non è impostato. @context.{PROPERTY} fornisce valori per animali domestici al modello, dove {PROPERTY} è una Pet proprietà:

Pets3.razor:

@page "/pets-3"

<PageTitle>Pets 3</PageTitle>

<h1>Pets Example 3</h1>

<TableTemplate Items="pets">
    <TableHeader>
        <th>ID</th>
        <th>Name</th>
    </TableHeader>
    <RowTemplate>
        <td>@context.PetId</td>
        <td>@context.Name</td>
    </RowTemplate>
</TableTemplate>

@code {
    private List<Pet> pets = new()
    {
        new Pet { PetId = 2, Name = "Mr. Bigglesworth" },
        new Pet { PetId = 4, Name = "Salem Saberhagen" },
        new Pet { PetId = 7, Name = "K-9" }
    };

    private class Pet
    {
        public int PetId { get; set; }
        public string? Name { get; set; }
    }
}

Quando si usano componenti tipizzato generico, il parametro di tipo viene dedotto, se possibile. Tuttavia, è possibile specificare in modo esplicito il tipo con un attributo con un nome corrispondente al parametro di tipo , che si trova TItem nell'esempio precedente:

Pets4.razor:

@page "/pets-4"

<PageTitle>Pets 4</PageTitle>

<h1>Pets Example 4</h1>

<TableTemplate Items="pets" TItem="Pet">
    <TableHeader>
        <th>ID</th>
        <th>Name</th>
    </TableHeader>
    <RowTemplate>
        <td>@context.PetId</td>
        <td>@context.Name</td>
    </RowTemplate>
</TableTemplate>

@code {
    private List<Pet> pets = new()
    {
        new Pet { PetId = 2, Name = "Mr. Bigglesworth" },
        new Pet { PetId = 4, Name = "Salem Saberhagen" },
        new Pet { PetId = 7, Name = "K-9" }
    };

    private class Pet
    {
        public int PetId { get; set; }
        public string? Name { get; set; }
    }
}

Risorse aggiuntive

• procedure consigliate per le prestazioni principali Blazor di ASP.NET
• Blazorrepository GitHub di esempi () (dotnet/blazor-samplescome scaricare)