Sestavení opakovaně použitelných komponent uživatelského rozhraní pomocí Blazor

Tip

Tento obsah je výňatek z eBooku pro Blazor vývojáře webových formulářů ASP NET pro Azure, který je k dispozici na webu .NET Docs nebo jako bezplatný soubor PDF ke stažení, který si můžete přečíst offline.

Stáhnout PDF

Jednou z krásných věcí ASP.NET webových formulářů je způsob, jakým umožňuje zapouzdření opakovaně použitelných částí uživatelského rozhraní (UI) do opakovaně použitelných ovládacích prvků uživatelského rozhraní. Vlastní uživatelské ovládací prvky lze definovat v revizích pomocí souborů .ascx . Můžete také vytvářet propracované ovládací prvky serveru v kódu s plnou podporou návrháře.

Blazor také podporuje zapouzdření uživatelského rozhraní prostřednictvím komponent. Komponenta:

• Je samostatný blok uživatelského rozhraní.
• Udržuje vlastní logiku stavu a vykreslování.
• Může definovat obslužné rutiny událostí uživatelského rozhraní, vytvořit vazbu na vstupní data a spravovat vlastní životní cyklus.
• Je obvykle definován v souboru .razor pomocí syntaxe Razor.

Úvod do Razoru

Razor je lehký jazyk šablonování značek založený na HTML a C#. Pomocí Razoru můžete bezproblémově přecházet mezi kódem revizí a kódem jazyka C#, abyste definovali logiku vykreslování komponent. Při kompilaci souboru .razor je logika vykreslování zachycena strukturovaným způsobem ve třídě .NET. Název zkompilované třídy je převzat z názvu souboru .razor . Obor názvů je převzat z výchozího oboru názvů pro projekt a cestu ke složce, nebo můžete explicitně zadat obor názvů pomocí @namespace direktivy (více o direktivách Razor níže).

Logika vykreslování komponenty je authored using normal HTML markup with dynamic logic added using C#. Znak @ se používá k přechodu na C#. Razor je obvykle inteligentní při zjišťování, kdy jste přepnuli zpět na HTML. Například následující komponenta vykreslí <p> značku s aktuálním časem:

<p>@DateTime.Now</p>

Pokud chcete explicitně zadat začátek a konec výrazu jazyka C#, použijte závorky:

<p>@(DateTime.Now)</p>

Razor také usnadňuje použití toku řízení jazyka C# v logice vykreslování. Můžete například podmíněně vykreslit nějaký kód HTML takto:

@if (value % 2 == 0)
{
    <p>The value was even.</p>
}

Nebo můžete vygenerovat seznam položek pomocí normální smyčky jazyka C# foreach , například takto:

<ul>
@foreach (var item in items)
{
    <li>@item.Text</li>
}
</ul>

Direktivy Razor, jako jsou direktivy ASP.NET Web Forms, řídí mnoho aspektů kompilace komponenty Razor. Mezi příklady patří komponenta:

• Obor názvů
• Základní třída
• Implementovaná rozhraní
• Obecné parametry
• Importované obory názvů
• Trasy

Direktivy Razor začínají znakem @ a obvykle se používají na začátku nového řádku na začátku souboru. Například @namespace direktiva definuje obor názvů komponenty:

@namespace MyComponentNamespace

Následující tabulka shrnuje různé direktivy Razor použité v Blazor a jejich ASP.NET ekvivalenty webových formulářů, pokud existují.

Direktiva	Popis	Příklad	Ekvivalent webových formulářů
@attribute	Přidá do komponenty atribut na úrovni třídy.	@attribute [Authorize]	Nic
@code	Přidá členy třídy do komponenty.	@code { ... }	<script runat="server">...</script>
@implements	Implementuje zadané rozhraní.	@implements IDisposable	Použití kódu za
@inherits	Dědí ze zadané základní třídy.	@inherits MyComponentBase	<%@ Control Inherits="MyUserControlBase" %>
@inject	Vloží službu do komponenty.	@inject IJSRuntime JS	Nic
@layout	Určuje komponentu rozložení pro komponentu.	@layout MainLayout	<%@ Page MasterPageFile="~/Site.Master" %>
@namespace	Nastaví obor názvů pro komponentu.	@namespace MyNamespace	Nic
@page	Určuje trasu pro komponentu.	@page "/product/{id}"	<%@ Page %>
@typeparam	Určuje parametr obecného typu pro komponentu.	@typeparam TItem	Použití kódu za
@using	Určuje obor názvů, který se má přenést do oboru.	@using MyComponentNamespace	Přidání oboru názvů ve web.config

Komponenty Razor také výrazně využívají atributy direktiv na elementy k řízení různých aspektů, jak se komponenty zkompilují (zpracování událostí, datová vazba, odkazy na komponenty a tak dále). Všechny atributy direktivy se řídí běžnou obecnou syntaxí, kde jsou hodnoty v závorkách volitelné:

@directive(-suffix(:name))(="value")

Následující tabulka shrnuje různé atributy direktiv Razor použité v Blazor.

Atribut	Popis	Příklad
@attributes	Vykreslí slovník atributů.	<input @attributes="ExtraAttributes" />
@bind	Vytvoří obousměrnou datovou vazbu.	<input @bind="username" @bind:event="oninput" />
@on{event}	Přidá obslužnou rutinu události pro zadanou událost.	<button @onclick="IncrementCount">Click me!</button>
@key	Určuje klíč, který má použít algoritmus rozdílu pro zachování prvků v kolekci.	<DetailsEditor @key="person" Details="person.Details" />
@ref	Zaznamenává odkaz na komponentu nebo element HTML.	<MyDialog @ref="myDialog" />

Různé atributy direktiv používané Blazor (@onclick, @bind, @refa tak dále) jsou popsány v oddílech níže a v pozdějších kapitolách.

Mnoho syntaxí používaných v souborech .aspx a .ascx má v Razoru paralelní syntaxe. Níže je jednoduché porovnání syntaxí pro webové formuláře ASP.NET a Razor.

Funkce	webové formuláře	Syntaxe	Razor	Syntaxe
Direktivy	<%@ [directive] %>	<%@ Page %>	@[directive]	@page
Bloky kódu	<% %>	<% int x = 123; %>	@{ }	@{ int x = 123; }
Výrazy (kódovaný html)	<%: %>	<%:DateTime.Now %>	Implicitní: @ Explicitní: @()	@DateTime.Now @(DateTime.Now)
Komentáře	<%-- --%>	<%-- Commented --%>	@* *@	@* Commented *@
Datová vazba	<%# %>	<%# Bind("Name") %>	@bind	<input @bind="username" />

Chcete-li přidat členy do třídy komponenty Razor, použijte direktivu @code . Tato technika se podobá použití <script runat="server">...</script> bloku v uživatelském ovládacím prvku nebo stránce webového formuláře ASP.NET.

@code {
    int count = 0;

    void IncrementCount()
    {
        count++;
    }
}

Vzhledem k tomu, že Razor je založený na jazyce C#, musí být zkompilován z projektu C# (.csproj). Soubory .razor nelze zkompilovat z projektu jazyka Visual Basic (.vbproj). Stále můžete odkazovat na projekty jazyka Visual Basic z projektu Blazor . Opak je také pravdivý.

Úplný odkaz na syntaxi Razor najdete v tématu Syntaxe Razor Reference pro ASP.NET Core.

Použití součástí

Kromě normálního kódu HTML můžou komponenty jako součást logiky vykreslování používat i jiné komponenty. Syntaxe použití komponenty v Razoru se podobá použití uživatelského ovládacího prvku v aplikaci ASP.NET Web Forms. Komponenty se zadají pomocí značky elementu, která odpovídá názvu typu komponenty. Můžete například přidat komponentu Counter takto:

<Counter />

Na rozdíl od ASP.NET webových formulářů jsou komponenty v Blazor:

• Nepoužívejte předponu elementu (například asp:).
• Nevyžaduje registraci na stránce ani v souboru web.config.

Komponenty Razor si můžete představit jako typy .NET, protože přesně to jsou. Pokud je odkazováno na sestavení obsahující součást, je komponenta k dispozici pro použití. Pokud chcete přenést obor názvů komponenty do oboru názvů, použijte direktivu @using :

@using MyComponentLib

<Counter />

Jak je vidět ve výchozích Blazor projektech, je běžné vložit @using direktivy do souboru _Imports.razor , aby byly importovány do všech souborů .razor ve stejném adresáři a v podřízených adresářích.

Pokud obor názvů pro komponentu není v oboru, můžete zadat komponentu pomocí jejího úplného názvu typu, jak je to možné v jazyce C#:

<MyComponentLib.Counter />

Úprava názvu stránky ze součástí

Při vytváření aplikací ve stylu SPA je běžné, že se části stránky znovu načtou bez opětovného načtení celé stránky. I tak může být užitečné mít název změny stránky na základě toho, která komponenta je aktuálně načtena. Toho lze dosáhnout zahrnutím značky <PageTitle> na stránku Razor Page komponenty:

@page "/"
<PageTitle>Home</PageTitle>

Obsah tohoto prvku může být dynamický, například zobrazující aktuální počet zpráv:

<PageTitle>@MessageCount messages</PageTitle>

Všimněte si, že pokud na konkrétní stránce obsahuje <PageTitle> několik součástí značky, zobrazí se pouze poslední komponenta (protože každý z nich přepíše předchozí).

Parametry komponent

Ve webových formulářích ASP.NET můžete do ovládacích prvků použít veřejné vlastnosti tok parametrů a dat. Tyto vlastnosti lze nastavit v kódu pomocí atributů nebo nastavit přímo v kódu. Komponenty Razor fungují podobným způsobem, i když vlastnosti komponenty musí být také označeny atributem [Parameter] , který má být považován za parametry komponenty.

Následující Counter komponenta definuje parametr komponenty, IncrementAmount který lze použít k určení množství, které Counter se má zvýšit při každém kliknutí na tlačítko.

<h1>Counter</h1>

<p>Current count: @currentCount</p>

<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>

@code {
    int currentCount = 0;

    [Parameter]
    public int IncrementAmount { get; set; } = 1;

    void IncrementCount()
    {
        currentCount+=IncrementAmount;
    }
}

Pokud chcete zadat parametr komponenty, Blazorpoužijte atribut stejně jako ve webových formulářích ASP.NET:

<Counter IncrementAmount="10" />

Parametry řetězce dotazu

Komponenty Razor mohou také využívat hodnoty z řetězce dotazu na stránce, na které se vykreslují jako zdroj parametrů. Pokud to chcete povolit, přidejte [SupplyParameterFromQuery] do parametru atribut. Například následující definice parametru získá její hodnotu z požadavku ve formuláři ?IncBy=2:

[Parameter]
[SupplyParameterFromQuery(Name = "IncBy")]
public int IncrementAmount { get; set; } = 1;

Pokud do atributu [SupplyParameterFromQuery] nezadáte vlastníName, bude ve výchozím nastavení odpovídat názvu vlastnosti (IncrementAmountv tomto případě).

Komponenty a hranice chyb

Ve výchozím nastavení Blazor aplikace rozpozná neošetřené výjimky a v dolní části stránky se zobrazí chybová zpráva bez dalších podrobností. Pokud chcete omezit části aplikace, které jsou ovlivněny neošetřenou chybou, například omezit dopad na jednu komponentu, <ErrorBoundary> může být značka zabalena kolem deklarací komponent.

Chcete-li například chránit před možnými výjimkami vyvolaným ze Counter komponenty, deklarujte ji v rámci <ErrorBoundary> a volitelně zadejte zprávu, která se má zobrazit, pokud existuje výjimka:

<ErrorBoundary>
    <ChildContent>
        <Counter />
    </ChildContent>
    <ErrorContent>
        Oops! The counter isn't working right now; please try again later.
    </ErrorContent>
</ErrorBoundary>

Pokud nepotřebujete zadat vlastní obsah chyby, můžete komponentu zabalit přímo:

<ErrorBoundary>
  <Counter />
</ErrorBoundary>

Pokud v zabalené komponentě dojde k neošetřené výjimce, zobrazí se výchozí zpráva s informacemi o tom, že došlo k chybě.

Obslužné rutiny událostí

Webové formuláře ASP.NET i Blazor poskytují programovací model založený na událostech událostí pro zpracování událostí uživatelského rozhraní. Mezi příklady takových událostí patří kliknutí na tlačítko a textové zadání. Ve webových formulářích ASP.NET používáte ovládací prvky serveru HTML ke zpracování událostí uživatelského rozhraní vystavených modelem DOM nebo můžete zpracovávat události vystavené ovládacími prvky webového serveru. Události se zobrazují na serveru prostřednictvím žádostí po vrácení formuláře. Podívejte se na následující příklad kliknutí na tlačítko Webové formuláře:

Counter.ascx

<asp:Button ID="ClickMeButton" runat="server" Text="Click me!" OnClick="ClickMeButton_Click" />

Counter.ascx.cs

public partial class Counter : System.Web.UI.UserControl
{
    protected void ClickMeButton_Click(object sender, EventArgs e)
    {
        Console.WriteLine("The button was clicked!");
    }
}

V Blazoraplikaci můžete zaregistrovat obslužné rutiny pro události uživatelského rozhraní DOM přímo pomocí atributů direktiv formuláře @on{event}. Zástupný {event} symbol představuje název události. Můžete například naslouchat kliknutím na tlačítko takto:

<button @onclick="OnClick">Click me!</button>

@code {
    void OnClick()
    {
        Console.WriteLine("The button was clicked!");
    }
}

Obslužné rutiny událostí můžou přijmout volitelný argument specifický pro události, který poskytuje další informace o události. Například události myši můžou mít MouseEventArgs argument, ale není to nutné.

<button @onclick="OnClick">Click me!</button>

@code {
    void OnClick(MouseEventArgs e)
    {
        Console.WriteLine($"Mouse clicked at {e.ScreenX}, {e.ScreenY}.");
    }
}

Místo odkazu na skupinu metod pro obslužnou rutinu události můžete použít výraz lambda. Výraz lambda umožňuje zavřít jiné hodnoty v oboru.

@foreach (var buttonLabel in buttonLabels)
{
    <button @onclick="() => Console.WriteLine($"The {buttonLabel} button was clicked!")">@buttonLabel</button>
}

Obslužné rutiny událostí se můžou spouštět synchronně nebo asynchronně. Například následující OnClick obslužná rutina události se spouští asynchronně:

<button @onclick="OnClick">Click me!</button>

@code {
    async Task OnClick()
    {
        var result = await Http.GetAsync("api/values");
    }
}

Po zpracování události se komponenta vykreslí tak, aby zohlednila všechny změny stavu komponenty. Pomocí asynchronních obslužných rutin událostí se komponenta vykreslí okamžitě po dokončení provádění obslužné rutiny. Komponenta se po dokončení asynchronního Task dokončení znovu vykreslí. Tento režim asynchronního spouštění poskytuje příležitost vykreslit některé vhodné uživatelské rozhraní, zatímco asynchronní Task je stále probíhající.

<button @onclick="ShowMessage">Get message</button>

@if (showMessage)
{
    @if (message == null)
    {
        <p><em>Loading...</em></p>
    }
    else
    {
        <p>The message is: @message</p>
    }
}

@code
{
    bool showMessage = false;
    string message;

    public async Task ShowMessage()
    {
        showMessage = true;
        message = await MessageService.GetMessageAsync();
    }
}

Komponenty mohou také definovat vlastní události definováním parametru komponenty typu EventCallback<TValue>. Zpětné volání událostí podporují všechny varianty obslužných rutin událostí UŽIVATELSKÉHO rozhraní MODELU DOM: volitelné argumenty, synchronní nebo asynchronní, skupiny metod nebo výrazy lambda.

<button class="btn btn-primary" @onclick="OnClick">Click me!</button>

@code {
    [Parameter]
    public EventCallback<MouseEventArgs> OnClick { get; set; }
}

Datová vazba

Blazor poskytuje jednoduchý mechanismus pro vazbu dat ze komponenty uživatelského rozhraní ke stavu komponenty. Tento přístup se liší od funkcí ve webových formulářích ASP.NET pro vytváření vazeb dat ze zdrojů dat do ovládacích prvků uživatelského rozhraní. Probereme zpracování dat z různých zdrojů dat v části Práce s daty .

Chcete-li vytvořit obousměrnou datovou vazbu z komponenty uživatelského rozhraní do stavu komponenty, použijte atribut direktivy @bind . V následujícím příkladu je hodnota zaškrtávacího políčka svázaná s polem isChecked .

<input type="checkbox" @bind="isChecked" />

@code {
    bool isChecked;
}

Při vykreslení komponenty je hodnota zaškrtávacího políčka nastavena na hodnotu isChecked pole. Když uživatel toto zaškrtávací políčko přepíná, onchange událost se aktivuje a isChecked pole se nastaví na novou hodnotu. Syntaxe @bind v tomto případě odpovídá následujícímu kódu:

<input value="@isChecked" @onchange="(UIChangeEventArgs e) => isChecked = e.Value" />

Chcete-li změnit událost použitou pro vazbu, použijte @bind:event atribut.

<input @bind="text" @bind:event="oninput" />
<p>@text</p>

@code {
    string text;
}

Komponenty mohou také podporovat datové vazby na jejich parametry. Pokud chcete vytvořit vazbu dat, definujte parametr zpětného volání události se stejným názvem jako parametr bindable. Přípona Změněna se přidá do názvu.

PasswordBox.razor

Password: <input
    value="@Password"
    @oninput="OnPasswordChanged"
    type="@(showPassword ? "text" : "password")" />

<label><input type="checkbox" @bind="showPassword" />Show password</label>

@code {
    private bool showPassword;

    [Parameter]
    public string Password { get; set; }

    [Parameter]
    public EventCallback<string> PasswordChanged { get; set; }

    private Task OnPasswordChanged(ChangeEventArgs e)
    {
        Password = e.Value.ToString();
        return PasswordChanged.InvokeAsync(Password);
    }
}

Pokud chcete zřetězí datovou vazbu na podkladový prvek uživatelského rozhraní, nastavte hodnotu a zpracujte událost přímo na prvku uživatelského rozhraní místo atributu @bind .

Chcete-li vytvořit vazbu k parametru komponenty, použijte @bind-{Parameter} atribut k určení parametru, ke kterému chcete vytvořit vazbu.

<PasswordBox @bind-Password="password" />

@code {
    string password;
}

Změny stavu

Pokud se stav komponenty změnil mimo normální událost uživatelského rozhraní nebo zpětné volání události, musí komponenta ručně signalizovat, že se musí znovu vykreslit. Chcete-li signalizovat, že se změnil stav komponenty, zavolejte StateHasChanged metodu komponenty.

V následujícím příkladu komponenta zobrazí zprávu ze AppState služby, kterou můžou aktualizovat jiné části aplikace. Komponenta zaregistruje svou StateHasChanged metodu AppState.OnChange s událostí, aby se komponenta vykreslovala při každé aktualizaci zprávy.

public class AppState
{
    public string Message { get; }

    // Lets components receive change notifications
    public event Action OnChange;

    public void UpdateMessage(string message)
    {
        Message = message;
        NotifyStateChanged();
    }

    private void NotifyStateChanged() => OnChange?.Invoke();
}

@inject AppState AppState

<p>App message: @AppState.Message</p>

@code {
    protected override void OnInitialized()
    {
        AppState.OnChange += StateHasChanged
    }
}

Životní cyklus komponent

Architektura webových formulářů ASP.NET má dobře definované metody životního cyklu pro moduly, stránky a ovládací prvky. Například následující ovládací prvek implementuje obslužné rutiny událostí pro Initudálosti , Loada UnLoad životní cyklus:

Counter.ascx.cs

public partial class Counter : System.Web.UI.UserControl
{
    protected void Page_Init(object sender, EventArgs e) { ... }
    protected void Page_Load(object sender, EventArgs e) { ... }
    protected void Page_UnLoad(object sender, EventArgs e) { ... }
}

Komponenty Razor mají také dobře definovaný životní cyklus. Životní cyklus komponenty lze použít k inicializaci stavu komponenty a implementaci pokročilého chování komponent.

BlazorVšechny metody životního cyklu komponent mají synchronní i asynchronní verze. Vykreslování komponent je synchronní. Asynchronní logiku nelze spustit jako součást vykreslování komponent. Veškerá asynchronní logika se musí spouštět jako součást async metody životního cyklu.

OnInitialized

OnInitializedAsync K OnInitialized inicializaci komponenty se používají metody a metody. Komponenta se obvykle inicializuje po prvním vykreslení. Po inicializaci komponenty se může vykreslit několikrát, než se nakonec vyhodí. Metoda OnInitialized je podobná Page_Load události v ASP.NET webových formulářů stránky a ovládací prvky.

protected override void OnInitialized() { ... }
protected override async Task OnInitializedAsync() { await ... }

OnParametersSet

Metody OnParametersSet a OnParametersSetAsync metody se volají, když komponenta přijala parametry z nadřazeného objektu a hodnota jsou přiřazeny k vlastnostem. Tyto metody se spustí po inicializaci komponenty a pokaždé, když se komponenta vykreslí.

protected override void OnParametersSet() { ... }
protected override async Task OnParametersSetAsync() { await ... }

OnAfterRender

Metody OnAfterRender a OnAfterRenderAsync metody se volají po dokončení vykreslování komponenty. Odkazy na elementy a komponenty jsou v tomto okamžiku vyplněny (další informace o těchto konceptech najdete níže). Interaktivita s prohlížečem je v tuto chvíli povolená. Můžou proběhnout interakce s doM a javascriptovým spouštěním.

protected override void OnAfterRender(bool firstRender)
{
    if (firstRender)
    {
        ...
    }
}
protected override async Task OnAfterRenderAsync(bool firstRender)
{
    if (firstRender)
    {
        await ...
    }
}

OnAfterRender a OnAfterRenderAsync při předvolání na serveru se nevolá.

Parametr firstRender je true poprvé, kdy se komponenta vykresluje, jinak je falsejejí hodnota .

IDisposable

Komponenty Razor mohou implementovat IDisposable pro odstranění prostředků, když je komponenta odebrána z uživatelského rozhraní. Komponenta Razor může implementovat IDispose pomocí direktivy @implements :

@using System
@implements IDisposable

...

@code {
    public void Dispose()
    {
        ...
    }
}

Zachycení odkazů na komponenty

Ve webových formulářích ASP.NET je běžné manipulovat s instancí ovládacího prvku přímo v kódu pomocí odkazu na jeho ID. V Blazoraplikaci je také možné zachytit a manipulovat s odkazem na komponentu, i když je mnohem méně běžné.

Pokud chcete zachytit odkaz na Blazorsoučást, použijte @ref atribut direktivy. Hodnota atributu by se měla shodovat s názvem pole settable se stejným typem jako odkazovaná komponenta.

<MyLoginDialog @ref="loginDialog" ... />

@code {
    MyLoginDialog loginDialog = default!;

    void OnSomething()
    {
        loginDialog.Show();
    }
}

Při vykreslení nadřazené komponenty se pole naplní instancí podřízené komponenty. Metody pak můžete volat nebo jinak manipulovat s instancí komponenty.

Manipulace se stavem komponenty přímo pomocí odkazů na komponenty se nedoporučuje. Tím zabráníte automatickému vykreslení komponenty ve správných časech.

Zachycení odkazů na elementy

Komponenty Razor mohou zaznamenávat odkazy na prvek. Na rozdíl od ovládacích prvků serveru HTML ve webových formulářích ASP.NET nelze manipulovat s modelem DOM přímo pomocí odkazu na element v Blazor. Blazor zpracovává většinu interakcí DOM za vás pomocí jeho algoritmu diffing DOM. Zachycené odkazy na Blazor elementy jsou neprůhlásné. Používají se ale k předání konkrétního odkazu na prvek ve volání zprostředkovatele komunikace JavaScriptu. Další informace o interoperabilitě JavaScriptu najdete v tématu ASP.NET Základní Blazor spolupráce JavaScriptu.

Komponenty bez vizuálního vzhledu

Ve webových formulářích ASP.NET můžete vytvářet šablonované ovládací prvky. Šablonované ovládací prvky umožňují vývojáři zadat část KÓDU HTML, která se používá k vykreslení ovládacího prvku kontejneru. Mechanismus vytváření ovládacích prvků serveru se šablonami je složitý, ale umožňují výkonné scénáře pro vykreslování dat přizpůsobitelným způsobem uživatele. Příklady šablonovaných ovládacích prvků zahrnují Repeater a DataList.

Komponenty Razor lze také šablonovat definováním parametrů komponenty typu RenderFragment nebo RenderFragment<T>. A RenderFragment představuje blok kódu Razor, který lze poté vykreslit komponentou. A RenderFragment<T> je blok kódu Razor, který přebírá parametr, který lze zadat při vykreslení fragmentu vykreslení.

Podřízený obsah

Komponenty Razor mohou zachytit podřízený obsah jako RenderFragment a vykreslit tento obsah jako součást vykreslování komponent. Chcete-li zachytit podřízený obsah, definujte parametr komponenty typu RenderFragment a pojmenujte ho ChildContent.

ChildContentComponent.razor

<h1>Component with child content</h1>

<div>@ChildContent</div>

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

Nadřazená komponenta pak může poskytnout podřízený obsah pomocí normální syntaxe Razor.

<ChildContentComponent>
    <ChildContent>
        <p>The time is @DateTime.Now</p>
    </ChildContent>
</ChildContentComponent>

Parametry šablony

Šablona Komponenta Razor může také definovat více parametrů komponenty typu RenderFragment nebo RenderFragment<T>. Parametr pro určitý RenderFragment<T> parametr lze zadat při vyvolání. Chcete-li zadat parametr obecného typu pro komponentu, použijte direktivu @typeparam Razor.

SimpleListView.razor

@typeparam TItem

@Heading

<ul>
@foreach (var item in Items)
{
    <li>@ItemTemplate(item)</li>
}
</ul>

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

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

    [Parameter]
    public IEnumerable<TItem> Items { get; set; }
}

Při použití šablonované komponenty lze parametry šablony zadat pomocí podřízených prvků, které odpovídají názvům parametrů. Argumenty komponenty typu RenderFragment<T> předané jako elementy mají implicitní parametr s názvem context. Název tohoto parametru implementace můžete změnit pomocí Context atributu podřízeného elementu. Všechny parametry obecného typu lze zadat pomocí atributu, který odpovídá názvu parametru typu. Pokud je to možné, parametr typu se odvodí:

<SimpleListView Items="messages" TItem="string">
    <Heading>
        <h1>My list</h1>
    </Heading>
    <ItemTemplate Context="message">
        <p>The message is: @message</p>
    </ItemTemplate>
</SimpleListView>

Výstup této komponenty vypadá takto:

<h1>My list</h1>
<ul>
    <li><p>The message is: message1</p></li>
    <li><p>The message is: message2</p></li>
<ul>

Code-behind

Komponenta Razor je obvykle authored in a single .razor file. Kód a značky je ale také možné oddělit pomocí souboru kódu za kódem. Pokud chcete použít soubor součásti, přidejte soubor C#, který odpovídá názvu souboru komponenty, ale s přidanou příponou .cs (Counter.razor.cs). Pomocí souboru jazyka C# definujte základní třídu pro komponentu. Základní třídu můžete pojmenovat cokoli, co byste chtěli, ale je běžné pojmenovat třídu stejně jako třídu komponent, ale s přidanou příponou Base (CounterBase). Třída založená na komponentě musí také odvodit z ComponentBase. Potom v souboru komponenty Razor přidejte direktivu @inherits pro určení základní třídy komponenty (@inherits CounterBase).

Counter.razor

@inherits CounterBase

<h1>Counter</h1>

<p>Current count: @currentCount</p>

<button @onclick="IncrementCount">Click me</button>

Counter.razor.cs

public class CounterBase : ComponentBase
{
    protected int currentCount = 0;

    protected void IncrementCount()
    {
        currentCount++;
    }
}

Viditelnost členů komponenty v základní třídě musí být protected nebo public musí být viditelná pro třídu komponenty.

Další materiály

Předchozí postup není vyčerpávajícím ošetřením všech aspektů součástí Razor. Další informace o tom, jak vytvořit a používat komponenty ASP.NET Core Razor, najdete v Blazor dokumentaci.

PředchozíDalší