Skapa återanvändbara gränssnittskomponenter med Blazor

Dricks

Det här innehållet är ett utdrag ur e-boken, Blazor för ASP NET Web Forms Developers for Azure, tillgängligt på .NET Docs eller som en kostnadsfri nedladdningsbar PDF som kan läsas offline.

Ladda ned PDF

En av de vackra sakerna med ASP.NET Webbformulär är hur det möjliggör inkapsling av återanvändbara delar av användargränssnittskod (UI) i återanvändbara användargränssnittskontroller. Anpassade användarkontroller kan definieras i markering med hjälp av .ascx-filer . Du kan också skapa avancerade serverkontroller i kod med fullständigt designerstöd.

Blazor stöder även inkapsling av användargränssnittet via komponenter. En komponent:

• Är en fristående del av användargränssnittet.
• Upprätthåller sitt eget tillstånd och sin egen renderingslogik.
• Kan definiera UI-händelsehanterare, binda till indata och hantera sin egen livscykel.
• Definieras vanligtvis i en .razor-fil med hjälp av Razor-syntax.

En introduktion till Razor

Razor är ett lättviktsberäkningsspråk baserat på HTML och C#. Med Razor kan du sömlöst övergå mellan markerings- och C#-kod för att definiera din komponentrenderingslogik. När .razor-filen kompileras avbildas återgivningslogik på ett strukturerat sätt i en .NET-klass. Namnet på den kompilerade klassen hämtas från .razor-filnamnet . Namnområdet hämtas från standardnamnområdet för projektet och mappsökvägen, eller så kan du uttryckligen ange namnområdet med hjälp av @namespace direktivet (mer om Razor-direktiven nedan).

En komponents renderingslogik skapas med normal HTML-kod med dynamisk logik som läggs till med C#. Tecknet @ används för att övergå till C#. Razor är vanligtvis smart när du tar reda på när du har växlat tillbaka till HTML. Följande komponent renderar till exempel en <p> tagg med aktuell tid:

<p>@DateTime.Now</p>

Om du uttryckligen vill ange början och slutet av ett C#-uttryck använder du parenteser:

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

Razor gör det också enkelt att använda C#-kontrollflödet i renderingslogik. Du kan till exempel villkorligt återge viss HTML så här:

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

Eller så kan du generera en lista med objekt med hjälp av en vanlig C#- foreach loop så här:

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

Razor-direktiv, som direktiv i ASP.NET Web Forms, styr många aspekter av hur en Razor-komponent kompileras. Exempel är komponentens:

• Namnområde
• Basklass
• Implementerade gränssnitt
• Allmänna parametrar
• Importerade namnområden
• Vägar

Razor-direktiv börjar med @ tecknet och används vanligtvis i början av en ny rad i början av filen. Till exempel @namespace definierar direktivet komponentens namnområde:

@namespace MyComponentNamespace

I följande tabell sammanfattas de olika Razor-direktiven som används i Blazor och deras ASP.NET webbformulärsekvivalenter, om de finns.

Direktiv	beskrivning	Exempel	Motsvarande webbformulär
@attribute	Lägger till ett attribut på klassnivå till komponenten	@attribute [Authorize]	Ingen
@code	Lägger till klassmedlemmar i komponenten	@code { ... }	<script runat="server">...</script>
@implements	Implementerar det angivna gränssnittet	@implements IDisposable	Använda bakomliggande kod
@inherits	Ärver från den angivna basklassen	@inherits MyComponentBase	<%@ Control Inherits="MyUserControlBase" %>
@inject	Matar in en tjänst i komponenten	@inject IJSRuntime JS	Ingen
@layout	Anger en layoutkomponent för komponenten	@layout MainLayout	<%@ Page MasterPageFile="~/Site.Master" %>
@namespace	Anger namnområdet för komponenten	@namespace MyNamespace	Ingen
@page	Anger vägen för komponenten	@page "/product/{id}"	<%@ Page %>
@typeparam	Anger en allmän typparameter för komponenten	@typeparam TItem	Använda bakomliggande kod
@using	Anger ett namnområde som ska tas med i omfånget	@using MyComponentNamespace	Lägg till namnområde i web.config

Razor-komponenter använder sig också i stor utsträckning av direktivattribut på element för att styra olika aspekter av hur komponenter kompileras (händelsehantering, databindning, komponent- och elementreferenser osv.). Alla direktivattribut följer en vanlig allmän syntax där värdena inom parentes är valfria:

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

I följande tabell sammanfattas de olika attributen för Razor-direktiv som används i Blazor.

Attribut	beskrivning	Exempel
@attributes	Renderar en ordlista med attribut	<input @attributes="ExtraAttributes" />
@bind	Skapar en dubbelriktad databindning	<input @bind="username" @bind:event="oninput" />
@on{event}	Lägger till en händelsehanterare för den angivna händelsen	<button @onclick="IncrementCount">Click me!</button>
@key	Anger en nyckel som ska användas av algoritmen för att bevara element i en samling	<DetailsEditor @key="person" Details="person.Details" />
@ref	Samlar in en referens till komponenten eller HTML-elementet	<MyDialog @ref="myDialog" />

De olika direktivattribut som används av Blazor (@onclick, @bind, @refoch så vidare) beskrivs i avsnitten nedan och senare kapitel.

Många av syntaxerna som används i .aspx - och .ascx-filer har parallella syntaxer i Razor. Nedan visas en enkel jämförelse av syntaxerna för ASP.NET Web Forms och Razor.

Funktion	Webbformulär	Syntax	Rakkniv	Syntax
Direktiv	<%@ [directive] %>	<%@ Page %>	@[directive]	@page
Kodblock	<% %>	<% int x = 123; %>	@{ }	@{ int x = 123; }
Uttryck (HTML-kodad)	<%: %>	<%:DateTime.Now %>	Underförstådd: @ Explicit: @()	@DateTime.Now @(DateTime.Now)
Kommentarer	<%-- --%>	<%-- Commented --%>	@* *@	@* Commented *@
Databindning	<%# %>	<%# Bind("Name") %>	@bind	<input @bind="username" />

Om du vill lägga till medlemmar i Razor-komponentklassen använder du @code direktivet. Den här tekniken liknar att använda ett <script runat="server">...</script> block i en ASP.NET webbformulär användarkontroll eller sida.

@code {
    int count = 0;

    void IncrementCount()
    {
        count++;
    }
}

Eftersom Razor är baserat på C# måste det kompileras från ett C#-projekt (.csproj). Du kan inte kompilera .razor-filer från ett Visual Basic-projekt (.vbproj). Du kan fortfarande referera till Visual Basic-projekt från projektet Blazor . Det motsatta är också sant.

En fullständig Razor-syntaxreferens finns i Razor-syntaxreferens för ASP.NET Core.

Använda komponenter

Förutom vanlig HTML kan komponenter också använda andra komponenter som en del av sin renderingslogik. Syntaxen för att använda en komponent i Razor liknar att använda en användarkontroll i en ASP.NET Web Forms-app. Komponenter anges med hjälp av en elementtagg som matchar komponentens typnamn. Du kan till exempel lägga till en Counter komponent som den här:

<Counter />

Till skillnad från ASP.NET webbformulär, komponenter i Blazor:

• Använd inte ett elementprefix (till exempel asp:).
• Kräv inte registrering på sidan eller i web.config.

Tänk på Razor-komponenter som du skulle göra med .NET-typer, eftersom det är precis vad de är. Om sammansättningen som innehåller komponenten refereras är komponenten tillgänglig för användning. Om du vill ta komponentens namnområde till omfånget @using tillämpar du direktivet:

@using MyComponentLib

<Counter />

Som du ser i standardprojekten Blazor är det vanligt att placera @using direktiv i en _Imports.razor-fil så att de importeras till alla .razor-filer i samma katalog och i underordnade kataloger.

Om namnområdet för en komponent inte finns i omfånget kan du ange en komponent med dess fullständiga typnamn, som du kan i C#:

<MyComponentLib.Counter />

Ändra sidrubrik från komponenter

När du skapar SPA-appar är det vanligt att delar av en sida läses in igen utan att hela sidan läses in igen. Trots detta kan det vara användbart att ändra sidrubriken baserat på vilken komponent som för närvarande läses in. Detta kan du göra genom att inkludera taggen <PageTitle> på komponentens Razor-sida:

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

Innehållet i det här elementet kan vara dynamiskt, till exempel visar det aktuella antalet meddelanden:

<PageTitle>@MessageCount messages</PageTitle>

Observera att om flera komponenter på en viss sida innehåller <PageTitle> taggar visas endast den sista (eftersom var och en skriver över den föregående).

Komponentparametrar

I ASP.NET webbformulär kan du flöda parametrar och data till kontroller med hjälp av offentliga egenskaper. Dessa egenskaper kan anges i markering med hjälp av attribut eller anges direkt i kod. Razor-komponenter fungerar på ett liknande sätt, även om komponentegenskaperna också måste markeras med attributet [Parameter] som ska betraktas som komponentparametrar.

Följande Counter komponent definierar en komponentparameter med namnet IncrementAmount som kan användas för att ange hur mycket som Counter ska ökas varje gång knappen klickas.

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

Om du vill ange en komponentparameter i Blazoranvänder du ett attribut som du skulle göra i ASP.NET webbformulär:

<Counter IncrementAmount="10" />

Frågesträngsparametrar

Razor-komponenter kan också använda värden från frågesträngen på sidan som de återges på som en parameterkälla. Om du vill aktivera detta lägger du till [SupplyParameterFromQuery] attributet i parametern. Följande parameterdefinition skulle till exempel hämta dess värde från begäran i formuläret ?IncBy=2:

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

Om du inte anger en anpassad Name i [SupplyParameterFromQuery] attributet matchar den som standard egenskapsnamnet (IncrementAmount i det här fallet).

Komponenter och felgränser

Som standard Blazor identifierar appar ohanterade undantag och visar ett felmeddelande längst ned på sidan utan ytterligare information. Om du vill begränsa de delar av appen som påverkas av ett ohanterat fel, till exempel för att begränsa påverkan på en enskild komponent, kan taggen <ErrorBoundary> omslutas av komponentdeklarationer.

Om du till exempel vill skydda mot eventuella undantag som genereras från komponenten Counter deklarerar du det i ett <ErrorBoundary> och anger ett meddelande som ska visas om det finns ett undantag:

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

Om du inte behöver ange anpassat felinnehåll kan du bara omsluta komponenten direkt:

<ErrorBoundary>
  <Counter />
</ErrorBoundary>

Ett standardmeddelande som anger "Ett fel som inträffat" visas om ett ohanterat undantag inträffar i den omslutna komponenten.

Händelsehanterare

Både ASP.NET webbformulär och Blazor tillhandahåller en händelsebaserad programmeringsmodell för hantering av användargränssnittshändelser. Exempel på sådana händelser är knappklickningar och textinmatning. I ASP.NET webbformulär använder du HTML-serverkontroller för att hantera användargränssnittshändelser som exponeras av DOM, eller så kan du hantera händelser som exponeras av webbserverkontroller. Händelserna visas på servern via begäranden efter återaktivering av formulär. Överväg följande knapp för webbformulär, klicka på exempel:

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!");
    }
}

I Blazorkan du registrera hanterare för DOM UI-händelser direkt med hjälp av direktivattribut i formuläret @on{event}. Platshållaren {event} representerar namnet på händelsen. Du kan till exempel lyssna efter knappklick så här:

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

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

Händelsehanterare kan acceptera ett valfritt, händelsespecifikt argument för att ge mer information om händelsen. Till exempel kan mushändelser ta ett MouseEventArgs argument, men det krävs inte.

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

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

I stället för att referera till en metodgrupp för en händelsehanterare kan du använda ett lambda-uttryck. Med ett lambda-uttryck kan du stänga över andra värden i omfånget.

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

Händelsehanterare kan köras synkront eller asynkront. Till exempel körs följande OnClick händelsehanterare asynkront:

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

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

När en händelse har hanterats återges komponenten för att ta hänsyn till eventuella ändringar i komponenttillståndet. Med asynkrona händelsehanterare renderas komponenten omedelbart efter att hanterarens körning har slutförts. Komponenten renderas igen när den asynkrona har slutförts Task . Det här asynkrona körningsläget ger en möjlighet att återge ett lämpligt användargränssnitt medan det asynkrona Task fortfarande pågår.

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

Komponenter kan också definiera sina egna händelser genom att definiera en komponentparameter av typen EventCallback<TValue>. Händelseåteranrop stöder alla varianter av DOM UI-händelsehanterare: valfria argument, synkrona eller asynkrona, metodgrupper eller lambda-uttryck.

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

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

Databindning

Blazor tillhandahåller en enkel mekanism för att binda data från en UI-komponent till komponentens tillstånd. Den här metoden skiljer sig från funktionerna i ASP.NET webbformulär för att binda data från datakällor till användargränssnittskontroller. Vi tar upp hantering av data från olika datakällor i avsnittet Hantera data .

Om du vill skapa en dubbelriktad databindning från en UI-komponent till komponentens tillstånd använder du direktivattributet @bind . I följande exempel är värdet för kryssrutan bundet till fältet isChecked .

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

@code {
    bool isChecked;
}

När komponenten återges anges värdet för kryssrutan till värdet för isChecked fältet. När användaren växlar kryssrutan onchange utlöses händelsen och fältet isChecked anges till det nya värdet. Syntaxen @bind i det här fallet motsvarar följande markering:

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

Om du vill ändra händelsen som används för bindningen använder du attributet @bind:event .

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

@code {
    string text;
}

Komponenter kan också stödja databindning till deras parametrar. För databindning definierar du en händelseåteranropsparameter med samma namn som den bindbara parametern. Suffixet "Ändrad" läggs till i namnet.

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

Om du vill länka en databindning till ett underliggande UI-element anger du värdet och hanterar händelsen direkt på användargränssnittselementet i stället för att använda @bind attributet.

Om du vill binda till en komponentparameter använder du ett @bind-{Parameter} attribut för att ange den parameter som du vill binda till.

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

@code {
    string password;
}

Tillståndsändringar

Om komponentens tillstånd har ändrats utanför en normal UI-händelse eller händelseåteranrop måste komponenten manuellt signalera att den måste återges igen. Om du vill signalera att en komponents tillstånd har ändrats anropar StateHasChanged du -metoden för komponenten.

I exemplet nedan visar en komponent ett meddelande från en AppState tjänst som kan uppdateras av andra delar av appen. Komponenten registrerar sin StateHasChanged metod med AppState.OnChange händelsen så att komponenten återges när meddelandet uppdateras.

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

Komponentlivscykel

Ramverket ASP.NET Web Forms har väldefinierade livscykelmetoder för moduler, sidor och kontroller. Följande kontroll implementerar till exempel händelsehanterare för händelser för Init, Loadoch UnLoad livscykel:

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) { ... }
}

Razor-komponenter har också en väldefinierad livscykel. En komponents livscykel kan användas för att initiera komponenttillstånd och implementera avancerade komponentbeteenden.

BlazorAlla livscykelmetoder för komponenten har både synkrona och asynkrona versioner. Komponentåtergivningen är synkron. Du kan inte köra asynkron logik som en del av komponentåtergivningen. All asynkron logik måste köras som en del av en async livscykelmetod.

OnInitialized

Metoderna OnInitialized och OnInitializedAsync används för att initiera komponenten. En komponent initieras vanligtvis när den först återges. När en komponent har initierats kan den renderas flera gånger innan den tas bort. Metoden OnInitialized liknar Page_Load händelsen i ASP.NET webbsidor och kontroller.

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

OnParametersSet

Metoderna OnParametersSet och OnParametersSetAsync anropas när en komponent har tagit emot parametrar från dess överordnade och värdet tilldelas till egenskaper. Dessa metoder körs efter komponentinitiering och varje gång komponenten återges.

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

OnAfterRender

Metoderna OnAfterRender och OnAfterRenderAsync anropas när en komponent har slutfört renderingen. Element- och komponentreferenser fylls i nu (mer information om dessa begrepp nedan). Interaktivitet med webbläsaren är aktiverat just nu. Interaktioner med DOM- och JavaScript-körningen kan utföras på ett säkert sätt.

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

OnAfterRender och OnAfterRenderAsync anropas inte vid prerendering på servern.

Parametern firstRender är true första gången komponenten återges. Annars är falsedess värde .

IDisposable

Razor-komponenter kan implementeras IDisposable för att ta bort resurser när komponenten tas bort från användargränssnittet. En Razor-komponent kan implementeras IDispose med hjälp @implements av direktivet:

@using System
@implements IDisposable

...

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

Avbilda komponentreferenser

I ASP.NET webbformulär är det vanligt att manipulera en kontrollinstans direkt i kod genom att referera till dess ID. I Blazorgår det också att avbilda och manipulera en referens till en komponent, även om det är mycket mindre vanligt.

Om du vill samla in en komponentreferens i Blazoranvänder du direktivattributet @ref . Värdet för attributet ska matcha namnet på ett inställbart fält med samma typ som den refererade komponenten.

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

@code {
    MyLoginDialog loginDialog = default!;

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

När den överordnade komponenten återges fylls fältet i med den underordnade komponentinstansen. Du kan sedan anropa metoder på eller på annat sätt manipulera komponentinstansen.

Det rekommenderas inte att ändra komponenttillståndet direkt med hjälp av komponentreferenser. Detta förhindrar att komponenten renderas automatiskt vid rätt tidpunkter.

Avbilda elementreferenser

Razor-komponenter kan avbilda referenser till ett element. Till skillnad från HTML-serverkontroller i ASP.NET Webbformulär kan du inte ändra DOM direkt med hjälp av en elementreferens i Blazor. Blazor hanterar de flesta DOM-interaktioner åt dig med hjälp av dess DOM-diffing-algoritm. Insamlade elementreferenser i Blazor är ogenomskinliga. De används dock för att skicka en specifik elementreferens i ett JavaScript-interop-anrop. Mer information om JavaScript-interop finns i ASP.NET Core Blazor JavaScript-interop.

Mallkomponenter

I ASP.NET webbformulär kan du skapa mallade kontroller. Med mallade kontroller kan utvecklaren ange en del av HTML-koden som används för att återge en containerkontroll. Mekaniken för att skapa mallade serverkontroller är komplex, men de möjliggör kraftfulla scenarier för att återge data på ett anpassningsbart sätt för användaren. Exempel på mallade kontroller är Repeater och DataList.

Razor-komponenter kan också mallas genom att definiera komponentparametrar av typen RenderFragment eller RenderFragment<T>. A RenderFragment representerar ett segment av Razor-markering som sedan kan återges av komponenten. A RenderFragment<T> är ett segment av Razor-markering som tar en parameter som kan anges när återgivningsfragmentet återges.

Underordnat innehåll

Razor-komponenter kan avbilda sitt underordnade innehåll som en och återge innehållet som en RenderFragment del av komponentåtergivningen. Om du vill samla in underordnat innehåll definierar du en komponentparameter av typen RenderFragment och namnger den ChildContent.

ChildContentComponent.razor

<h1>Component with child content</h1>

<div>@ChildContent</div>

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

En överordnad komponent kan sedan ange underordnat innehåll med vanlig Razor-syntax.

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

Mallparametrar

En mallad Razor-komponent kan också definiera flera komponentparametrar av typen RenderFragment eller RenderFragment<T>. Parametern för en RenderFragment<T> kan anges när den anropas. Om du vill ange en allmän typparameter för en komponent använder du Razor-direktivet @typeparam .

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

När du använder en mallkomponent kan du ange mallparametrarna med underordnade element som matchar parametrarnas namn. Komponentargument av typen RenderFragment<T> som skickas som element har en implicit parameter med namnet context. Du kan ändra namnet på den här implementeringsparametern med hjälp av Context attributet för det underordnade elementet. Alla generiska typparametrar kan anges med hjälp av ett attribut som matchar namnet på typparametern. Typparametern härleds om möjligt:

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

Utdata för den här komponenten ser ut så här:

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

Kod bakom

En Razor-komponent skapas vanligtvis i en enda .razor-fil . Men det är också möjligt att separera koden och pålägget med hjälp av en kod bakom fil. Om du vill använda en komponentfil lägger du till en C#-fil som matchar filnamnet för komponentfilen men med ett .cs tillägg (Counter.razor.cs). Använd C#-filen för att definiera en basklass för komponenten. Du kan ge basklassen namnet vad du vill, men det är vanligt att ge klassen samma namn som komponentklassen, men med ett Base tillägg tillagt (CounterBase). Den komponentbaserade klassen måste också härledas från ComponentBase. Lägg sedan till @inherits direktivet i Razor-komponentfilen för att ange basklassen för komponenten (@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++;
    }
}

Synligheten för komponentens medlemmar i basklassen måste vara protected eller public vara synlig för komponentklassen.

Ytterligare resurser

Ovanstående är inte en fullständig behandling av alla aspekter av Razor-komponenter. Mer information om hur du skapar och använder ASP.NET Core Razor-komponenter finns i dokumentationen Blazor .

FöregåendeNästa