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

Návod

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 značení 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 svůj vlastní stavový mechanismus a logiku 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 napsána pomocí běžného HTML značení s přidanou dynamickou logikou pomocí 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:

• Namespace
• 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á zahrnout do rozsahu.	@using MyComponentNamespace	Přidat obor 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á zpracovatele události pro zadanou událost.	<button @onclick="IncrementCount">Click me!</button>
@key	Určuje klíč, který má použít algoritmus porovnávání 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	Web Forms	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ý.

Pro úplný přehled syntaxe Razor se podívejte na Referenční příručka pro syntaxi Razor v ASP.NET Core.

Použijte součásti

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í. Chcete-li přenést obor názvů komponenty do zorného pole, 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 rozsahu, můžete zadat komponentu pomocí jejího plného názvu typu, stejně jako 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. Přesto může být užitečné mít název stránky, který se mění 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 několik komponentů na konkrétní stránce obsahuje značku <PageTitle>, zobrazí se pouze poslední komponenta (protože každá přepíše tu předchozí).

Parametry komponent

Ve formulářích ASP.NET Web Forms můžete použít veřejné vlastnosti k předávání parametrů a dat do ovládacích prvků. 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 Name nezadáte vlastní[SupplyParameterFromQuery], 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é procedury událostí

Webové formuláře ASP.NET i Blazor poskytují programovací model založený na událostech pro zpracování událostí. 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. Například můžete reagovat na kliknutí na tlačítko takto:

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

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

Obslužné rutiny událostí mohou přijmout volitelný argument specifický pro událost, který poskytuje další informace o této 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 uzavřít další hodnoty v aktuálním dosahu.

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

Obslužné rutiny událostí se mohou 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 vykreslí znovu po dokončení asynchronní operaceTask. Tento režim asynchronního spouštění poskytuje příležitost vykreslit vhodné uživatelské rozhraní, zatímco je tato asynchronní operace 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>. Funkce callback podporují všechny varianty obslužných rutin událostí v UI pro DOM: volitelné argumenty, synchronní nebo asynchronní, skupiny metod nebo lambda výrazy.

<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ězit 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 svoji metodu StateHasChanged k události AppState.OnChange, aby se komponenta vykreslovala pokaždé, když je zpráva aktualizována.

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 Init, Load a UnLoad události životního cyklu:

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

OnInitialized a OnInitializedAsync metody se používají k inicializaci komponenty. 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á události Page_Load na stránkách a ovládacích prvcích webových formulářů ASP.NET.

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

OnParametersSet

Metody OnParametersSet a OnParametersSetAsync se volají, když komponenta obdrží parametry od své nadřazené komponenty a hodnoty 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 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á. Interakce s DOM a spuštěním JavaScriptu mohou proběhnout bezpečně.

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

OnAfterRender a OnAfterRenderAsyncnejsou volány při předběžném vykreslování na serveru.

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

IDisposable

Komponenty Razor mohou implementovat IDisposable pro uvolnění prostředků, když je komponenta odstraněna z UI. 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 Blazor je také možné uchopit a manipulovat s odkazem na komponentu, i když je to 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. Můžete pak volat metody 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í referencí na prvky

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. Odkazy na zachycené prvky v Blazor jsou neprůhledné. Používají se ale k předání konkrétního odkazu na prvek ve volání interop JavaScriptu. Další informace o interoperabilitě JavaScriptu najdete v ASP.NET Core Blazor interoperabilita JavaScriptu.

Šablonové komponenty

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 Razor značek, který přebírá parametr, jenž lze specifikovat, když je render fragment vykreslen.

Obsah dílčí úrovně

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 obsah pro podřízenou komponentu pomocí běžné 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 RenderFragment<T> lze zadat při jeho volá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>

Kód na pozadí

Komponenta Razor se obvykle vytváří v jediném souboru .razor. Kód a značky je ale také možné oddělit pomocí souboru kódu za kódem. Pokud chcete použít soubor kódu na pozadí, přidejte soubor C#, který odpovídá názvu souboru komponenty, ale s přidanou příponou .cs (Counter.razor.cs).

Upřednostňovaným přístupem je deklarovat třídu kódu na pozadí jako třídu partial se stejným názvem jako komponenta. Vzhledem k tomu, že soubor komponenty Razor již generuje částečnou třídu se stejným názvem, obě části se sloučí v době kompilace a nepotřebujete direktivu @inherits .

Counter.razor

<h1>Counter</h1>

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

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

Counter.razor.cs

public partial class Counter
{
    private int currentCount = 0;

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

S přístupem k částečné třídě nemusí být členové protected. private členy jsou přístupné, protože obě části částečné třídy jsou zkompilovány do stejné třídy.

Případně můžete použít základní třídu. Definujte základní třídu, která je odvozena od ComponentBase, a pak přidejte direktivu @inherits v souboru komponenty Razor k určení základní třídy. Je běžné pojmenovat základní třídu podle komponenty s příponou Base (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ů v základní třídě musí být protected nebo public, aby byla viditelná pro třídu komponenty. Při přístupu základní třídy může integrované vývojové prostředí (IDE) také zobrazit komponentu i její základní třídu v seznamech IntelliSense. Použijte přístup s částečnou třídou, abyste se vyhnuli této duplicitě.

Další materiály

Předchozí popis není vyčerpávajícím přehledem 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ší