Pomocná rutina značek komponent v ASP.NET Core

Pomocník značky komponenty vykresluje Razor součást v Razor zobrazení Stránky nebo MVC.

Požadavky

Postupujte podle pokynů v části Použití nesměrovatelných komponent na stránkách nebo zobrazeních součástí integrace ASP.NET Core Razor do článku o aplikacích ASP.NET Core.

Pomocná rutina značky komponenty

Pokud chcete vykreslit komponentu ze stránky nebo zobrazení, použijte pomocnou rutinu značky komponenty (<component>značku).

RenderMode nakonfiguruje, jestli komponenta:

• Je předem vytáhlý na stránku.
• Je vykreslen jako statický kód HTML na stránce nebo pokud obsahuje potřebné informace ke spuštění Blazor aplikace z uživatelského agenta.

Blazor WebAssembly Režimy vykreslování aplikací jsou uvedené v následující tabulce.

Režim vykreslení	Popis
WebAssembly	Vykreslí značku aplikace tak Blazor WebAssembly , aby zahrnovala interaktivní komponentu při načítání v prohlížeči. Komponenta není předem vytyčována. Tato možnost usnadňuje vykreslení různých Blazor WebAssembly součástí na různých stránkách.
WebAssemblyPrerendered	Prerenders the component into static HTML and includes a marker for a app for Blazor WebAssembly later use to make the component interactive when loaded in the browser.

Režimy vykreslování se zobrazují v následující tabulce.

Režim vykreslení	Popis
ServerPrerendered	Vykreslí komponentu do statického KÓDU HTML a obsahuje značku pro aplikaci na straně Blazor serveru. Při spuštění uživatelského agenta se tato značka použije ke spuštění Blazor aplikace.
Server	Vykreslí značku pro aplikaci na straně Blazor serveru. Výstup ze komponenty není zahrnutý. Při spuštění uživatelského agenta se tato značka použije ke spuštění Blazor aplikace.
Static	Vykreslí komponentu do statického HTML.

Mezi další charakteristiky patří:

• Je povoleno více pomocných rutin značek součástí, které vykreslují více Razor komponent.
• Po spuštění aplikace nelze dynamicky vykreslit komponenty.
• I když stránky a zobrazení můžou používat komponenty, není naopak pravda. Komponenty nemůžou používat funkce specifické pro zobrazení a stránky, jako jsou částečná zobrazení a oddíly. Pokud chcete použít logiku z částečného zobrazení v komponentě, zohledníte logiku částečného zobrazení do komponenty.
• Vykreslování součástí serveru ze statické stránky HTML se nepodporuje.

Následující pomocník značky komponenty vykreslí EmbeddedCounter komponentu na stránce nebo zobrazení v aplikaci na straně Blazor serveru pomocí ServerPrerendered:

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

...

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

Předchozí příklad předpokládá, že EmbeddedCounter komponenta je ve složce aplikace Components . Zástupný symbol {APP ASSEMBLY} je název sestavení aplikace (například @using BlazorSample.Components).

Pomocná rutina značky komponenty může také předávat parametry komponentám. Zvažte následující ColorfulCheckbox komponentu, která nastavuje barvu a velikost popisku zaškrtávacího políčka.

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;
    }
}

Parametry Size komponenty (int) a Color (string) lze nastavit pomocným pomocníkem značky komponenty:

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

...

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

Předchozí příklad předpokládá, že komponenta ColorfulCheckbox je ve Components složce. Zástupný symbol {APP ASSEMBLY} je název sestavení aplikace (například @using BlazorSample.Components).

Následující kód HTML se vykreslí na stránce nebo zobrazení:

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

Předání řetězce v uvozování vyžaduje explicitní Razor výraz, jak je znázorněno param-Color v předchozím příkladu. Chování Razor analýzy hodnoty string typu se nevztahuje na param-* atribut, protože atribut je object typ.

Podporují se všechny typy parametrů s výjimkou:

• Obecné parametry.
• Parametry, které nejsou serializovatelné.
• Dědičnost v parametrech kolekce
• Parametry, jejichž typ je definován mimo Blazor WebAssembly aplikaci nebo v lazily načteném sestavení.
• Pro příjem delegáta RenderFragment pro podřízený obsah (například param-ChildContent="..."). V tomto scénáři doporučujeme vytvořit komponentu (.razor), která odkazuje na komponentuRazor, kterou chcete vykreslit s podřízeným obsahem, který chcete předat, a poté vyvolat Razor komponentu ze stránky nebo zobrazení pomocí pomocné rutiny značky komponenty.

Typ parametru musí být JSON serializovatelný, což obvykle znamená, že typ musí mít výchozí konstruktor a nastavitelné vlastnosti. Můžete například zadat hodnotu pro Size a Color v předchozím příkladu, protože typy Size a Color jsou primitivní typy (int a string), které jsou podporovány serializátorem JSON.

V následujícím příkladu se do komponenty předá objekt třídy:

MyClass.cs:

public class MyClass
{
    public MyClass()
    {
    }

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

Třída musí mít veřejný konstruktor bez parametrů.

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" />

Předchozí příklad předpokládá, že ParameterComponent komponenta je ve složce aplikace Components . Zástupný symbol {APP ASSEMBLY} je název sestavení aplikace (například @using BlazorSample a @using BlazorSample.Components). MyClass je v oboru názvů aplikace.

Další prostředky

• Zachování pomocné rutiny značky stavu komponenty v ASP.NET Core
• Prerender ASP.NET Core Razor components
• ComponentTagHelper
• Pomocné rutiny značek v ASP.NET Core
• komponenty ASP.NET Core Razor