ASP.NET Core-gebeurtenisafhandeling Blazor

2025-04-05

Opmerking

Dit is niet de nieuwste versie van dit artikel. Zie de .NET 9-versie van dit artikelvoor de huidige release.

Waarschuwing

Deze versie van ASP.NET Core wordt niet meer ondersteund. Zie de .NET- en .NET Core-ondersteuningsbeleidvoor meer informatie. Zie de .NET 9-versie van dit artikelvoor de huidige release.

Belangrijk

Deze informatie heeft betrekking op een pre-releaseproduct dat aanzienlijk kan worden gewijzigd voordat het commercieel wordt uitgebracht. Microsoft geeft geen garanties, uitdrukkelijk of impliciet, met betrekking tot de informatie die hier wordt verstrekt.

Zie de .NET 9-versie van dit artikelvoor de huidige release.

In dit artikel worden Blazorde functies voor gebeurtenisafhandeling uitgelegd, waaronder gebeurtenisargumenttypen, callbacks voor gebeurtenissen en het beheren van standaardbrowser-gebeurtenissen.

Gebeurtenis-handlers delegeren

Geef gebeurtenis-handlers voor gedelegeerden op in Razor componentmarkup met de @on{DOM EVENT}="{DELEGATE}"Razor syntaxis:

De {DOM EVENT} tijdelijke aanduiding is een DOM-gebeurtenis (bijvoorbeeld click).
De {DELEGATE} tijdelijke aanduiding is de C#-gebeurtenishandler voor gedelegeerden.

Voor gebeurtenisafhandeling:

Gebeurtenis-handlers van gedelegeerden in Blazor Web Apps worden alleen aangeroepen in componenten die een interactieve rendermodus gebruiken. In de voorbeelden in dit artikel wordt ervan uitgegaan dat de app wereldwijd een interactieve rendermodus gebruikt in het hoofdonderdeel van de app, meestal het App onderdeel. Zie ASP.NET Core Blazor rendermodivoor meer informatie.
Asynchrone gebeurtenis-handlers voor gedelegeerden die een Task (async Task) retourneren, worden ondersteund door Blazor en goedgekeurd door Blazor Web App en Blazor WebAssembly documentatievoorbeelden.
Gedelegeerde gebeurtenis-handlers activeren automatisch een UI-render, dus u hoeft StateHasChanged niet handmatig aan te roepen.
Uitzonderingen worden vastgelegd.

Asynchrone gebeurtenis-handlers voor gedelegeerden die een Task (async Task) retourneren, worden ondersteund door Blazor en goedgekeurd door Blazor Server en Blazor WebAssembly documentatievoorbeelden.
Gedelegeerde gebeurtenis-handlers activeren automatisch een UI-render, dus u hoeft StateHasChanged niet handmatig aan te roepen.
Uitzonderingen worden vastgelegd.

Belangrijk

Het Blazor-framework houdt void-returnerende asynchrone methoden (async) niet bij. Als gevolg hiervan mislukt het hele proces als een uitzondering niet wordt opgevangen wanneer void wordt geretourneerd. Geef altijd een Task/ValueTask terug vanuit asynchrone methoden.

De volgende code:

Roept de UpdateHeading methode aan wanneer de knop is geselecteerd in de gebruikersinterface.
Roept de CheckChanged methode aan wanneer het selectievakje wordt gewijzigd in de gebruikersinterface.

EventHandler1.razor:

@page "/event-handler-1"

<PageTitle>Event Handler 1</PageTitle>

<h1>Event Handler Example 1</h1>

<h2>@headingValue</h2>

<p>
    <button @onclick="UpdateHeading">
        Update heading
    </button>
</p>

<p>
    <label>
        <input type="checkbox" @onchange="CheckChanged" />
        @checkedMessage
    </label>
</p>

@code {
    private string headingValue = "Initial heading";
    private string checkedMessage = "Not changed yet";

    private void UpdateHeading() => headingValue = $"New heading ({DateTime.Now})";

    private void CheckChanged() => checkedMessage = $"Last change {DateTime.Now}";
}

EventHandler1.razor:

@page "/event-handler-1"

<PageTitle>Event Handler 1</PageTitle>

<h1>Event Handler Example 1</h1>

<h2>@headingValue</h2>

<p>
    <button @onclick="UpdateHeading">
        Update heading
    </button>
</p>

<p>
    <label>
        <input type="checkbox" @onchange="CheckChanged" />
        @checkedMessage
    </label>
</p>

@code {
    private string headingValue = "Initial heading";
    private string checkedMessage = "Not changed yet";

    private void UpdateHeading() => headingValue = $"New heading ({DateTime.Now})";

    private void CheckChanged() => checkedMessage = $"Last change {DateTime.Now}";
}

EventHandlerExample1.razor:

@page "/event-handler-1"

<h1>@headingValue</h1>

<p>
    <button @onclick="UpdateHeading">
        Update heading
    </button>
</p>

<p>
    <label>
        <input type="checkbox" @onchange="CheckChanged" />
        @checkedMessage
    </label>
</p>

@code {
    private string headingValue = "Initial heading";
    private string checkedMessage = "Not changed yet";

    private void UpdateHeading()
    {
        headingValue = $"New heading ({DateTime.Now})";
    }

    private void CheckChanged()
    {
        checkedMessage = $"Last changed at {DateTime.Now}";
    }
}

EventHandlerExample1.razor:

@page "/event-handler-1"

<h1>@headingValue</h1>

<p>
    <button @onclick="UpdateHeading">
        Update heading
    </button>
</p>

<p>
    <label>
        <input type="checkbox" @onchange="CheckChanged" />
        @checkedMessage
    </label>
</p>

@code {
    private string headingValue = "Initial heading";
    private string checkedMessage = "Not changed yet";

    private void UpdateHeading()
    {
        headingValue = $"New heading ({DateTime.Now})";
    }

    private void CheckChanged()
    {
        checkedMessage = $"Last changed at {DateTime.Now}";
    }
}

EventHandlerExample1.razor:

@page "/event-handler-1"

<h1>@headingValue</h1>

<p>
    <button @onclick="UpdateHeading">
        Update heading
    </button>
</p>

<p>
    <label>
        <input type="checkbox" @onchange="CheckChanged" />
        @checkedMessage
    </label>
</p>

@code {
    private string headingValue = "Initial heading";
    private string checkedMessage = "Not changed yet";

    private void UpdateHeading()
    {
        headingValue = $"New heading ({DateTime.Now})";
    }

    private void CheckChanged()
    {
        checkedMessage = $"Last changed at {DateTime.Now}";
    }
}

EventHandlerExample1.razor:

@page "/event-handler-1"

<h1>@headingValue</h1>

<p>
    <button @onclick="UpdateHeading">
        Update heading
    </button>
</p>

<p>
    <label>
        <input type="checkbox" @onchange="CheckChanged" />
        @checkedMessage
    </label>
</p>

@code {
    private string headingValue = "Initial heading";
    private string checkedMessage = "Not changed yet";

    private void UpdateHeading()
    {
        headingValue = $"New heading ({DateTime.Now})";
    }

    private void CheckChanged()
    {
        checkedMessage = $"Last changed at {DateTime.Now}";
    }
}

In het volgende voorbeeld: UpdateHeading

Wordt asynchroon aangeroepen wanneer de knop is geselecteerd.
Wacht twee seconden voordat de kop wordt bijgewerkt.

EventHandler2.razor:

@page "/event-handler-2"

<PageTitle>Event Handler 2</PageTitle>

<h1>Event Handler Example 2</h1>

<h2>@headingValue</h2>

<p>
    <button @onclick="UpdateHeading">
        Update heading
    </button>
</p>

@code {
    private string headingValue = "Initial heading";

    private async Task UpdateHeading()
    {
        await Task.Delay(2000);

        headingValue = $"New heading ({DateTime.Now})";
    }
}

EventHandler2.razor:

@page "/event-handler-2"

<PageTitle>Event Handler 2</PageTitle>

<h1>Event Handler Example 2</h1>

<h2>@headingValue</h2>

<p>
    <button @onclick="UpdateHeading">
        Update heading
    </button>
</p>

@code {
    private string headingValue = "Initial heading";

    private async Task UpdateHeading()
    {
        await Task.Delay(2000);

        headingValue = $"New heading ({DateTime.Now})";
    }
}

EventHandlerExample2.razor:

@page "/event-handler-2"

<h1>@headingValue</h1>

<p>
    <button @onclick="UpdateHeading">
        Update heading
    </button>
</p>

@code {
    private string headingValue = "Initial heading";

    private async Task UpdateHeading()
    {
        await Task.Delay(2000);

        headingValue = $"New heading ({DateTime.Now})";
    }
}

EventHandlerExample2.razor:

@page "/event-handler-2"

<h1>@headingValue</h1>

<p>
    <button @onclick="UpdateHeading">
        Update heading
    </button>
</p>

@code {
    private string headingValue = "Initial heading";

    private async Task UpdateHeading()
    {
        await Task.Delay(2000);

        headingValue = $"New heading ({DateTime.Now})";
    }
}

EventHandlerExample2.razor:

@page "/event-handler-2"

<h1>@headingValue</h1>

<p>
    <button @onclick="UpdateHeading">
        Update heading
    </button>
</p>

@code {
    private string headingValue = "Initial heading";

    private async Task UpdateHeading()
    {
        await Task.Delay(2000);

        headingValue = $"New heading ({DateTime.Now})";
    }
}

EventHandlerExample2.razor:

@page "/event-handler-2"

<h1>@headingValue</h1>

<p>
    <button @onclick="UpdateHeading">
        Update heading
    </button>
</p>

@code {
    private string headingValue = "Initial heading";

    private async Task UpdateHeading()
    {
        await Task.Delay(2000);

        headingValue = $"New heading ({DateTime.Now})";
    }
}

Ingebouwde gebeurtenisargumenten

Voor gebeurtenissen die een gebeurtenisargumenttype ondersteunen, is het opgeven van een gebeurtenisparameter in de definitie van de gebeurtenismethode alleen nodig als het gebeurtenistype wordt gebruikt in de methode. In het volgende voorbeeld MouseEventArgs wordt de ReportPointerLocation methode gebruikt om berichttekst in te stellen die de muiscoördinaten rapporteert wanneer de gebruiker een knop in de gebruikersinterface selecteert.

EventHandler3.razor:

@page "/event-handler-3"

<PageTitle>Event Handler 3</PageTitle>

<h1>Event Handler Example 3</h1>

@for (var i = 0; i < 4; i++)
{
    <p>
        <button @onclick="ReportPointerLocation">
            Where's my mouse pointer for this button?
        </button>
    </p>
}

<p>@mousePointerMessage</p>

@code {
    private string? mousePointerMessage;

    private void ReportPointerLocation(MouseEventArgs e) => 
        mousePointerMessage = $"Mouse coordinates: {e.ScreenX}:{e.ScreenY}";
}

EventHandler3.razor:

@page "/event-handler-3"

<PageTitle>Event Handler 3</PageTitle>

<h1>Event Handler Example 3</h1>

@for (var i = 0; i < 4; i++)
{
    <p>
        <button @onclick="ReportPointerLocation">
            Where's my mouse pointer for this button?
        </button>
    </p>
}

<p>@mousePointerMessage</p>

@code {
    private string? mousePointerMessage;

    private void ReportPointerLocation(MouseEventArgs e) => 
        mousePointerMessage = $"Mouse coordinates: {e.ScreenX}:{e.ScreenY}";
}

EventHandlerExample3.razor:

@page "/event-handler-example-3"

@for (var i = 0; i < 4; i++)
{
    <p>
        <button @onclick="ReportPointerLocation">
            Where's my mouse pointer for this button?
        </button>
    </p>
}

<p>@mousePointerMessage</p>

@code {
    private string? mousePointerMessage;

    private void ReportPointerLocation(MouseEventArgs e)
    {
        mousePointerMessage = $"Mouse coordinates: {e.ScreenX}:{e.ScreenY}";
    }
}

EventHandlerExample3.razor:

@page "/event-handler-example-3"

@for (var i = 0; i < 4; i++)
{
    <p>
        <button @onclick="ReportPointerLocation">
            Where's my mouse pointer for this button?
        </button>
    </p>
}

<p>@mousePointerMessage</p>

@code {
    private string? mousePointerMessage;

    private void ReportPointerLocation(MouseEventArgs e)
    {
        mousePointerMessage = $"Mouse coordinates: {e.ScreenX}:{e.ScreenY}";
    }
}

EventHandlerExample3.razor:

@page "/event-handler-example-3"

@for (var i = 0; i < 4; i++)
{
    <p>
        <button @onclick="ReportPointerLocation">
            Where's my mouse pointer for this button?
        </button>
    </p>
}

<p>@mousePointerMessage</p>

@code {
    private string mousePointerMessage;

    private void ReportPointerLocation(MouseEventArgs e)
    {
        mousePointerMessage = $"Mouse coordinates: {e.ScreenX}:{e.ScreenY}";
    }
}

EventHandlerExample3.razor:

@page "/event-handler-example-3"

@for (var i = 0; i < 4; i++)
{
    <p>
        <button @onclick="ReportPointerLocation">
            Where's my mouse pointer for this button?
        </button>
    </p>
}

<p>@mousePointerMessage</p>

@code {
    private string mousePointerMessage;

    private void ReportPointerLocation(MouseEventArgs e)
    {
        mousePointerMessage = $"Mouse coordinates: {e.ScreenX}:{e.ScreenY}";
    }
}

Ondersteunde EventArgs worden weergegeven in de volgende tabel.

Gebeurtenis	Klasse	DOM-notities
Klembord	ClipboardEventArgs
Slepen	DragEventArgs	DataTransfer en DataTransferItem houden de gegevens van het gesleepte item vast. Implementeer slepen en neerzetten in Blazor apps met behulp van JS interop met de HTML-API voor slepen en neerzetten.
Fout	ErrorEventArgs
Gebeurtenis	EventArgs	EventHandlers bevat kenmerken voor het configureren van de toewijzingen tussen gebeurtenisnamen en gebeurtenisargumenttypen.
Focus	FocusEventArgs	Biedt geen ondersteuning voor `relatedTarget`.
Invoer	ChangeEventArgs
Toetsenbord	KeyboardEventArgs
Muis	MouseEventArgs
Muisaanwijzer	PointerEventArgs
Muiswiel	WheelEventArgs
Vooruitgang	ProgressEventArgs
Aanraken	TouchEventArgs	TouchPoint vertegenwoordigt één contactpunt op een aanraakgevoelig apparaat.

Zie de volgende bronnen voor meer informatie:

EventArgs klassen in de ASP.NET Core-referentiebron (dotnet/aspnetcore branch main)

Opmerking

Documentatiekoppelingen naar .NET-referentiebron laden meestal de standaardbranch van de opslagplaats, die de huidige ontwikkeling vertegenwoordigt voor de volgende release van .NET. Als u een tag voor een specifieke release wilt selecteren, gebruikt u de Switch branches of tags vervolgkeuzelijst. Zie Een versietag selecteren van ASP.NET Core-broncode (dotnet/AspNetCore.Docs #26205)voor meer informatie.
EventHandlers bevat kenmerken voor het configureren van de toewijzingen tussen gebeurtenisnamen en gebeurtenisargumenttypen.

Aangepaste gebeurtenisargumenten

Blazor ondersteunt aangepaste gebeurtenisargumenten, waarmee u willekeurige gegevens kunt doorgeven aan .NET-gebeurtenis-handlers met aangepaste gebeurtenissen.

Algemene configuratie

Aangepaste gebeurtenissen met aangepaste gebeurtenisargumenten worden over het algemeen ingeschakeld met de volgende stappen.

Definieer in JavaScript een functie voor het bouwen van het object voor het aangepaste gebeurtenisargument van de bron gebeurtenis:

function eventArgsCreator(event) { 
  return {
    customProperty1: 'any value for property 1',
    customProperty2: event.srcElement.id
  };
}

De event parameter is een DOM-gebeurtenis.

Registreer de aangepaste gebeurtenis bij de voorgaande handler in een JavaScript-initialisatiefunctie. Geef de juiste browsergebeurtenis aan browserEventName, wat voor het voorbeeld in deze sectie click is voor het selecteren van een knop in de UI.

wwwroot/{PACKAGE ID/ASSEMBLY NAME}.lib.module.js (de {PACKAGE ID/ASSEMBLY NAME} tijdelijke aanduiding is de pakket-id of assemblynaam van de app):

Voor een Blazor Web App:

export function afterWebStarted(blazor) {
  blazor.registerCustomEventType('customevent', {
    browserEventName: 'click',
    createEventArgs: eventArgsCreator
  });
}

Voor een Blazor Server of Blazor WebAssembly app:

export function afterStarted(blazor) {
  blazor.registerCustomEventType('customevent', {
    browserEventName: 'click',
    createEventArgs: eventArgsCreator
  });
}

De aanroep naar registerCustomEventType wordt slechts één keer per gebeurtenis uitgevoerd in een script.

Gebruik voor de aanroep registerCustomEventType de blazor-parameter (kleine letter b) die is opgegeven door de Blazor start-gebeurtenis. Hoewel de registratie geldig is bij het gebruik van het Blazor object (hoofdletter B), is de voorkeursbenadering het gebruik van de parameter.

De naam van de aangepaste gebeurtenis mag customevent in het voorgaande voorbeeld niet overeenkomen met de naam van een gereserveerde Blazor gebeurtenis. De gereserveerde namen vindt u in de referentiebron van hetBlazor framework (zie de aanroepen naar de registerBuiltInEventType functie).

Opmerking

Documentatiekoppelingen naar .NET-referentiebron laden meestal de standaardbranch van de opslagplaats, die de huidige ontwikkeling vertegenwoordigt voor de volgende release van .NET. Als u een tag voor een specifieke release wilt selecteren, gebruikt u de Switch branches of tags vervolgkeuzelijst. Zie Een versietag selecteren van ASP.NET Core-broncode (dotnet/AspNetCore.Docs #26205)voor meer informatie.

Definieer een klasse voor de gebeurtenisargumenten:

namespace BlazorSample.CustomEvents;

public class CustomEventArgs : EventArgs
{
    public string? CustomProperty1 {get; set;}
    public string? CustomProperty2 {get; set;}
}

Verbind de aangepaste gebeurtenis met de gebeurtenisargumenten door een [EventHandler] kenmerkaantekening toe te voegen voor de aangepaste gebeurtenis:

Als u wilt dat de compiler de [EventHandler] klasse kan vinden, moet deze worden geplaatst in een C#-klassebestand (.cs), waardoor het een normale klasse op het hoogste niveau is.
Markeer de klasse public.
Voor de klas zijn geen leden vereist.
De klasse moet 'EventHandlers' worden genoemd om te kunnen worden gevonden door de Razor compiler.
Plaats de klasse onder een naamruimte die specifiek is voor uw app.
Importeer de naamruimte in het Razor onderdeel (.razor) waar de gebeurtenis wordt gebruikt.

using Microsoft.AspNetCore.Components;

namespace BlazorSample.CustomEvents;

[EventHandler("oncustomevent", typeof(CustomEventArgs),
    enableStopPropagation: true, enablePreventDefault: true)]
public static class EventHandlers
{
}

Registreer de gebeurtenis-handler op een of meer HTML-elementen. Toegang tot de gegevens die zijn doorgegeven vanuit JavaScript in de methode voor gedelegeerde handler:

@using BlazorSample.CustomEvents

<button id="buttonId" @oncustomevent="HandleCustomEvent">Handle</button>

@if (!string.IsNullOrEmpty(propVal1) && !string.IsNullOrEmpty(propVal2))
{
    <ul>
        <li>propVal1: @propVal1</li>
        <li>propVal2: @propVal2</li>
    </ul>
}

@code
{
    private string? propVal1;
    private string? propVal2;

    private void HandleCustomEvent(CustomEventArgs eventArgs)
    {
        propVal1 = eventArgs.CustomProperty1;
        propVal2 = eventArgs.CustomProperty2;
    }
}

Als het @oncustomevent kenmerk niet wordt herkend door IntelliSense, moet u ervoor zorgen dat het onderdeel of het _Imports.razor bestand een @using instructie bevat voor de naamruimte die de EventHandler klasse bevat.

Wanneer de aangepaste gebeurtenis wordt geactiveerd in de DOM, wordt de gebeurtenis-handler aangeroepen met de gegevens die zijn doorgegeven vanuit JavaScript.

Als u een aangepaste gebeurtenis probeert te activeren, moet bubbles zijn ingeschakeld door de waarde in te stellen op true. Anders bereikt de gebeurtenis de Blazor handler niet voor verwerking in de aangepaste [EventHandler] C#-kenmerkklasse . Zie MDN Web Docs: Event bubbling voor meer informatie.

Voorbeeld van een aangepast klembordplak-evenement

In het volgende voorbeeld wordt een aangepaste klembord-plakgebeurtenis ontvangen die de tijd van de plakbewerking en de geplakte tekst van de gebruiker bevat.

Declareer een aangepaste naam (oncustompaste) voor de gebeurtenis en een .NET-klasse (CustomPasteEventArgs) om de gebeurtenisargumenten voor deze gebeurtenis te bewaren:

CustomEvents.cs:

using Microsoft.AspNetCore.Components;

namespace BlazorSample.CustomEvents;

[EventHandler("oncustompaste", typeof(CustomPasteEventArgs), 
    enableStopPropagation: true, enablePreventDefault: true)]
public static class EventHandlers
{
}

public class CustomPasteEventArgs : EventArgs
{
    public DateTime EventTimestamp { get; set; }
    public string? PastedData { get; set; }
}

Voeg JavaScript-code toe om gegevens op te geven voor de EventArgs subklasse met de voorgaande handler in een JavaScript-initializer. In het volgende voorbeeld wordt alleen tekst geplakt, maar u kunt willekeurige JavaScript-API's gebruiken om gebruikers te behandelen die andere typen gegevens plakken, zoals afbeeldingen.

wwwroot/{PACKAGE ID/ASSEMBLY NAME}.lib.module.js:

Voor een Blazor Web App:

export function afterWebStarted(blazor) {
  blazor.registerCustomEventType('custompaste', {
    browserEventName: 'paste',
    createEventArgs: event => {
      return {
        eventTimestamp: new Date(),
        pastedData: event.clipboardData.getData('text')
      };
    }
  });
}

Voor een Blazor Server of Blazor WebAssembly app:

export function afterStarted(blazor) {
  blazor.registerCustomEventType('custompaste', {
    browserEventName: 'paste',
    createEventArgs: event => {
      return {
        eventTimestamp: new Date(),
        pastedData: event.clipboardData.getData('text')
      };
    }
  });
}

In het voorgaande voorbeeld geeft de plaatsaanduiding {PACKAGE ID/ASSEMBLY NAME} van de bestandsnaam de pakket-ID of de assemblynaam van de app weer.

Opmerking

De voorgaande code vertelt de browser dat wanneer een systeemeigen paste gebeurtenis plaatsvindt:

Een custompaste-gebeurtenis genereren.
Geef de gebeurtenisargumentgegevens op met behulp van de opgegeven aangepaste logica:
- Maak een nieuwe datum voor de eventTimestampknop.
- Haal de pastedDatagegevens van het klembord op als tekst. Zie MDN Web Docs: KlembordEvent.klembordData voor meer informatie.

Gebeurtenisnaamconventies verschillen tussen .NET en JavaScript:

In .NET worden gebeurtenisnamen voorafgegaan door 'on'.
In JavaScript hebben gebeurtenisnamen geen voorvoegsel.

Koppel de aangepaste handler aan een element in een Razor onderdeel.

CustomPasteArguments.razor:

@page "/custom-paste-arguments"
@using BlazorSample.CustomEvents

<label>
    Try pasting into the following text box:
    <input @oncustompaste="HandleCustomPaste" />
</label>

<p>
    @message
</p>

@code {
    private string? message;

    private void HandleCustomPaste(CustomPasteEventArgs eventArgs)
    {
        message = $"At {eventArgs.EventTimestamp.ToShortTimeString()}, " +
            $"you pasted: {eventArgs.PastedData}";
    }
}

Lambda-expressies

Lambda-expressies worden ondersteund als gedelegeerde gebeurtenishandler.

EventHandler4.razor:

@page "/event-handler-4"

<PageTitle>Event Handler 4</PageTitle>

<h1>Event Handler Example 4</h1>

<h2>@heading</h2>

<p>
    <button @onclick="@(e => heading = "New heading!!!")">
        Update heading
    </button>
</p>

@code {
    private string heading = "Initial heading";
}

EventHandler4.razor:

@page "/event-handler-4"

<PageTitle>Event Handler 4</PageTitle>

<h1>Event Handler Example 4</h1>

<h2>@heading</h2>

<p>
    <button @onclick="@(e => heading = "New heading!!!")">
        Update heading
    </button>
</p>

@code {
    private string heading = "Initial heading";
}

EventHandlerExample4.razor:

@page "/event-handler-example-4"

<h1>@heading</h1>

<p>
    <button @onclick="@(e => heading = "New heading!!!")">
        Update heading
    </button>
</p>

@code {
    private string heading = "Initial heading";
}

EventHandlerExample4.razor:

@page "/event-handler-example-4"

<h1>@heading</h1>

<p>
    <button @onclick="@(e => heading = "New heading!!!")">
        Update heading
    </button>
</p>

@code {
    private string heading = "Initial heading";
}

EventHandlerExample4.razor:

@page "/event-handler-example-4"

<h1>@heading</h1>

<p>
    <button @onclick="@(e => heading = "New heading!!!")">
        Update heading
    </button>
</p>

@code {
    private string heading = "Initial heading";
}

EventHandlerExample4.razor:

@page "/event-handler-example-4"

<h1>@heading</h1>

<p>
    <button @onclick="@(e => heading = "New heading!!!")">
        Update heading
    </button>
</p>

@code {
    private string heading = "Initial heading";
}

Het is vaak handig om extra waarden vast te leggen met behulp van C#-methodeparameters, zoals bij het itereren over een verzameling elementen. In het volgende voorbeeld worden drie knoppen gemaakt, die elk de volgende gegevens aanroepen UpdateHeading en doorgeven:

Een gebeurtenisargument (MouseEventArgs) in e.
Het knopnummer in buttonNumber.

EventHandler5.razor:

@page "/event-handler-5"

<PageTitle>Event Handler 5</PageTitle>

<h1>Event Handler Example 5</h1>

<h2>@heading</h2>

@for (var i = 1; i < 4; i++)
{
    var buttonNumber = i;

    <p>
        <button @onclick="@(e => UpdateHeading(e, buttonNumber))">
            Button #@i
        </button>
    </p>
}

@code {
    private string heading = "Select a button to learn its position";

    private void UpdateHeading(MouseEventArgs e, int buttonNumber) => 
        heading = $"Selected #{buttonNumber} at {e.ClientX}:{e.ClientY}";
}

EventHandler5.razor:

@page "/event-handler-5"

<PageTitle>Event Handler 5</PageTitle>

<h1>Event Handler Example 5</h1>

<h2>@heading</h2>

@for (var i = 1; i < 4; i++)
{
    var buttonNumber = i;

    <p>
        <button @onclick="@(e => UpdateHeading(e, buttonNumber))">
            Button #@i
        </button>
    </p>
}

@code {
    private string heading = "Select a button to learn its position";

    private void UpdateHeading(MouseEventArgs e, int buttonNumber) => 
        heading = $"Selected #{buttonNumber} at {e.ClientX}:{e.ClientY}";
}

EventHandlerExample5.razor:

@page "/event-handler-example-5"

<h1>@heading</h1>

@for (var i = 1; i < 4; i++)
{
    var buttonNumber = i;

    <p>
        <button @onclick="@(e => UpdateHeading(e, buttonNumber))">
            Button #@i
        </button>
    </p>
}

@code {
    private string heading = "Select a button to learn its position";

    private void UpdateHeading(MouseEventArgs e, int buttonNumber)
    {
        heading = $"Selected #{buttonNumber} at {e.ClientX}:{e.ClientY}";
    }
}

EventHandlerExample5.razor:

@page "/event-handler-example-5"

<h1>@heading</h1>

@for (var i = 1; i < 4; i++)
{
    var buttonNumber = i;

    <p>
        <button @onclick="@(e => UpdateHeading(e, buttonNumber))">
            Button #@i
        </button>
    </p>
}

@code {
    private string heading = "Select a button to learn its position";

    private void UpdateHeading(MouseEventArgs e, int buttonNumber)
    {
        heading = $"Selected #{buttonNumber} at {e.ClientX}:{e.ClientY}";
    }
}

EventHandlerExample5.razor:

@page "/event-handler-example-5"

<h1>@heading</h1>

@for (var i = 1; i < 4; i++)
{
    var buttonNumber = i;

    <p>
        <button @onclick="@(e => UpdateHeading(e, buttonNumber))">
            Button #@i
        </button>
    </p>
}

@code {
    private string heading = "Select a button to learn its position";

    private void UpdateHeading(MouseEventArgs e, int buttonNumber)
    {
        heading = $"Selected #{buttonNumber} at {e.ClientX}:{e.ClientY}";
    }
}

EventHandlerExample5.razor:

@page "/event-handler-example-5"

<h1>@heading</h1>

@for (var i = 1; i < 4; i++)
{
    var buttonNumber = i;

    <p>
        <button @onclick="@(e => UpdateHeading(e, buttonNumber))">
            Button #@i
        </button>
    </p>
}

@code {
    private string heading = "Select a button to learn its position";

    private void UpdateHeading(MouseEventArgs e, int buttonNumber)
    {
        heading = $"Selected #{buttonNumber} at {e.ClientX}:{e.ClientY}";
    }
}

Het creëren van een groot aantal eventdelegaten in een loopstructuur kan leiden tot slechte renderingprestaties. Zie Blazor voor meer informatie.

Vermijd het gebruik van een lusvariabele rechtstreeks in een lambda-expressie, zoals i in het voorgaande for lusvoorbeeld. Anders wordt dezelfde variabele gebruikt door alle lambda-expressies, wat resulteert in het gebruik van dezelfde waarde in alle lambdas. Leg de waarde van de variabele vast in een lokale variabele. In het voorgaande voorbeeld:

De lusvariabele i is toegewezen aan buttonNumber.
buttonNumber wordt gebruikt in de lambda-expressie.

U kunt ook een foreach lus gebruiken met Enumerable.Range, die geen last heeft van het voorgaande probleem:

@foreach (var buttonNumber in Enumerable.Range(1, 3))
{
    <p>
        <button @onclick="@(e => UpdateHeading(e, buttonNumber))">
            Button #@buttonNumber
        </button>
    </p>
}

EventCallback

Een veelvoorkomend scenario met geneste onderdelen is het uitvoeren van een methode in een bovenliggend onderdeel wanneer een gebeurtenis in een onderliggend onderdeel plaatsvindt. Een onclick gebeurtenis die optreedt in het subcomponent is een veelvoorkomend toepassingsvoorbeeld. Om evenementen tussen componenten te exposeren, gebruikt u een EventCallback. Een oudercomponent kan een callback-methode toewijzen aan een kindcomponent EventCallback.

Het volgende Child onderdeel laat zien hoe de handler van een knop onclick is ingesteld om een EventCallback gedelegeerde te ontvangen van het voorbeeld ParentComponent. De EventCallback is getypt met MouseEventArgs, wat geschikt is voor een onclick gebeurtenis van een randapparaat.

Child.razor:

<p>
    <button @onclick="OnClickCallback">
        Trigger a Parent component method
    </button>
</p>

@code {
    [Parameter]
    public string? Title { get; set; }

    [Parameter]
    public RenderFragment? ChildContent { get; set; }

    [Parameter]
    public EventCallback<MouseEventArgs> OnClickCallback { get; set; }
}

<p>
    <button @onclick="OnClickCallback">
        Trigger a Parent component method
    </button>
</p>

@code {
    [Parameter]
    public string? Title { get; set; }

    [Parameter]
    public RenderFragment? ChildContent { get; set; }

    [Parameter]
    public EventCallback<MouseEventArgs> OnClickCallback { get; set; }
}

<p>
    <button @onclick="OnClickCallback">
        Trigger a Parent component method
    </button>
</p>

@code {
    [Parameter]
    public string? Title { get; set; }

    [Parameter]
    public RenderFragment? ChildContent { get; set; }

    [Parameter]
    public EventCallback<MouseEventArgs> OnClickCallback { get; set; }
}

<p>
    <button @onclick="OnClickCallback">
        Trigger a Parent component method
    </button>
</p>

@code {
    [Parameter]
    public string? Title { get; set; }

    [Parameter]
    public RenderFragment? ChildContent { get; set; }

    [Parameter]
    public EventCallback<MouseEventArgs> OnClickCallback { get; set; }
}

<p>
    <button @onclick="OnClickCallback">
        Trigger a Parent component method
    </button>
</p>

@code {
    [Parameter]
    public string Title { get; set; }

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

    [Parameter]
    public EventCallback<MouseEventArgs> OnClickCallback { get; set; }
}

<p>
    <button @onclick="OnClickCallback">
        Trigger a Parent component method
    </button>
</p>

@code {
    [Parameter]
    public string Title { get; set; }

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

    [Parameter]
    public EventCallback<MouseEventArgs> OnClickCallback { get; set; }
}

Het bovenliggende component stelt de EventCallback<TValue> van het kind (OnClickCallback) in op zijn ShowMessage-methode.

ParentChild.razor:

@page "/parent-child"

<PageTitle>Parent Child</PageTitle>

<h1>Parent Child Example</h1>

<Child Title="Panel Title from Parent" OnClickCallback="ShowMessage">
    Content of the child component is supplied by the parent component.
</Child>

<p>@message</p>

@code {
    private string? message;

    private void ShowMessage(MouseEventArgs e) => 
        message = $"Blaze a new trail with Blazor! ({e.ScreenX}:{e.ScreenY})";
}

ParentChild.razor:

@page "/parent-child"

<PageTitle>Parent Child</PageTitle>

<h1>Parent Child Example</h1>

<Child Title="Panel Title from Parent" OnClickCallback="ShowMessage">
    Content of the child component is supplied by the parent component.
</Child>

<p>@message</p>

@code {
    private string? message;

    private void ShowMessage(MouseEventArgs e) => 
        message = $"Blaze a new trail with Blazor! ({e.ScreenX}:{e.ScreenY})";
}

Parent.razor:

@page "/parent"

<h1>Parent-child example</h1>

<Child Title="Panel Title from Parent" OnClickCallback="ShowMessage">
    Content of the child component is supplied by the parent component.
</Child>

<p>@message</p>

@code {
    private string? message;

    private void ShowMessage(MouseEventArgs e)
    {
        message = $"Blaze a new trail with Blazor! ({e.ScreenX}:{e.ScreenY})";
    }
}

Parent.razor:

@page "/parent"

<h1>Parent-child example</h1>

<Child Title="Panel Title from Parent" OnClickCallback="ShowMessage">
    Content of the child component is supplied by the parent component.
</Child>

<p>@message</p>

@code {
    private string? message;

    private void ShowMessage(MouseEventArgs e)
    {
        message = $"Blaze a new trail with Blazor! ({e.ScreenX}:{e.ScreenY})";
    }
}

Parent.razor:

@page "/parent"

<h1>Parent-child example</h1>

<Child Title="Panel Title from Parent" OnClickCallback="ShowMessage">
    Content of the child component is supplied by the parent component.
</Child>

<p>@message</p>

@code {
    private string message;

    private void ShowMessage(MouseEventArgs e)
    {
        message = $"Blaze a new trail with Blazor! ({e.ScreenX}:{e.ScreenY})";
    }
}

Parent.razor:

@page "/parent"

<h1>Parent-child example</h1>

<Child Title="Panel Title from Parent" OnClickCallback="ShowMessage">
    Content of the child component is supplied by the parent component.
</Child>

<p>@message</p>

@code {
    private string message;

    private void ShowMessage(MouseEventArgs e)
    {
        message = $"Blaze a new trail with Blazor! ({e.ScreenX}:{e.ScreenY})";
    }
}

Wanneer de knop wordt geselecteerd in het ChildComponent.

De Parent-componentmethode ShowMessage wordt aangeroepen. message wordt bijgewerkt en weergegeven in het Parent onderdeel.
Een aanroep naar StateHasChanged is niet vereist in de methode van de callback (ShowMessage). StateHasChanged wordt automatisch aangeroepen om de Parent component opnieuw weer te geven, net zoals kindgebeurtenissen componenthernieuwde weergeving activeren in gebeurtenishandlers die binnen het kindcomponent worden uitgevoerd. Zie ASP.NET Core Razor component renderingvoor meer informatie.

Gebruik EventCallback en EventCallback<TValue> voor gebeurtenisafhandeling en bindingsonderdeelparameters.

Geef de voorkeur aan de sterk getypte EventCallback<TValue> over EventCallback. EventCallback<TValue> biedt verbeterde foutfeedback wanneer een onjuist type wordt gebruikt, zodat gebruikers van het onderdeel naar de juiste implementatie kunnen leiden. Net als bij andere UI-gebeurtenis-handlers is het opgeven van de gebeurtenisparameter optioneel. Gebruik EventCallback wanneer er geen waarde wordt doorgegeven aan de callback.

EventCallback en EventCallback<TValue> staan asynchrone delegaten toe. EventCallback is zwak getypt en laat het doorgeven van argumenten van elk type toe in InvokeAsync(Object). EventCallback<TValue> is sterk getypt en vereist het doorgeven van een T argument in InvokeAsync(T) dat kan worden toegewezen aan TValue.

Roep een EventCallback of EventCallback<TValue> aan met InvokeAsync en wacht op het Task.

await OnClickCallback.InvokeAsync({ARGUMENT});

In het voorgaande voorbeeld is de {ARGUMENT} tijdelijke aanduiding een optioneel argument.

Het volgende ouder-kind voorbeeld demonstreert de techniek.

Child2.razor:

<h3>Child2 Component</h3>

<button @onclick="TriggerEvent">Click Me</button>

@code {
    [Parameter]
    public EventCallback<string> OnClickCallback { get; set; }

    private async Task TriggerEvent()
    {
        await OnClickCallback.InvokeAsync("Blaze It!");
    }
}

ParentChild2.razor:

@page "/parent-child-2"

<PageTitle>Parent Child 2</PageTitle>

<h1>Parent Child 2 Example</h1>

<div>
    <Child2 OnClickCallback="(value) => { message1 = value; }" />
    @message1
</div>

<div>
    <Child2 OnClickCallback=
        "async (value) => { await Task.Delay(2000); message2 = value; }" /> 
    @message2
</div>

@code {
    private string message1 = string.Empty;
    private string message2 = string.Empty;
}

Het tweede exemplaar van het Child2 onderdeel toont een asynchrone callback en de nieuwe message2 waarde wordt toegewezen en weergegeven met een vertraging van twee seconden.

Het voorkomen van standaardacties

Gebruik de @on{DOM EVENT}:preventDefault directive attribuut om de standaardactie voor een gebeurtenis te voorkomen, waarbij de {DOM EVENT} tijdelijke aanduiding een DOM-gebeurtenis is.

Wanneer een sleutel is geselecteerd op een invoerapparaat en het element de focus heeft op een tekstvak, wordt in een browser normaal gesproken het teken van de sleutel in het tekstvak weergegeven. In het volgende voorbeeld wordt het standaardgedrag voorkomen door het directive-attribuut @onkeydown:preventDefault op te geven. Wanneer de focus op het <input> element ligt, wordt de teller verhoogd met de toetsreeks Shift++. Het + teken is niet toegewezen aan de waarde van het <input> element. Voor meer informatie over keydown, zie het MDN Web Docs: Document: keydown-evenement.

EventHandler6.razor:

@page "/event-handler-6"

<PageTitle>Event Handler 6</PageTitle>

<h1>Event Handler Example 6</h1>

<p>For this example, give the <code><input></code> focus.</p>

<p>
    <label>
        Count of '+' key presses: 
        <input value="@count" @onkeydown="KeyHandler" @onkeydown:preventDefault />
    </label>
</p>

@code {
    private int count = 0;

    private void KeyHandler(KeyboardEventArgs e)
    {
        if (e.Key == "+")
        {
            count++;
        }
    }
}

EventHandler6.razor:

@page "/event-handler-6"

<PageTitle>Event Handler 6</PageTitle>

<h1>Event Handler Example 6</h1>

<p>For this example, give the <code><input></code> focus.</p>

<p>
    <label>
        Count of '+' key presses: 
        <input value="@count" @onkeydown="KeyHandler" @onkeydown:preventDefault />
    </label>
</p>

@code {
    private int count = 0;

    private void KeyHandler(KeyboardEventArgs e)
    {
        if (e.Key == "+")
        {
            count++;
        }
    }
}

EventHandlerExample6.razor:

@page "/event-handler-example-6"

<p>
    <input value="@count" @onkeydown="KeyHandler" @onkeydown:preventDefault />
</p>

@code {
    private int count = 0;

    private void KeyHandler(KeyboardEventArgs e)
    {
        if (e.Key == "+")
        {
            count++;
        }
    }
}

EventHandlerExample6.razor:

@page "/event-handler-example-6"

<p>
    <input value="@count" @onkeydown="KeyHandler" @onkeydown:preventDefault />
</p>

@code {
    private int count = 0;

    private void KeyHandler(KeyboardEventArgs e)
    {
        if (e.Key == "+")
        {
            count++;
        }
    }
}

EventHandlerExample6.razor:

@page "/event-handler-example-6"

<p>
    <input value="@count" @onkeydown="KeyHandler" @onkeydown:preventDefault />
</p>

@code {
    private int count = 0;

    private void KeyHandler(KeyboardEventArgs e)
    {
        if (e.Key == "+")
        {
            count++;
        }
    }
}

EventHandlerExample6.razor:

@page "/event-handler-example-6"

<p>
    <input value="@count" @onkeydown="KeyHandler" @onkeydown:preventDefault />
</p>

@code {
    private int count = 0;

    private void KeyHandler(KeyboardEventArgs e)
    {
        if (e.Key == "+")
        {
            count++;
        }
    }
}

Het opgeven van het @on{DOM EVENT}:preventDefault kenmerk zonder een waarde is gelijk aan @on{DOM EVENT}:preventDefault="true".

Een expressie is ook een toegestane waarde van het kenmerk. In het volgende voorbeeld shouldPreventDefault is een bool veld ingesteld op of truefalse:

<input @onkeydown:preventDefault="shouldPreventDefault" />

...

@code {
    private bool shouldPreventDefault = true;
}

Gebeurtenisdoorgifte stoppen

Gebruik het @on{DOM EVENT}:stopPropagation instructiekenmerk om de doorgifte van gebeurtenissen binnen het Blazor bereik te stoppen. {DOM EVENT} is een tijdelijke aanduiding voor een DOM-gebeurtenis.

Het effect van het richtlijnkenmerk is beperkt tot het stopPropagation bereik en strekt zich niet uit tot de HTML-DOM. Gebeurtenissen moeten naar de HTML DOM-wortel worden doorgegeven voordat Blazor erop kan reageren. Voor een mechanisme om doorgifte van HTML DOM-gebeurtenissen te voorkomen, kunt u de volgende aanpak overwegen:

Haal het pad van de gebeurtenis op door aan te roepen Event.composedPath().
Filter gebeurtenissen op basis van de samengestelde gebeurtenisdoelen (EventTarget).

In het volgende voorbeeld voorkomt het aanvinken van het selectievakje dat klikgebeurtenissen van het tweede kind <div> worden doorgegeven aan het bovenliggende <div> item. Aangezien doorgegeven klikgebeurtenissen normaal gesproken de OnSelectParentDiv methode activeren, leidt het selecteren van het tweede onderliggende <div> ertoe dat het bericht van het bovenliggende <div> verschijnt, tenzij het selectievakje is aangevinkt.

EventHandler7.razor:

@page "/event-handler-7"

<PageTitle>Event Handler 7</PageTitle>

<h1>Event Handler Example 7</h1>

<div>
    <b>stopPropagation</b>: @stopPropagation
</div>

<div>
    <button @onclick="StopPropagation">
        Stop Propagation (stopPropagation = true)
    </button>
    <button @onclick="EnablePropagation">
        Enable Propagation (stopPropagation = false)
    </button>
</div>

<div class="m-1 p-1 border border-primary" @onclick="OnSelectParentDiv">
    <h3>Parent div</h3>

    <div class="m-1 p-1 border" @onclick="OnSelectChildDiv">
        Child div that never stops propagation to the parent div when 
        selected.
    </div>

    <div class="m-1 p-1 border" @onclick="OnSelectChildDiv" 
            @onclick:stopPropagation="stopPropagation">
        Child div that stops propagation when selected if 
        <b>stopPropagation</b> is <b>true</b>.
    </div>
</div>

<p>
    @message
</p>

@code {
    private bool stopPropagation = false;
    private string? message;

    private void StopPropagation() => stopPropagation = true;

    private void EnablePropagation() => stopPropagation = false;

    private void OnSelectParentDiv() => 
        message = $"The parent div was selected. {DateTime.Now}";

    private void OnSelectChildDiv() => 
        message = $"The child div was selected. {DateTime.Now}";
}

EventHandler7.razor:

@page "/event-handler-7"

<PageTitle>Event Handler 7</PageTitle>

<h1>Event Handler Example 7</h1>

<div>
    <b>stopPropagation</b>: @stopPropagation
</div>

<div>
    <button @onclick="StopPropagation">
        Stop Propagation (stopPropagation = true)
    </button>
    <button @onclick="EnablePropagation">
        Enable Propagation (stopPropagation = false)
    </button>
</div>

<div class="m-1 p-1 border border-primary" @onclick="OnSelectParentDiv">
    <h3>Parent div</h3>

    <div class="m-1 p-1 border" @onclick="OnSelectChildDiv">
        Child div that never stops propagation to the parent div when 
        selected.
    </div>

    <div class="m-1 p-1 border" @onclick="OnSelectChildDiv" 
            @onclick:stopPropagation="stopPropagation">
        Child div that stops propagation when selected if 
        <b>stopPropagation</b> is <b>true</b>.
    </div>
</div>

<p>
    @message
</p>

@code {
    private bool stopPropagation = false;
    private string? message;

    private void StopPropagation() => stopPropagation = true;

    private void EnablePropagation() => stopPropagation = false;

    private void OnSelectParentDiv() => 
        message = $"The parent div was selected. {DateTime.Now}";

    private void OnSelectChildDiv() => 
        message = $"The child div was selected. {DateTime.Now}";
}

EventHandlerExample7.razor:

@page "/event-handler-example-7"

<div>
    <b>stopPropagation</b>: @stopPropagation
</div>

<div>
    <button @onclick="StopPropagation">
        Stop Propagation (stopPropagation = true)
    </button>
    <button @onclick="EnablePropagation">
        Enable Propagation (stopPropagation = false)
    </button>
</div>

<div class="m-1 p-1 border border-primary" @onclick="OnSelectParentDiv">
    <h3>Parent div</h3>

    <div class="m-1 p-1 border" @onclick="OnSelectChildDiv">
        Child div that never stops propagation to the parent div when 
        selected.
    </div>

    <div class="m-1 p-1 border" @onclick="OnSelectChildDiv" 
            @onclick:stopPropagation="stopPropagation">
        Child div that stops propagation when selected if 
        <b>stopPropagation</b> is <b>true</b>.
    </div>
</div>

<p>
    @message
</p>

@code {
    private bool stopPropagation = false;
    private string? message;

    private void StopPropagation() => stopPropagation = true;

    private void EnablePropagation() => stopPropagation = false;

    private void OnSelectParentDiv() =>
        message = $"The parent div was selected. {DateTime.Now}";

    private void OnSelectChildDiv() =>
        message = $"The child div was selected. {DateTime.Now}";
}

EventHandlerExample7.razor:

@page "/event-handler-example-7"

<div>
    <b>stopPropagation</b>: @stopPropagation
</div>

<div>
    <button @onclick="StopPropagation">
        Stop Propagation (stopPropagation = true)
    </button>
    <button @onclick="EnablePropagation">
        Enable Propagation (stopPropagation = false)
    </button>
</div>

<div class="m-1 p-1 border border-primary" @onclick="OnSelectParentDiv">
    <h3>Parent div</h3>

    <div class="m-1 p-1 border" @onclick="OnSelectChildDiv">
        Child div that never stops propagation to the parent div when 
        selected.
    </div>

    <div class="m-1 p-1 border" @onclick="OnSelectChildDiv" 
            @onclick:stopPropagation="stopPropagation">
        Child div that stops propagation when selected if 
        <b>stopPropagation</b> is <b>true</b>.
    </div>
</div>

<p>
    @message
</p>

@code {
    private bool stopPropagation = false;
    private string? message;

    private void StopPropagation() => stopPropagation = true;

    private void EnablePropagation() => stopPropagation = false;

    private void OnSelectParentDiv() =>
        message = $"The parent div was selected. {DateTime.Now}";

    private void OnSelectChildDiv() =>
        message = $"The child div was selected. {DateTime.Now}";
}

EventHandlerExample7.razor:

@page "/event-handler-example-7"

<div>
    <b>stopPropagation</b>: @stopPropagation
</div>

<div>
    <button @onclick="StopPropagation">
        Stop Propagation (stopPropagation = true)
    </button>
    <button @onclick="EnablePropagation">
        Enable Propagation (stopPropagation = false)
    </button>
</div>

<div class="m-1 p-1 border border-primary" @onclick="OnSelectParentDiv">
    <h3>Parent div</h3>

    <div class="m-1 p-1 border" @onclick="OnSelectChildDiv">
        Child div that never stops propagation to the parent div when 
        selected.
    </div>

    <div class="m-1 p-1 border" @onclick="OnSelectChildDiv" 
            @onclick:stopPropagation="stopPropagation">
        Child div that stops propagation when selected if 
        <b>stopPropagation</b> is <b>true</b>.
    </div>
</div>

<p>
    @message
</p>

@code {
    private bool stopPropagation = false;
    private string message;

    private void StopPropagation() => stopPropagation = true;

    private void EnablePropagation() => stopPropagation = false;

    private void OnSelectParentDiv() =>
        message = $"The parent div was selected. {DateTime.Now}";

    private void OnSelectChildDiv() =>
        message = $"The child div was selected. {DateTime.Now}";
}

EventHandlerExample7.razor:

@page "/event-handler-example-7"

<div>
    <b>stopPropagation</b>: @stopPropagation
</div>

<div>
    <button @onclick="StopPropagation">
        Stop Propagation (stopPropagation = true)
    </button>
    <button @onclick="EnablePropagation">
        Enable Propagation (stopPropagation = false)
    </button>
</div>

<div class="m-1 p-1 border border-primary" @onclick="OnSelectParentDiv">
    <h3>Parent div</h3>

    <div class="m-1 p-1 border" @onclick="OnSelectChildDiv">
        Child div that never stops propagation to the parent div when 
        selected.
    </div>

    <div class="m-1 p-1 border" @onclick="OnSelectChildDiv" 
            @onclick:stopPropagation="stopPropagation">
        Child div that stops propagation when selected if 
        <b>stopPropagation</b> is <b>true</b>.
    </div>
</div>

<p>
    @message
</p>

@code {
    private bool stopPropagation = false;
    private string message;

    private void StopPropagation() => stopPropagation = true;

    private void EnablePropagation() => stopPropagation = false;

    private void OnSelectParentDiv() =>
        message = $"The parent div was selected. {DateTime.Now}";

    private void OnSelectChildDiv() =>
        message = $"The child div was selected. {DateTime.Now}";
}

Een element in focus brengen

Roep FocusAsync een elementreferentie aan om een element in code te concentreren. Selecteer in het volgende voorbeeld de knop om het <input> element te concentreren.

EventHandler8.razor:

@page "/event-handler-8"

<PageTitle>Event Handler 8</PageTitle>

<h1>Event Handler Example 8</h1>

<p>Select the button to give the <code><input></code> focus.</p>

<p>
    <label>
        Input: 
        <input @ref="exampleInput" />
    </label>
    
</p>

<button @onclick="ChangeFocus">
    Focus the Input Element
</button>

@code {
    private ElementReference exampleInput;

    private async Task ChangeFocus()
    {
        await exampleInput.FocusAsync();
    }
}

EventHandler8.razor:

@page "/event-handler-8"

<PageTitle>Event Handler 8</PageTitle>

<h1>Event Handler Example 8</h1>

<p>Select the button to give the <code><input></code> focus.</p>

<p>
    <label>
        Input: 
        <input @ref="exampleInput" />
    </label>
    
</p>

<button @onclick="ChangeFocus">
    Focus the Input Element
</button>

@code {
    private ElementReference exampleInput;

    private async Task ChangeFocus()
    {
        await exampleInput.FocusAsync();
    }
}

EventHandlerExample8.razor:

@page "/event-handler-example-8"

<p>
    <input @ref="exampleInput" />
</p>

<button @onclick="ChangeFocus">
    Focus the Input Element
</button>

@code {
    private ElementReference exampleInput;

    private async Task ChangeFocus()
    {
        await exampleInput.FocusAsync();
    }
}

EventHandlerExample8.razor:

@page "/event-handler-example-8"

<p>
    <input @ref="exampleInput" />
</p>

<button @onclick="ChangeFocus">
    Focus the Input Element
</button>

@code {
    private ElementReference exampleInput;

    private async Task ChangeFocus()
    {
        await exampleInput.FocusAsync();
    }
}

Feedback

Is deze pagina nuttig?

Delen via

ASP.NET Core-gebeurtenisafhandeling Blazor

Gebeurtenis-handlers delegeren

Ingebouwde gebeurtenisargumenten

Aangepaste gebeurtenisargumenten

Algemene configuratie

Voorbeeld van een aangepast klembordplak-evenement

Lambda-expressies

EventCallback

Het voorkomen van standaardacties

Gebeurtenisdoorgifte stoppen

Een element in focus brengen

Feedback

Aanvullende resources