Pomocnik tagów składników w ASP.NET Core

Pomocnik tagów składników renderuje Razor składnik na Razor stronie stron lub widoku MVC.

Wymagania wstępne

Postępuj zgodnie ze wskazówkami w sekcji Use non-routable components in pages or views (Używanie składników niezwiązanych z routingem na stronach lub widokach) artykułu Integrate ASP.NET Core components into ASP.NET Core apps (Integrowanie składników platformy ASP.NET Core Razor w aplikacjach platformy ASP.NET Core).

Pomocnik tagów składnika

Aby renderować składnik ze strony lub widoku, użyj pomocnika tagu składnika (<component>tag).

RenderMode konfiguruje, czy składnik:

• Jest wstępnie załadowany do strony.
• Jest renderowany jako statyczny kod HTML na stronie lub jeśli zawiera informacje niezbędne do uruchomienia Blazor aplikacji z agenta użytkownika.

Blazor WebAssembly Tryby renderowania aplikacji są wyświetlane w poniższej tabeli.

Tryb renderowania	opis
WebAssembly	Renderuje znacznik aplikacji Blazor WebAssembly do użycia w celu uwzględnienia składnika interaktywnego podczas ładowania w przeglądarce. Składnik nie jest wstępnie zainstalowany. Ta opcja ułatwia renderowanie różnych Blazor WebAssembly składników na różnych stronach.
WebAssemblyPrerendered	Prerenders składnik do statycznego kodu HTML i zawiera znacznik dla Blazor WebAssembly aplikacji do późniejszego użycia, aby składnik był interaktywny podczas ładowania w przeglądarce.

Tryby renderowania przedstawiono w poniższej tabeli.

Tryb renderowania	opis
ServerPrerendered	Renderuje składnik do statycznego kodu HTML i zawiera znacznik aplikacji po stronie Blazor serwera. Po uruchomieniu agenta użytkownika ten znacznik jest używany do uruchamiania Blazor aplikacji.
Server	Renderuje znacznik dla aplikacji po stronie Blazor serwera. Dane wyjściowe ze składnika nie są uwzględniane. Po uruchomieniu agenta użytkownika ten znacznik jest używany do uruchamiania Blazor aplikacji.
Static	Renderuje składnik do statycznego kodu HTML.

Dodatkowe cechy obejmują:

• Wiele pomocników tagów składników renderujących wiele Razor składników jest dozwolonych.
• Składniki nie mogą być renderowane dynamicznie po uruchomieniu aplikacji.
• Chociaż strony i widoki mogą używać składników, odwrotnie nie jest prawdziwe. Składniki nie mogą używać funkcji specyficznych dla widoku i strony, takich jak widoki częściowe i sekcje. Aby użyć logiki z widoku częściowego w składniku, należy uwzględnić logikę widoku częściowego w składniku.
• Renderowanie składników serwera ze statycznej strony HTML nie jest obsługiwane.

Następujący pomocnik tagów składników renderuje EmbeddedCounter składnik na stronie lub widoku w aplikacji po stronie Blazor serwera za pomocą polecenia ServerPrerendered:

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

...

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

W poprzednim przykładzie przyjęto założenie, że EmbeddedCounter składnik znajduje się w folderze aplikacji Components . Symbol zastępczy {APP ASSEMBLY} to nazwa zestawu aplikacji (na przykład @using BlazorSample.Components).

Pomocnik tagów składników może również przekazywać parametry do składników. Rozważmy następujący ColorfulCheckbox składnik, który ustawia kolor i rozmiar etykiety pola wyboru.

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 składnika (int) i Color (string) można ustawić za pomocą pomocnika tagów składników:

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

...

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

W poprzednim przykładzie przyjęto założenie, że ColorfulCheckbox składnik znajduje się w folderze Components . Symbol zastępczy {APP ASSEMBLY} to nazwa zestawu aplikacji (na przykład @using BlazorSample.Components).

Poniższy kod HTML jest renderowany na stronie lub w widoku:

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

Przekazywanie cytowanego ciągu wymaga wyrażenia jawnegoRazor, jak pokazano param-Color w poprzednim przykładzie. Razor Zachowanie string analizowania wartości typu nie ma zastosowania do param-* atrybutu, ponieważ atrybut jest typemobject.

Obsługiwane są wszystkie typy parametrów, z wyjątkiem:

• Parametry ogólne.
• Parametry nies serializowalne.
• Dziedziczenie w parametrach kolekcji.
• Parametry, których typ jest zdefiniowany poza aplikacją Blazor WebAssembly lub w zestawie ładowanym z opóźnieniem.
• W przypadku odbierania delegata dla zawartości podrzędnejRenderFragment(na przykład param-ChildContent="..."). W tym scenariuszu zalecamy utworzenie Razor składnika (.razor), który odwołuje się do składnika, który ma być renderowany przy użyciu zawartości podrzędnej, którą chcesz przekazać, a następnie wywołania Razor składnika ze strony lub widoku za pomocą pomocnika tagów składników.

Typ parametru musi mieć JSwartość ON serializable, co zwykle oznacza, że typ musi mieć domyślny konstruktor i właściwości ustawialne. Na przykład można określić wartość dla Size i Color w poprzednim przykładzie, ponieważ typy i Color są typami Size pierwotnymi (int i string), które są obsługiwane przez JSserializator ON.

W poniższym przykładzie obiekt klasy jest przekazywany do składnika:

MyClass.cs:

public class MyClass
{
    public MyClass()
    {
    }

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

Klasa musi mieć publiczny konstruktor bez parametrów.

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

W poprzednim przykładzie przyjęto założenie, że ParameterComponent składnik znajduje się w folderze aplikacji Components . Symbol zastępczy {APP ASSEMBLY} to nazwa zestawu aplikacji (na przykład @using BlazorSample i @using BlazorSample.Components). MyClass znajduje się w przestrzeni nazw aplikacji.

Dodatkowe zasoby

• Utrwalanie pomocnika tagu stanu składnika w ASP.NET Core
• Składniki prerender ASP.NET Core Razor
• ComponentTagHelper
• Pomocnicy tagów na platformie ASP.NET Core
• składniki ASP.NET Core Razor