Helper tag dei componenti in ASP.NET Core

L'helper tag componente esegue il rendering di un Razor componente in una pagina Pages o in una Razor visualizzazione MVC.

Prerequisiti

Seguire le indicazioni riportate nella sezione Usare componenti non instradabili nelle pagine o nelle visualizzazioni dell'articolo Integrare componenti ASP.NET Core Razor in ASP.NET app Core.

Helper tag di componente

Per eseguire il rendering di un componente da una pagina o da una vista, usare l'helper tag del componente (<component> tag).

RenderMode configura se il componente:

• Viene eseguito il pre-riavvio nella pagina.
• Viene eseguito il rendering come HTML statico nella pagina o se include le informazioni necessarie per avviare un'app Blazor dall'agente utente.

Blazor WebAssembly Le modalità di rendering dell'app sono illustrate nella tabella seguente.

Modalità rendering	Descrizione
WebAssembly	Esegue il rendering di un marcatore per un'app Blazor WebAssembly da usare per includere un componente interattivo quando viene caricato nel browser. Il componente non è pre-predefinito. Questa opzione semplifica il rendering di componenti diversi Blazor WebAssembly in pagine diverse.
WebAssemblyPrerendered	Prerendere il componente in HTML statico e include un marcatore per un'app per usarlo Blazor WebAssembly in un secondo momento per rendere interattivo il componente quando viene caricato nel browser.

Le modalità di rendering sono illustrate nella tabella seguente.

Modalità rendering	Descrizione
ServerPrerendered	Esegue il rendering del componente in codice HTML statico e include un marcatore per un'app lato Blazor server. All'avvio dell'agente utente, questo marcatore viene usato per avviare un'app Blazor .
Server	Esegue il rendering di un marcatore per un'app lato Blazor server. L'output del componente non è incluso. All'avvio dell'agente utente, questo marcatore viene usato per avviare un'app Blazor .
Static	Esegue il rendering del componente in codice HTML statico.

Le caratteristiche aggiuntive includono:

• Sono consentiti più helper tag componente che eseguono il rendering di più Razor componenti.
• Il rendering dei componenti non può essere eseguito in modo dinamico dopo l'avvio dell'app.
• Mentre le pagine e le visualizzazioni possono usare componenti, il contrario non è vero. I componenti non possono usare funzionalità specifiche della visualizzazione e della pagina, ad esempio visualizzazioni e sezioni parziali. Per usare la logica da una visualizzazione parziale in un componente, considerare la logica di visualizzazione parziale in un componente.
• Il rendering dei componenti del server da una pagina HTML statica non è supportato.

L'helper tag componente seguente esegue il rendering del EmbeddedCounter componente in una pagina o in una visualizzazione in un'app lato Blazor server con ServerPrerendered:

@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
@using {APP ASSEMBLY}.Components

...

<component type="typeof(EmbeddedCounter)" render-mode="ServerPrerendered" />

L'esempio precedente presuppone che il EmbeddedCounter componente si trova nella cartella dell'app Components . Il segnaposto {APP ASSEMBLY} è il nome dell'assembly dell'app , ad esempio @using BlazorSample.Components.

L'helper tag del componente può anche passare parametri ai componenti. Si consideri il componente seguente ColorfulCheckbox che imposta il colore e le dimensioni dell'etichetta della casella di controllo.

Components/ColorfulCheckbox.razor:

<label style="font-size:@(Size)px;color:@Color">
    <input @bind="Value"
           id="survey" 
           name="blazor" 
           type="checkbox" />
    Enjoying Blazor?
</label>

@code {
    [Parameter]
    public bool Value { get; set; }

    [Parameter]
    public int Size { get; set; } = 8;

    [Parameter]
    public string? Color { get; set; }

    protected override void OnInitialized()
    {
        Size += 10;
    }
}

I Size parametri del componente (int) e Color (string) possono essere impostati dall'helper tag del componente:

@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
@using {APP ASSEMBLY}.Components

...

<component type="typeof(ColorfulCheckbox)" render-mode="ServerPrerendered" 
    param-Size="14" param-Color="@("blue")" />

Nell'esempio precedente si presuppone che il ColorfulCheckbox componente si trova nella Components cartella . Il segnaposto {APP ASSEMBLY} è il nome dell'assembly dell'app , ad esempio @using BlazorSample.Components.

Viene eseguito il rendering del codice HTML seguente nella pagina o nella visualizzazione:

<label style="font-size:24px;color:blue">
    <input id="survey" name="blazor" type="checkbox">
    Enjoying Blazor?
</label>

Il passaggio di una stringa tra virgolette richiede un'espressione esplicitaRazor, come illustrato param-Color nell'esempio precedente. Il Razor comportamento di analisi per un string valore di tipo non si applica a un param-* attributo perché l'attributo è un object tipo.

Sono supportati tutti i tipi di parametri, ad eccezione di:

• Parametri generici.
• Parametri non serializzabili.
• Ereditarietà nei parametri della raccolta.
• Parametri il cui tipo è definito all'esterno dell'app Blazor WebAssembly o all'interno di un assembly con caricamento differimento.
• Per ricevere un delegato per il RenderFragment contenuto figlio, ad esempio param-ChildContent="...". Per questo scenario, è consigliabile creare un Razor componente (.razor) che faccia riferimento al componente di cui si vuole eseguire il rendering con il contenuto figlio da passare e quindi richiamare il Razor componente dalla pagina o dalla visualizzazione con l'helper tag componente.

Il tipo di parametro deve essere JSserializzabile on, il che significa in genere che il tipo deve avere un costruttore predefinito e proprietà impostabili. Ad esempio, è possibile specificare un valore per Size e Color nell'esempio precedente perché i tipi di Size e Color sono tipi primitivi (int e string), supportati dal JSserializzatore ON.

Nell'esempio seguente viene passato un oggetto classe al componente :

MyClass.cs:

public class MyClass
{
    public MyClass()
    {
    }

    public int MyInt { get; set; } = 999;
    public string MyString { get; set; } = "Initial value";
}

La classe deve avere un costruttore pubblico senza parametri.

Components/ParameterComponent.razor:

<h2>ParameterComponent</h2>

<p>Int: @MyObject?.MyInt</p>
<p>String: @MyObject?.MyString</p>

@code
{
    [Parameter]
    public MyClass? MyObject { get; set; }
}

Pages/MyPage.cshtml:

@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
@using {APP ASSEMBLY}
@using {APP ASSEMBLY}.Components

...

@{
    var myObject = new MyClass();
    myObject.MyInt = 7;
    myObject.MyString = "Set by MyPage";
}

<component type="typeof(ParameterComponent)" render-mode="ServerPrerendered" 
    param-MyObject="@myObject" />

L'esempio precedente presuppone che il ParameterComponent componente si trova nella cartella dell'app Components . Il segnaposto {APP ASSEMBLY} è il nome dell'assembly dell'app , ad esempio @using BlazorSample e @using BlazorSample.Components. MyClass è nello spazio dei nomi dell'app.

Risorse aggiuntive

• Persist Component State Tag Helper in ASP.NET Core
• Prerender ASP.NET Componenti di base Razor
• ComponentTagHelper
• Helper tag in ASP.NET Core
• componenti di Razor base ASP.NET