Herbruikbare UI-onderdelen bouwen met Blazor

Artikel
06/27/2024

Tip

Deze inhoud is een fragment uit het eBook, Blazor voor ASP NET-webformulierontwikkelaars voor Azure, beschikbaar op .NET Docs of als een gratis downloadbare PDF die offline kan worden gelezen.

PDF downloaden

Een van de mooie dingen over ASP.NET Web Forms is hoe het herbruikbare stukjes gebruikersinterfacecode inkapseling in herbruikbare UI-besturingselementen mogelijk maakt. Aangepaste gebruikersbesturingselementen kunnen worden gedefinieerd in markeringen met behulp van .ascx-bestanden . U kunt ook uitgebreide serverbesturingselementen bouwen in code met volledige ontwerpondersteuning.

Blazor biedt ook ondersteuning voor inkapseling van de gebruikersinterface via onderdelen. Een onderdeel:

Is een zelfstandig segment van de gebruikersinterface.
Onderhoudt zijn eigen status- en renderinglogica.
Kan UI-gebeurtenis-handlers definiëren, binden aan invoergegevens en een eigen levenscyclus beheren.
Wordt meestal gedefinieerd in een RAZOR-bestand met behulp van razor-syntaxis.

Een inleiding tot Razor

Razor is een lichte opmaaktaal op basis van HTML en C#. Met Razor kunt u naadloos schakelen tussen markeringen en C#-code om uw componentrenderingslogica te definiëren. Wanneer het .razor-bestand wordt gecompileerd, wordt de renderinglogica op een gestructureerde manier vastgelegd in een .NET-klasse. De naam van de gecompileerde klasse wordt opgehaald uit de .razor-bestandsnaam . De naamruimte wordt genomen uit de standaardnaamruimte voor het project en het mappad, of u kunt de naamruimte expliciet opgeven met behulp van de @namespace instructie (meer over Razor-instructies hieronder).

De renderinglogica van een onderdeel wordt gemaakt met behulp van normale HTML-markeringen met dynamische logica die is toegevoegd met behulp van C#. Het @ teken wordt gebruikt om over te stappen op C#. Razor is doorgaans slim om erachter te komen wanneer u terug bent geschakeld naar HTML. Met het volgende onderdeel wordt bijvoorbeeld een <p> tag weergegeven met de huidige tijd:

<p>@DateTime.Now</p>

Als u expliciet het begin en einde van een C#-expressie wilt opgeven, gebruikt u haakjes:

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

Razor maakt het ook eenvoudig om de C#-besturingsstroom in uw renderinglogica te gebruiken. U kunt bijvoorbeeld voorwaardelijke HTML als volgt weergeven:

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

U kunt ook een lijst met items genereren met behulp van een normale C# foreach -lus als volgt:

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

Razor-instructies, zoals instructies in ASP.NET Web Forms, bepalen veel aspecten van hoe een Razor-onderdeel wordt gecompileerd. Voorbeelden hiervan zijn de volgende onderdelen:

Naamruimte
Basisklasse
Geïmplementeerde interfaces
Algemene parameters
Geïmporteerde naamruimten
Routes

Razor-instructies beginnen met het @ teken en worden meestal gebruikt aan het begin van een nieuwe regel aan het begin van het bestand. De instructie definieert bijvoorbeeld @namespace de naamruimte van het onderdeel:

@namespace MyComponentNamespace

De volgende tabel bevat een overzicht van de verschillende Razor-instructies die worden gebruikt in Blazor en de bijbehorende ASP.NET Web Forms-equivalenten, indien aanwezig.

Richtlijn	Beschrijving	Voorbeeld	Equivalent van webformulieren
`@attribute`	Voegt een kenmerk op klasseniveau toe aan het onderdeel	`@attribute [Authorize]`	Geen
`@code`	Klasleden toevoegen aan het onderdeel	`@code { ... }`	`<script runat="server">...</script>`
`@implements`	Implementeert de opgegeven interface	`@implements IDisposable`	Code-behind gebruiken
`@inherits`	Neemt over van de opgegeven basisklasse	`@inherits MyComponentBase`	`<%@ Control Inherits="MyUserControlBase" %>`
`@inject`	Een service in het onderdeel injecteert	`@inject IJSRuntime JS`	Geen
`@layout`	Hiermee geeft u een indelingsonderdeel voor het onderdeel	`@layout MainLayout`	`<%@ Page MasterPageFile="~/Site.Master" %>`
`@namespace`	Hiermee stelt u de naamruimte voor het onderdeel in	`@namespace MyNamespace`	Geen
`@page`	Hiermee geeft u de route voor het onderdeel	`@page "/product/{id}"`	`<%@ Page %>`
`@typeparam`	Hiermee geeft u een algemene typeparameter voor het onderdeel	`@typeparam TItem`	Code-behind gebruiken
`@using`	Hiermee geeft u een naamruimte die moet worden opgenomen in het bereik	`@using MyComponentNamespace`	Naamruimte toevoegen in web.config

Razor-onderdelen maken ook uitgebreid gebruik van richtlijnkenmerken op elementen om verschillende aspecten van de manier waarop onderdelen worden gecompileerd te beheren (gebeurtenisafhandeling, gegevensbinding, component & elementverwijzingen, enzovoort). Richtlijnkenmerken volgen allemaal een algemene algemene syntaxis waarbij de waarden tussen haakjes optioneel zijn:

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

De volgende tabel bevat een overzicht van de verschillende kenmerken voor Razor-instructies die worden gebruikt in Blazor.

Kenmerk	Beschrijving	Voorbeeld
`@attributes`	Geeft een woordenlijst met kenmerken weer	`<input @attributes="ExtraAttributes" />`
`@bind`	Hiermee maakt u een tweerichtingsgegevensbinding	`<input @bind="username" @bind:event="oninput" />`
`@on{event}`	Voegt een gebeurtenis-handler toe voor de opgegeven gebeurtenis	`<button @onclick="IncrementCount">Click me!</button>`
`@key`	Hiermee geeft u een sleutel die moet worden gebruikt door het diffing-algoritme voor het behouden van elementen in een verzameling	`<DetailsEditor @key="person" Details="person.Details" />`
`@ref`	Legt een verwijzing vast naar het onderdeel of HTML-element	`<MyDialog @ref="myDialog" />`

De verschillende richtlijnkenmerken die door Blazor (@onclick@bind, , @refenzovoort) worden gebruikt, worden behandeld in de secties hieronder en latere hoofdstukken.

Veel van de syntaxis die wordt gebruikt in .aspx- en ASCX-bestanden hebben parallelle syntaxis in Razor. Hieronder vindt u een eenvoudige vergelijking van de syntaxis voor ASP.NET Web Forms en Razor.

Functie	Webformulieren	Syntaxis	Scheermes	Syntaxis
Richtlijnen	`<%@ [directive] %>`	`<%@ Page %>`	`@[directive]`	`@page`
Codeblokken	`<% %>`	`<% int x = 123; %>`	`@{ }`	`@{ int x = 123; }`
Expressies (HTML-gecodeerd)	`<%: %>`	`<%:DateTime.Now %>`	Impliciet: `@` Uitdrukkelijk: `@()`	`@DateTime.Now` `@(DateTime.Now)`
Opmerkingen	`<%-- --%>`	`<%-- Commented --%>`	`@* *@`	`@* Commented *@`
Gegevensbinding	`<%# %>`	`<%# Bind("Name") %>`	`@bind`	`<input @bind="username" />`

Gebruik de @code instructie om leden toe te voegen aan de Razor-componentklasse. Deze techniek is vergelijkbaar met het gebruik van een <script runat="server">...</script> blok in een ASP.NET Web Forms-gebruikersbeheer of -pagina.

@code {
    int count = 0;

    void IncrementCount()
    {
        count++;
    }
}

Omdat Razor is gebaseerd op C#, moet het worden gecompileerd vanuit een C#-project (.csproj). U kunt .razor-bestanden niet compileren vanuit een Visual Basic-project (.vbproj). U kunt nog steeds verwijzen naar Visual Basic-projecten vanuit uw Blazor project. Het tegenovergestelde is ook waar.

Zie razor-syntaxisreferentie voor ASP.NET Core voor een volledige verwijzing naar Razor-syntaxis.

Onderdelen gebruiken

Naast normale HTML kunnen onderdelen ook andere onderdelen gebruiken als onderdeel van hun renderinglogica. De syntaxis voor het gebruik van een onderdeel in Razor is vergelijkbaar met het gebruik van een gebruikersbesturingselement in een ASP.NET Web Forms-app. Onderdelen worden opgegeven met behulp van een elementtag die overeenkomt met de typenaam van het onderdeel. U kunt bijvoorbeeld een Counter onderdeel als volgt toevoegen:

<Counter />

In tegenstelling tot ASP.NET webformulieren, onderdelen in Blazor:

Gebruik geen elementvoorvoegsel (bijvoorbeeld asp:).
Registratie op de pagina of in de web.config is niet vereist.

Denk aan Razor-onderdelen zoals u .NET-typen wilt, omdat dat precies is wat ze zijn. Als naar de assembly met het onderdeel wordt verwezen, is het onderdeel beschikbaar voor gebruik. Als u de naamruimte van het onderdeel binnen het bereik wilt brengen, past u de @using instructie toe:

@using MyComponentLib

<Counter />

Zoals in de standaardprojecten Blazor wordt gezien, is het gebruikelijk om instructies in een _Imports.razor-bestand te plaatsen@using, zodat ze in alle .razor-bestanden in dezelfde map en in onderliggende mappen worden geïmporteerd.

Als de naamruimte voor een onderdeel niet binnen het bereik valt, kunt u een onderdeel opgeven met de volledige typenaam, zoals u in C# kunt doen:

<MyComponentLib.Counter />

Paginatitel wijzigen van onderdelen

Bij het bouwen van beveiligd-WACHTWOORDVERIFICATIE-apps is het gebruikelijk dat delen van een pagina opnieuw worden geladen zonder de hele pagina opnieuw te laden. Het kan echter handig zijn om de titel van de paginawijziging te hebben op basis van welk onderdeel momenteel is geladen. Dit kan worden bereikt door de tag op te geven op de <PageTitle> Razor-pagina van het onderdeel:

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

De inhoud van dit element kan dynamisch zijn, bijvoorbeeld met het huidige aantal berichten:

<PageTitle>@MessageCount messages</PageTitle>

Houd er rekening mee dat als meerdere onderdelen op een bepaalde pagina tags bevatten <PageTitle> , alleen de laatste worden weergegeven (omdat elk onderdeel de vorige zal overschrijven).

Onderdeelparameters

In ASP.NET Web Forms kunt u parameters en gegevens naar besturingselementen stromen met behulp van openbare eigenschappen. Deze eigenschappen kunnen worden ingesteld in markeringen met behulp van kenmerken of rechtstreeks in code instellen. Razor-onderdelen werken op vergelijkbare wijze, hoewel de onderdeeleigenschappen ook moeten worden gemarkeerd met het [Parameter] kenmerk dat als onderdeelparameters moet worden beschouwd.

Het volgende Counter onderdeel definieert een onderdeelparameter IncrementAmount die kan worden gebruikt om de hoeveelheid op te geven die moet Counter worden verhoogd telkens wanneer op de knop wordt geklikt.

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

Als u een onderdeelparameter Blazorwilt opgeven, gebruikt u een kenmerk zoals in ASP.NET Webformulieren:

<Counter IncrementAmount="10" />

Queryreeksparameters

Razor-onderdelen kunnen ook gebruikmaken van waarden uit de queryreeks van de pagina waarop ze worden weergegeven als parameterbron. Als u dit wilt inschakelen, voegt u het [SupplyParameterFromQuery] kenmerk toe aan de parameter. De volgende parameterdefinitie haalt bijvoorbeeld de waarde van de aanvraag op in het formulier ?IncBy=2:

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

Als u geen aangepast kenmerk Name [SupplyParameterFromQuery] opgeeft, komt deze standaard overeen met de naam van de eigenschap (IncrementAmount in dit geval).

Onderdelen en foutgrenzen

Blazor Standaard worden door apps niet-verwerkte uitzonderingen gedetecteerd en wordt onder aan de pagina een foutbericht weergegeven zonder extra details. Als u de onderdelen van de app wilt beperken die worden beïnvloed door een niet-verwerkte fout, bijvoorbeeld om de impact tot één onderdeel te beperken, kan de <ErrorBoundary> tag worden verpakt rond onderdeeldeclaraties.

Als u bijvoorbeeld wilt beveiligen tegen mogelijke uitzonderingen die zijn gegenereerd door het Counter onderdeel, declareert u het binnen een <ErrorBoundary> en eventueel geeft u een bericht op dat moet worden weergegeven als er een uitzondering is:

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

Als u geen aangepaste foutinhoud hoeft op te geven, kunt u het onderdeel gewoon rechtstreeks verpakken:

<ErrorBoundary>
  <Counter />
</ErrorBoundary>

Er wordt een standaardbericht weergegeven met de tekst 'Er is een fout opgetreden'. Wordt weergegeven als er een niet-verwerkte uitzondering optreedt in het verpakte onderdeel.

Event Handlers

Zowel ASP.NET Web Forms als Blazor een op gebeurtenissen gebaseerd programmeermodel voor het verwerken van UI-gebeurtenissen. Voorbeelden van dergelijke gebeurtenissen zijn klikken op knoppen en tekstinvoer. In ASP.NET webformulieren gebruikt u BESTURINGSelementen voor HTML-servers voor het afhandelen van UI-gebeurtenissen die door de DOM worden weergegeven, of kunt u gebeurtenissen verwerken die beschikbaar worden gesteld door webserverbesturingselementen. De gebeurtenissen worden op de server weergegeven via post-back-aanvragen van formulieren. Bekijk het volgende webformulierknop klikvoorbeeld:

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

In Blazorkunt u handlers voor DOM UI-gebeurtenissen rechtstreeks registreren met behulp van instructiekenmerken van het formulier @on{event}. De {event} tijdelijke aanduiding vertegenwoordigt de naam van de gebeurtenis. U kunt bijvoorbeeld luisteren naar knopklikken als volgt:

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

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

Gebeurtenis-handlers kunnen een optioneel, gebeurtenisspecifiek argument accepteren om meer informatie over de gebeurtenis op te geven. Muis-gebeurtenissen kunnen bijvoorbeeld een MouseEventArgs argument aannemen, maar dit is niet vereist.

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

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

In plaats van te verwijzen naar een methodegroep voor een gebeurtenis-handler, kunt u een lambda-expressie gebruiken. Met een lambda-expressie kunt u andere waarden binnen het bereik sluiten.

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

Gebeurtenis-handlers kunnen synchroon of asynchroon worden uitgevoerd. De volgende OnClick gebeurtenis-handler wordt bijvoorbeeld asynchroon uitgevoerd:

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

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

Nadat een gebeurtenis is verwerkt, wordt het onderdeel weergegeven om rekening te houden met eventuele wijzigingen in de status van het onderdeel. Met asynchrone gebeurtenis-handlers wordt het onderdeel direct weergegeven nadat de handler-uitvoering is voltooid. Het onderdeel wordt opnieuw weergegeven nadat de asynchrone Task bewerking is voltooid. Deze asynchrone uitvoeringsmodus biedt een mogelijkheid om een aantal geschikte gebruikersinterface weer te geven terwijl de asynchrone Task gebruikersinterface nog steeds wordt uitgevoerd.

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

Onderdelen kunnen ook hun eigen gebeurtenissen definiëren door een onderdeelparameter van het type EventCallback<TValue>te definiëren. Event callbacks ondersteunen alle variaties van DOM UI-gebeurtenishandlers: optionele argumenten, synchrone of asynchrone, methodegroepen of lambda-expressies.

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

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

Gegevensbinding

Blazor biedt een eenvoudig mechanisme om gegevens van een UI-onderdeel te binden aan de status van het onderdeel. Deze benadering verschilt van de functies in ASP.NET Web Forms voor het binden van gegevens uit gegevensbronnen aan ui-besturingselementen. We behandelen de verwerking van gegevens uit verschillende gegevensbronnen in de sectie Omgaan met gegevens .

Als u een tweerichtingsgegevensbinding wilt maken van een UI-onderdeel naar de status van het onderdeel, gebruikt u het @bind instructiekenmerk. In het volgende voorbeeld is de waarde van het selectievakje gebonden aan het isChecked veld.

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

@code {
    bool isChecked;
}

Wanneer het onderdeel wordt weergegeven, wordt de waarde van het selectievakje ingesteld op de waarde van het isChecked veld. Wanneer de gebruiker het selectievakje inschakelt, wordt de onchange gebeurtenis geactiveerd en wordt het isChecked veld ingesteld op de nieuwe waarde. De @bind syntaxis in dit geval is gelijk aan de volgende markeringen:

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

Als u de gebeurtenis die voor de binding wordt gebruikt, wilt wijzigen, gebruikt u het @bind:event kenmerk.

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

@code {
    string text;
}

Onderdelen kunnen ook ondersteuning bieden voor gegevensbinding met hun parameters. Als u gegevens wilt binden, definieert u een callback-parameter voor gebeurtenissen met dezelfde naam als de bindbare parameter. Het achtervoegsel 'Gewijzigd' wordt toegevoegd aan de naam.

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

Als u een gegevensbinding wilt koppelen aan een onderliggend UI-element, stelt u de waarde in en verwerkt u de gebeurtenis rechtstreeks in het UI-element in plaats van het @bind kenmerk te gebruiken.

Als u verbinding wilt maken met een onderdeelparameter, gebruikt u een @bind-{Parameter} kenmerk om de parameter op te geven waaraan u wilt binden.

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

@code {
    string password;
}

Status wijzigen

Als de status van het onderdeel is gewijzigd buiten een normale GEBRUIKERSinterfacegebeurtenis of gebeurtenisaanroep, moet het onderdeel handmatig aangeven dat het opnieuw moet worden weergegeven. Als u wilt signaleren dat de status van een onderdeel is gewijzigd, roept u de StateHasChanged methode voor het onderdeel aan.

In het onderstaande voorbeeld geeft een onderdeel een bericht weer van een AppState service die kan worden bijgewerkt door andere onderdelen van de app. Het onderdeel registreert de StateHasChanged methode met de AppState.OnChange gebeurtenis, zodat het onderdeel wordt weergegeven wanneer het bericht wordt bijgewerkt.

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

Levenscyclus van onderdelen

Het ASP.NET Web Forms-framework heeft goed gedefinieerde levenscyclusmethoden voor modules, pagina's en besturingselementen. Met het volgende besturingselement worden bijvoorbeeld gebeurtenis-handlers geïmplementeerd voor de Init, Loaden UnLoad levenscyclus-gebeurtenissen:

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-onderdelen hebben ook een goed gedefinieerde levenscyclus. De levenscyclus van een onderdeel kan worden gebruikt voor het initialiseren van de onderdeelstatus en het implementeren van geavanceerd onderdeelgedrag.

Alle levenscyclusmethoden voor Blazoronderdelen hebben zowel synchrone als asynchrone versies. Het weergeven van onderdelen is synchroon. U kunt geen asynchrone logica uitvoeren als onderdeel van de componentrendering. Alle asynchrone logica moet worden uitgevoerd als onderdeel van een async levenscyclusmethode.

OnInitialized

De OnInitialized en OnInitializedAsync methoden worden gebruikt om het onderdeel te initialiseren. Een onderdeel wordt doorgaans geïnitialiseerd nadat het voor het eerst is gerenderd. Nadat een onderdeel is geïnitialiseerd, kan het meerdere keren worden weergegeven voordat het uiteindelijk wordt verwijderd. De OnInitialized methode is vergelijkbaar met de Page_Load gebeurtenis in ASP.NET webpagina's en besturingselementen van webformulieren.

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

OnParametersSet

De OnParametersSet en OnParametersSetAsync methoden worden aangeroepen wanneer een onderdeel parameters van het bovenliggende onderdeel heeft ontvangen en de waarde wordt toegewezen aan eigenschappen. Deze methoden worden uitgevoerd na de initialisatie van onderdelen en telkens wanneer het onderdeel wordt weergegeven.

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

OnAfterRender

De OnAfterRender en OnAfterRenderAsync methoden worden aangeroepen nadat een onderdeel klaar is met rendering. Element- en onderdeelverwijzingen worden op dit punt ingevuld (meer informatie over deze concepten hieronder). Interactiviteit met de browser is op dit moment ingeschakeld. Interacties met de DOM- en JavaScript-uitvoering kunnen veilig plaatsvinden.

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

OnAfterRender en OnAfterRenderAsync worden niet aangeroepen bij het prerendering op de server.

De firstRender parameter is true de eerste keer dat het onderdeel wordt weergegeven; anders is de waarde .false

IDisposable

Razor-onderdelen kunnen implementeren IDisposable om resources te verwijderen wanneer het onderdeel uit de gebruikersinterface wordt verwijderd. Een Razor-onderdeel kan worden geïmplementeerd IDispose met behulp van de @implements instructie:

@using System
@implements IDisposable

...

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

Verwijzingen naar onderdelen vastleggen

In ASP.NET webformulieren is het gebruikelijk om een besturingselementexemplaren rechtstreeks in code te bewerken door te verwijzen naar de id. In Blazor, het is ook mogelijk om een verwijzing naar een onderdeel vast te leggen en te manipuleren, hoewel dit veel minder gebruikelijk is.

Als u een verwijzing naar een onderdeel wilt Blazorvastleggen, gebruikt u het kenmerk van de @ref instructie. De waarde van het kenmerk moet overeenkomen met de naam van een settabelveld met hetzelfde type als het onderdeel waarnaar wordt verwezen.

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

@code {
    MyLoginDialog loginDialog = default!;

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

Wanneer het bovenliggende onderdeel wordt weergegeven, wordt het veld gevuld met het onderliggende onderdeelexemplaren. Vervolgens kunt u methoden aanroepen voor het onderdeelexemplaren of anderszins bewerken.

Het rechtstreeks bewerken van de onderdeelstatus met behulp van onderdeelverwijzingen wordt niet aanbevolen. Hierdoor voorkomt u dat het onderdeel automatisch op de juiste tijdstippen wordt weergegeven.

Elementverwijzingen vastleggen

Razor-onderdelen kunnen verwijzingen naar een element vastleggen. In tegenstelling tot besturingselementen voor HTML-servers in ASP.NET Web Forms, kunt u de DOM niet rechtstreeks bewerken met behulp van een elementreferentie in Blazor. Blazor verwerkt de meeste DOM-interacties voor u met behulp van het DOM-diffing-algoritme. Vastgelegde elementverwijzingen zijn Blazor ondoorzichtig. Ze worden echter gebruikt om een specifieke elementverwijzing door te geven in een JavaScript-interop-aanroep. Zie ASP.NET Core Blazor JavaScript-interop voor meer informatie over JavaScript-interop in JavaScript.

Sjabloononderdelen

In ASP.NET Webformulieren kunt u sjabloonbesturingselementen maken. Met sjabloonbesturingselementen kan de ontwikkelaar een gedeelte van de HTML opgeven dat wordt gebruikt om een containerbesturingselement weer te geven. De mechanismen voor het bouwen van serverbesturingselementen met sjabloon zijn complex, maar ze maken krachtige scenario's mogelijk voor het weergeven van gegevens op een door de gebruiker aanpasbare manier. Voorbeelden van sjabloonbesturingselementen zijn onder andere Repeater en DataList.

Razor-onderdelen kunnen ook worden gesjabloond door onderdeelparameters van het type of RenderFragment RenderFragment<T>te definiëren. A RenderFragment vertegenwoordigt een segment razor-markeringen die vervolgens door het onderdeel kunnen worden weergegeven. A RenderFragment<T> is een segment van Razor-markeringen die een parameter gebruikt die kan worden opgegeven wanneer het renderfragment wordt weergegeven.

Onderliggende inhoud

Razor-onderdelen kunnen hun onderliggende inhoud vastleggen als een RenderFragment en die inhoud weergeven als onderdeel van de componentrendering. Als u onderliggende inhoud wilt vastleggen, definieert u een onderdeelparameter van het type RenderFragment en noemt u deze ChildContent.

ChildContentComponent.razor

<h1>Component with child content</h1>

<div>@ChildContent</div>

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

Een bovenliggend onderdeel kan vervolgens onderliggende inhoud leveren met behulp van de normale Razor-syntaxis.

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

Sjabloonparameters

Een Sjabloond Razor-onderdeel kan ook meerdere onderdeelparameters van het type of RenderFragment RenderFragment<T>. De parameter voor een RenderFragment<T> kan worden opgegeven wanneer deze wordt aangeroepen. Als u een algemene typeparameter voor een onderdeel wilt opgeven, gebruikt u de @typeparam Razor-instructie.

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

Wanneer u een sjabloononderdeel gebruikt, kunnen de sjabloonparameters worden opgegeven met behulp van onderliggende elementen die overeenkomen met de namen van de parameters. Onderdeelargumenten van het type RenderFragment<T> dat als elementen worden doorgegeven, hebben een impliciete parameter met de naam context. U kunt de naam van deze implementatieparameter wijzigen met behulp van het Context kenmerk op het onderliggende element. Alle algemene typeparameters kunnen worden opgegeven met behulp van een kenmerk dat overeenkomt met de naam van de typeparameter. De typeparameter wordt zo mogelijk afgeleid:

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

De uitvoer van dit onderdeel ziet er als volgt uit:

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

Code-behind

Een Razor-onderdeel wordt doorgaans geschreven in één RAZOR-bestand . Het is echter ook mogelijk om de code en markeringen te scheiden met behulp van een code-behind-bestand. Als u een onderdeelbestand wilt gebruiken, voegt u een C#-bestand toe dat overeenkomt met de bestandsnaam van het onderdeelbestand, maar met een .cs extensie toegevoegd (Counter.razor.cs). Gebruik het C#-bestand om een basisklasse voor het onderdeel te definiëren. U kunt de basisklasse een naam geven die u wilt, maar het is gebruikelijk om de klasse dezelfde naam te geven als de onderdeelklasse, maar met een Base extensie toegevoegd (CounterBase). De op onderdelen gebaseerde klasse moet ook zijn afgeleid van ComponentBase. Voeg vervolgens in het Razor-onderdeelbestand de @inherits instructie toe om de basisklasse voor het onderdeel (@inherits CounterBase) op te geven.

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

De zichtbaarheid van de leden van het onderdeel in de basisklasse moet of zichtbaar zijn protected public voor de onderdeelklasse.

Aanvullende bronnen

Het voorgaande is geen volledige behandeling van alle aspecten van Razor-onderdelen. Zie de Blazor documentatie voor meer informatie over het maken en gebruiken van ASP.NET Core Razor-onderdelen.

Vorige Volgende

Delen via