ASP.NET Core Blazor-Ereignisbehandlung

Artikel
01/28/2023
39 Minuten Lesedauer

In diesem Artikel werden die Features zur Ereignisbehandlung von Blazor erläutert, einschließlich Ereignisargumenttypen, Ereignisrückrufe und die Verwaltung von Standardereignissen in Browsern.

Angeben von Delegatereignishandlern im Razor-Komponentenmarkup mit @on{DOM EVENT}="{DELEGATE}"Razor-Syntax:

Der Platzhalter {DOM EVENT} ist ein DOM-Ereignis (Dokumentobjektmodell) (z. B. click).
Der Platzhalter {DELEGATE} ist der C#-Delegatereignishandler.

Für Ereignisbehandlung gilt Folgendes:

Asynchrone Delegatereignishandler, die ein Task-Element zurückgeben, werden unterstützt.
Delegatereignishandler lösen automatisch Rendering der Benutzeroberfläche aus, sodass StateHasChanged nicht manuell aufgerufen werden muss.
Ausnahmen werden protokolliert.

Der folgende Code

Ruft die UpdateHeading-Methode auf, wenn die Schaltfläche in der Benutzeroberfläche ausgewählt wird.
ruft die CheckChanged-Methode auf, wenn das Kontrollkästchen auf der Benutzeroberfläche geändert wird.

Pages/EventHandlerExample1.razor:

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

<h1>@currentHeading</h1>

<p>
    <label>
        New title
        <input @bind="newHeading" />
    </label>
    <button @onclick="UpdateHeading">
        Update heading
    </button>
</p>

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

@code {
    private string currentHeading = "Initial heading";
    private string? newHeading;
    private string checkedMessage = "Not changed yet";

    private void UpdateHeading()
    {
        currentHeading = $"{newHeading}!!!";
    }

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

Im folgenden Beispiel gilt für UpdateHeading:

Wird asynchron aufgerufen, wenn die Schaltfläche ausgewählt wird.
Wartet zwei Sekunden, bevor die Überschrift aktualisiert wird.

Pages/EventHandlerExample2.razor:

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

<h1>@currentHeading</h1>

<p>
    <label>
        New title
        <input @bind="newHeading" />
    </label>
    <button @onclick="UpdateHeading">
        Update heading
    </button>
</p>

@code {
    private string currentHeading = "Initial heading";
    private string? newHeading;

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

        currentHeading = $"{newHeading}!!!";
    }
}

Ereignisargumente

Integrierte Ereignisargumente

Bei Ereignissen, die einen Ereignisargumenttyp unterstützen, ist die Angabe eines Ereignisparameters in der Definition der Ereignismethode nur erforderlich, wenn der Ereignistyp in der Methode verwendet wird. Im folgenden Beispiel wird MouseEventArgs in der ReportPointerLocation-Methode verwendet, um Meldungstext festzulegen, der die Mauskoordinaten meldet, wenn der Benutzer eine Schaltfläche in der Benutzeroberfläche auswählt.

Pages/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}";
    }
}

Die unterstützten EventArgs sind in der folgenden Tabelle aufgeführt.

event	Klasse	Hinweise zum Dokumentobjektmodell (DOM)
Zwischenablage	ClipboardEventArgs
Ziehen	DragEventArgs	DataTransfer und DataTransferItem speichern gezogene Elementdaten. Implementiert Drag & Drop in Blazor-Apps mit JS-Interop und der HTML-Drag & Drop-API.
Fehler	ErrorEventArgs
event	EventArgs	EventHandlers enthält Attribute zum Konfigurieren der Zuordnungen zwischen Ereignisnamen und Ereignisargumenttypen.
Fokus	FocusEventArgs	Umfasst nicht die Unterstützung für `relatedTarget`.
Eingabe	ChangeEventArgs
Tastatur	KeyboardEventArgs
Maus	MouseEventArgs
Mauszeiger	PointerEventArgs
Mausrad	WheelEventArgs
Fortschritt	ProgressEventArgs
Touch	TouchEventArgs	TouchPoint stellt einen einzelnen Kontaktpunkt auf einem Gerät mit Berührungseingabe dar.

Weitere Informationen finden Sie in den folgenden Ressourcen:

EventArgs-Klassen in der ASP.NET Core-Verweisquelle (dotnet/aspnetcore, main-Branch)

Hinweis

Dokumentationslinks zur .NET-Referenzquelle laden in der Regel den Standardbranch des Repositorys, der die aktuelle Entwicklung für das nächste Release von .NET darstellt. Um ein Tag für ein bestimmtes Release auszuwählen, wählen Sie diesen mit der Dropdownliste Switch branches or tags (Branches oder Tags wechseln) aus. Weitere Informationen finden Sie unter How to select a version tag of ASP.NET Core source code (dotnet/AspNetCore.Docs #26205) (Auswählen eines Versionstags von ASP.NET Core-Quellcode (dotnet/AspNetCore.Docs #26205)).
EventHandlers enthält Attribute zum Konfigurieren der Zuordnungen zwischen Ereignisnamen und Ereignisargumenttypen.

Benutzerdefinierte Ereignisargumente

Blazor unterstützt benutzerdefinierte Ereignisargumente, die es Ihnen ermöglichen, beliebige Daten mit benutzerdefinierten Ereignissen an .NET-Ereignishandler zu übergeben.

Allgemeine Konfiguration

Benutzerdefinierte Ereignisse mit benutzerdefinierten Ereignisargumenten werden in der Regel mit den folgenden Schritten aktiviert.

Definieren Sie in JavaScript eine Funktion zum Erstellen des benutzerdefinierten Ereignisargumentobjekts aus dem Quellereignis:

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

Registrieren Sie das benutzerdefinierte Ereignis mit dem vorhergehenden Handler in wwwroot/index.html (Blazor WebAssembly) oder Pages/_Host.cshtml (Blazor Server) direkt nach dem Blazor-<script>:
```
<script>
  Blazor.registerCustomEventType('customevent', {
    createEventArgs: eventArgsCreator
  });
</script>
```
Hinweis

Der Aufruf von registerCustomEventType wird nur ein Mal pro Ereignis in einem Skript ausgeführt.

Definieren Sie eine Klasse für die Ereignisargumente:

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

Verbinden Sie das benutzerdefinierte Ereignis mit den Ereignisargumenten ein, indem Sie eine EventHandlerAttribute-Attributanmerkung für das benutzerdefinierte Ereignis hinzufügen. Die Klasse erfordert keine Member. Beachten Sie, dass die Klasse EventHandlers genannt werden muss, um vom Razor-Compiler gefunden zu werden, aber Sie sollten sie in einen Namespace einfügen, der für Ihre App spezifisch ist:
```
[EventHandler("oncustomevent", typeof(CustomEventArgs), enableStopPropagation: true, enablePreventDefault: true)]
public static class EventHandlers
{
}
```

Registrieren Sie den Ereignishandler für mindestens ein HTML-Element. Greifen Sie auf die Daten zu, die von JavaScript in der Delegathandlermethode übergeben wurden:

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

@code
{
    private void HandleCustomEvent(CustomEventArgs eventArgs)
    {
        // eventArgs.CustomProperty1
        // eventArgs.CustomProperty2
    }
}

Wenn das @oncustomevent-Attribut von IntelliSense nicht erkannt wird, stellen Sie sicher, dass die Komponente oder die _Imports.razor-Datei eine @using-Anweisung für den Namespace enthält, der die EventHandler-Klasse enthält.

Wenn das benutzerdefinierte Ereignis im DOM ausgelöst wird, wird der Ereignishandler mit den Daten aufgerufen, die von JavaScript übergeben werden.

Wenn Sie versuchen, ein benutzerdefiniertes Ereignis auszulösen, muss bubbles aktiviert werden, indem der zugehörige Wert auf true festgelegt wird. Andernfalls erreicht das Ereignis nicht den Blazor-Handler für Verarbeitung in die benutzerdefinierte C#-EventHandlerAttribute Methode. Weitere Informationen finden Sie unter MDN-Webdokumentation: Event Bubbling.

Beispiel für Ereignis für benutzerdefiniertes Einfügen aus der Zwischenablage

Im folgenden Beispiel wird ein benutzerdefiniertes Einfügeereignis aus der Zwischenablage empfangen, das die Uhrzeit des Einfügens und den eingefügten Text des Benutzers enthält.

Deklarieren Sie einen benutzerdefinierten Namen (oncustompaste) für das Ereignis und eine .NET-Klasse (CustomPasteEventArgs), die die Ereignisargumente für dieses Ereignis enthält:

CustomEvents.cs:

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

Fügen Sie JavaScript-Code hinzu, um Daten für die EventArgs-Unterklasse bereitzustellen. Fügen Sie in der Datei wwwroot/index.html oder Pages/_Host.cshtml das folgende <script>-Tag und den folgenden Inhalt direkt nach dem Blazor-Skript hinzu. Das folgende Beispiel behandelt nur das Einfügen von Text, aber Sie könnten beliebige JavaScript-APIs verwenden, um Benutzer zu berücksichtigen, die andere Datentypen einfügen, z. B. Bilder.

wwwroot/index.html (Blazor WebAssembly) oder Pages/_Host.cshtml (Blazor Server) unmittelbar nach dem Blazor-Skript:

<script>
  Blazor.registerCustomEventType('custompaste', {
      browserEventName: 'paste',
      createEventArgs: event => {
        return {
          eventTimestamp: new Date(),
          pastedData: event.clipboardData.getData('text')
        };
      }
  });
</script>

Der Code oben weist den Browser an, die folgenden Aktionen auszuführen, wenn ein natives paste-Ereignis auftritt:

Auslösen eines custompaste-Ereignisses.
Bereitstellen der Ereignisargumentdaten mithilfe der angegebenen benutzerdefinierten Logik:
- Erstellen eines neuen Datums für eventTimestamp.
- Abrufen der Daten aus der Zwischenablage für pastedData als Text. Weitere Informationen finden Sie unter MDN-Webdokumentation: ClipboardEvent.clipboardData.

Ereignisnamenskonventionen unterscheiden sich in .NET und JavaScript:

In .NET haben Ereignisnamen das Präfix on.
In JavaScript haben Ereignisnamen kein Präfix.

Fügen Sie in einer Razor-Komponente den benutzerdefinierten Handler an ein Element an.

Pages/CustomPasteArguments.razor:

@page "/custom-paste-arguments"

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

Lambdaausdrücke

Lambdaausdrücke werden als Delegatereignishandler unterstützt.

Pages/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";
}

Es ist häufig praktisch, zusätzliche Werte mit C#-Methodenparametern hinzuzufügen, z. B. bei der Iteration über eine Reihe von Elementen. Im folgenden Beispiel werden drei Schaltflächen erstellt, von denen jede UpdateHeading aufruft und die folgenden Daten übergibt:

Ein Ereignisargument (MouseEventArgs) in e.
Die Schaltflächennummer in buttonNumber.

Pages/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}";
    }
}

Das Erstellen einer hohen Anzahl von Ereignisdelegaten in einer Schleife kann zu einer schlechten Renderingleistung führen. Weitere Informationen finden Sie unter Bewährte Methoden für die Leistung von Blazor in ASP.NET Core.

Verwenden Sie die direkte Verwendung einer Schleifenvariablen in einem Lambdaausdruck wie i im vorangehenden for-Schleifenbeispiel. Ansonsten wird dieselbe Variable von allen Lambdaausdrücken verwendet, sodass der gleiche Wert in allen Lambdaausdrücken verwendet wird. Erfassen Sie den Wert der Variablen in einer lokalen Variablen. Im vorherigen Beispiel:

Die Schleifenvariable i wird buttonNumber zugewiesen.
buttonNumber wird im Lambdaausdruck verwendet.

Verwenden Sie alternativ eine foreach Schleife mit Enumerable.Range, welche nicht vom vorherigen Problem betroffen ist:

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

EventCallback

Ein häufiges Szenario mit geschachtelten Komponenten führt die Methode einer übergeordneten Komponente aus, wenn ein Ereignis einer untergeordneten Komponente auftritt. Das ein onclick-Ereignis in der untergeordneten Komponente auftritt, ist ein gängiger Anwendungsfall. Um Ereignisse komponentenübergreifend darzustellen, verwenden Sie ein EventCallback. Eine übergeordnete Komponente kann dem EventCallback einer untergeordneten Komponente eine Rückrufmethode zuweisen.

Die folgende Child-Komponente zeigt, wie der onclick-Handler einer Schaltfläche so eingerichtet wird, dass er einen EventCallback-Delegaten von der ParentComponent des Beispiels empfängt. EventCallback ist mit MouseEventArgs typisiert, was für ein onclick-Ereignis von einem Peripheriegerät angemessen ist.

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

Die Parent-Komponente legt EventCallback<TValue> (OnClickCallback) des untergeordneten Elements auf seine ShowMessage-Methode fest.

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

Wenn die Schaltfläche in der ChildComponent ausgewählt ist:

Die ShowMessage-Methode der Parent-Komponente wird aufgerufen. message wird aktualisiert und in der Parent-Komponente angezeigt.
Ein Aufruf von StateHasChanged ist in der Methode des Rückrufs (ShowMessage) nicht erforderlich. StateHasChanged wird automatisch aufgerufen, um die Parent-Komponente zu rendern, so wie Ereignisse untergeordneter Elemente das Rendern von Komponenten in Ereignishandlern auslösen, die innerhalb des untergeordneten Elements ausgeführt werden. Weitere Informationen finden Sie unter Rendering von Razor-Komponenten in ASP.NET Core.

EventCallback und EventCallback<TValue> gestatten asynchrone Delegate. EventCallback ist schwach typisiert und erlaubt das Übergeben von Argumenten eines beliebigen Typs in InvokeAsync(Object). EventCallback<TValue> ist stark typisiert und erfordert das Übergeben eines T-Arguments in InvokeAsync(T), das TValue zugewiesen werden kann.

<ChildComponent 
    OnClickCallback="@(async () => { await Task.Yield(); messageText = "Blaze It!"; })" />

Rufen Sie ein EventCallback oder EventCallback<TValue> mit InvokeAsync auf, und warten Sie auf das Task:

await OnClickCallback.InvokeAsync(arg);

Verwenden Sie EventCallback und EventCallback<TValue> für die Ereignisbehandlung und die Bindung von Komponentenparametern.

Bevorzugen Sie das stark typisierte EventCallback<TValue> gegenüber dem EventCallback. EventCallback<TValue> bietet Benutzern der Komponente erweitertes Fehlerfeedback. Ähnlich wie bei anderen UI-Ereignishandlern ist die Angabe des Ereignisparameters optional. Verwenden Sie EventCallback, wenn kein Wert an den Rückruf übergeben wurde.

Verhindern von Standardaktionen

Verwenden Sie das Anweisungsattribut @on{DOM EVENT}:preventDefault, um die Standardaktion für ein Ereignis zu verhindern, bei dem der Platzhalter {DOM EVENT} ein DOM-Ereignis (Dokumentobjektmodell) ist.

Wenn ein Schlüssel auf einem Eingabegerät ausgewählt wird und der Elementfokus auf einem Textfeld liegt, zeigt ein Browser normalerweise das Zeichen des Schlüssels in dem Textfeld an. Im folgenden Beispiel wird das Standardverhalten durch die Angabe des Direktivenattributs @onkeydown:preventDefault verhindert. Wenn sich der Fokus auf dem <input>-Element befindet, wird der Zähler mit der Tastenkombination UMSCHALT++ inkrementiert. Das Zeichen + wird nicht dem Wert des <input>-Elements zugewiesen. Weitere Informationen zu keydown finden Sie unter MDN Web Docs: Document: keydown-Ereignis.

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

Die Angabe des Attributs @on{DOM EVENT}:preventDefault ohne Wert ist gleichbedeutend mit @on{DOM EVENT}:preventDefault="true".

Ein Ausdruck ist ebenfalls ein zulässiger Wert des Attributs. Im folgenden Beispiel ist shouldPreventDefault ein bool-Feld, das entweder auf true oder false festgelegt ist:

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

...

@code {
    private bool shouldPreventDefault = true;
}

Beenden der Ereignisweitergabe

Verwenden Sie das Anweisungsattribut @on{DOM EVENT}:stopPropagation, um die Ereignispropagierung im Blazor-Bereich zu beenden. {DOM EVENT} ist ein Platzhalter für ein Dokumentobjektmodell-Ereignis (DOM).

Die Wirkung des Anweisungsattributs stopPropagation ist auf den Blazor-Bereich beschränkt und gilt nicht für das HTML-DOM. Ereignisse müssen an den Stamm des HTML-DOM weitergegeben werden, bevor Blazor auf sie reagieren kann. Um die Weitergabe von HTML-DOM-Ereignissen zu verhindern, sollten Sie den folgenden Ansatz befolgen:

Rufen Sie den Pfad des Ereignisses durch Aufrufen von Event.composedPath() ab.
Filtern Sie Ereignisse basierend auf den zusammengesetzten Ereigniszielen (EventTarget).

Im folgenden Beispiel wird die Weitergabe von Klickereignissen vom zweiten untergeordneten <div>-Element an das übergeordnete <div>-Element verhindert, wenn das Kontrollkästchen aktiviert wird. Da weitergegebene „click“-Ereignisse normalerweise die Methode OnSelectParentDiv auslösen, führt das Auswählen des zweiten untergeordneten <div>-Elements dazu, dass die übergeordnete <div>-Meldung angezeigt wird, es sei denn, das Kontrollkästchen ist aktiviert.

Pages/EventHandlerExample7.razor:

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

<label>
    <input @bind="stopPropagation" type="checkbox" />
    Stop Propagation
</label>

<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 doesn't stop propagation when selected.
    </div>

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

<p>
    @message
</p>

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

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

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

Fokussieren eines Elements

Rufen Sie FocusAsync für einen Elementverweis auf, um den Fokus auf einem Element im Code zu platzieren. Wählen Sie im folgenden Beispiel die Schaltfläche aus, um den Fokus auf dem <input>-Element zu platzieren.

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

Angeben von Delegatereignishandlern im Razor-Komponentenmarkup mit @on{DOM EVENT}="{DELEGATE}"Razor-Syntax:

Der Platzhalter {DOM EVENT} ist ein DOM-Ereignis (Dokumentobjektmodell) (z. B. click).
Der Platzhalter {DELEGATE} ist der C#-Delegatereignishandler.

Für Ereignisbehandlung gilt Folgendes:

Asynchrone Delegatereignishandler, die ein Task-Element zurückgeben, werden unterstützt.
Delegatereignishandler lösen automatisch Rendering der Benutzeroberfläche aus, sodass StateHasChanged nicht manuell aufgerufen werden muss.
Ausnahmen werden protokolliert.

Der folgende Code

Ruft die UpdateHeading-Methode auf, wenn die Schaltfläche in der Benutzeroberfläche ausgewählt wird.
ruft die CheckChanged-Methode auf, wenn das Kontrollkästchen auf der Benutzeroberfläche geändert wird.

Pages/EventHandlerExample1.razor:

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

<h1>@currentHeading</h1>

<p>
    <label>
        New title
        <input @bind="newHeading" />
    </label>
    <button @onclick="UpdateHeading">
        Update heading
    </button>
</p>

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

@code {
    private string currentHeading = "Initial heading";
    private string? newHeading;
    private string checkedMessage = "Not changed yet";

    private void UpdateHeading()
    {
        currentHeading = $"{newHeading}!!!";
    }

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

Im folgenden Beispiel gilt für UpdateHeading:

Wird asynchron aufgerufen, wenn die Schaltfläche ausgewählt wird.
Wartet zwei Sekunden, bevor die Überschrift aktualisiert wird.

Pages/EventHandlerExample2.razor:

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

<h1>@currentHeading</h1>

<p>
    <label>
        New title
        <input @bind="newHeading" />
    </label>
    <button @onclick="UpdateHeading">
        Update heading
    </button>
</p>

@code {
    private string currentHeading = "Initial heading";
    private string? newHeading;

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

        currentHeading = $"{newHeading}!!!";
    }
}

Ereignisargumente

Integrierte Ereignisargumente

Pages/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}";
    }
}

Die unterstützten EventArgs sind in der folgenden Tabelle aufgeführt.

event	Klasse	DOM-Ereignisse und -Anmerkungen (Dokumentobjektmodell)
Zwischenablage	ClipboardEventArgs	`oncut`, `oncopy`, `onpaste`
Ziehen	DragEventArgs	`ondrag`, `ondragstart`, `ondragenter`, `ondragleave`, `ondragover`, `ondrop`, `ondragend` DataTransfer und DataTransferItem speichern gezogene Elementdaten. Implementiert Drag & Drop in Blazor-Apps mit JS-Interop und der HTML-Drag & Drop-API.
Fehler	ErrorEventArgs	`onerror`
event	EventArgs	Allgemein `onactivate`, `onbeforeactivate`, `onbeforedeactivate`, `ondeactivate`, `onfullscreenchange`, `onfullscreenerror`, `onloadeddata`, `onloadedmetadata`, `onpointerlockchange`, `onpointerlockerror`, `onreadystatechange`, `onscroll` Zwischenablage `onbeforecut`, `onbeforecopy`, `onbeforepaste` Eingabe `oninvalid`, `onreset`, `onselect`, `onselectionchange`, `onselectstart`, `onsubmit` Medien `oncanplay`, `oncanplaythrough`, `oncuechange`, `ondurationchange`, `onemptied`, `onended`, `onpause`, `onplay`, `onplaying`, `onratechange`, `onseeked`, `onseeking`, `onstalled`, `onstop`, `onsuspend`, `ontimeupdate`, `ontoggle`, `onvolumechange`, `onwaiting` EventHandlers enthält Attribute zum Konfigurieren der Zuordnungen zwischen Ereignisnamen und Ereignisargumenttypen.
Fokus	FocusEventArgs	`onfocus`, `onblur`, `onfocusin`, `onfocusout` Umfasst nicht die Unterstützung für `relatedTarget`.
Eingabe	ChangeEventArgs	`onchange`, `oninput`
Tastatur	KeyboardEventArgs	`onkeydown`, `onkeypress`, `onkeyup`
Maus	MouseEventArgs	`onclick`, `oncontextmenu`, `ondblclick`, `onmousedown`, `onmouseup`, `onmouseover`, `onmousemove`, `onmouseout`
Mauszeiger	PointerEventArgs	`onpointerdown`, `onpointerup`, `onpointercancel`, `onpointermove`, `onpointerover`, `onpointerout`, `onpointerenter`, `onpointerleave`, `ongotpointercapture`, `onlostpointercapture`
Mausrad	WheelEventArgs	`onwheel`, `onmousewheel`
Status	ProgressEventArgs	`onabort`, `onload`, `onloadend`, `onloadstart`, `onprogress`, `ontimeout`
Toucheingabe	TouchEventArgs	`ontouchstart`, `ontouchend`, `ontouchmove`, `ontouchenter`, `ontouchleave`, `ontouchcancel` TouchPoint stellt einen einzelnen Kontaktpunkt auf einem Gerät mit Berührungseingabe dar.

Weitere Informationen finden Sie unter EventArgs-Klassen in der ASP.NET Core-Verweisquelle (dotnet/aspnetcore, main-Branch).

Hinweis

Dokumentationslinks zur .NET-Referenzquelle laden in der Regel den Standardbranch des Repositorys, der die aktuelle Entwicklung für das nächste Release von .NET darstellt. Um ein Tag für ein bestimmtes Release auszuwählen, wählen Sie diesen mit der Dropdownliste Switch branches or tags (Branches oder Tags wechseln) aus. Weitere Informationen finden Sie unter How to select a version tag of ASP.NET Core source code (dotnet/AspNetCore.Docs #26205) (Auswählen eines Versionstags von ASP.NET Core-Quellcode (dotnet/AspNetCore.Docs #26205)).

Benutzerdefinierte Ereignisargumente

Blazor unterstützt benutzerdefinierte Ereignisargumente, die es Ihnen ermöglichen, beliebige Daten mit benutzerdefinierten Ereignissen an .NET-Ereignishandler zu übergeben.

Allgemeine Konfiguration

Benutzerdefinierte Ereignisse mit benutzerdefinierten Ereignisargumenten werden in der Regel mit den folgenden Schritten aktiviert.

Definieren Sie in JavaScript eine Funktion zum Erstellen des benutzerdefinierten Ereignisargumentobjekts aus dem Quellereignis:

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

Registrieren Sie das benutzerdefinierte Ereignis mit dem vorhergehenden Handler in wwwroot/index.html (Blazor WebAssembly) oder Pages/_Layout.cshtml (Blazor Server) direkt nach dem Blazor-<script>:
```
<script>
  Blazor.registerCustomEventType('customevent', {
    createEventArgs: eventArgsCreator
  });
</script>
```
Hinweis

Der Aufruf von registerCustomEventType wird nur ein Mal pro Ereignis in einem Skript ausgeführt.

Definieren Sie eine Klasse für die Ereignisargumente:

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

Verbinden Sie das benutzerdefinierte Ereignis mit den Ereignisargumenten ein, indem Sie eine EventHandlerAttribute-Attributanmerkung für das benutzerdefinierte Ereignis hinzufügen. Die Klasse erfordert keine Member. Beachten Sie, dass die Klasse EventHandlers genannt werden muss, um vom Razor-Compiler gefunden zu werden, aber Sie sollten sie in einen Namespace einfügen, der für Ihre App spezifisch ist:
```
[EventHandler("oncustomevent", typeof(CustomEventArgs), enableStopPropagation: true, enablePreventDefault: true)]
public static class EventHandlers
{
}
```

Registrieren Sie den Ereignishandler für mindestens ein HTML-Element. Greifen Sie auf die Daten zu, die von JavaScript in der Delegathandlermethode übergeben wurden:

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

@code
{
    private void HandleCustomEvent(CustomEventArgs eventArgs)
    {
        // eventArgs.CustomProperty1
        // eventArgs.CustomProperty2
    }
}

Wenn das benutzerdefinierte Ereignis im DOM ausgelöst wird, wird der Ereignishandler mit den Daten aufgerufen, die von JavaScript übergeben werden.

Beispiel für Ereignis für benutzerdefiniertes Einfügen aus der Zwischenablage

Im folgenden Beispiel wird ein benutzerdefiniertes Einfügeereignis aus der Zwischenablage empfangen, das die Uhrzeit des Einfügens und den eingefügten Text des Benutzers enthält.

Deklarieren Sie einen benutzerdefinierten Namen (oncustompaste) für das Ereignis und eine .NET-Klasse (CustomPasteEventArgs), die die Ereignisargumente für dieses Ereignis enthält:

CustomEvents.cs:

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

Fügen Sie JavaScript-Code hinzu, um Daten für die EventArgs-Unterklasse bereitzustellen. Fügen Sie in der Datei wwwroot/index.html oder Pages/_Layout.cshtml das folgende <script>-Tag und den folgenden Inhalt direkt nach dem Blazor-Skript hinzu. Das folgende Beispiel behandelt nur das Einfügen von Text, aber Sie könnten beliebige JavaScript-APIs verwenden, um Benutzer zu berücksichtigen, die andere Datentypen einfügen, z. B. Bilder.

wwwroot/index.html (Blazor WebAssembly) oder Pages/_Layout.cshtml (Blazor Server) unmittelbar nach dem Blazor-Skript:

<script>
  Blazor.registerCustomEventType('custompaste', {
      browserEventName: 'paste',
      createEventArgs: event => {
        return {
          eventTimestamp: new Date(),
          pastedData: event.clipboardData.getData('text')
        };
      }
  });
</script>

Der Code oben weist den Browser an, die folgenden Aktionen auszuführen, wenn ein natives paste-Ereignis auftritt:

Auslösen eines custompaste-Ereignisses.
Bereitstellen der Ereignisargumentdaten mithilfe der angegebenen benutzerdefinierten Logik:
- Erstellen eines neuen Datums für eventTimestamp.
- Abrufen der Daten aus der Zwischenablage für pastedData als Text. Weitere Informationen finden Sie unter MDN-Webdokumentation: ClipboardEvent.clipboardData.

Ereignisnamenskonventionen unterscheiden sich in .NET und JavaScript:

In .NET haben Ereignisnamen das Präfix on.
In JavaScript haben Ereignisnamen kein Präfix.

Fügen Sie in einer Razor-Komponente den benutzerdefinierten Handler an ein Element an.

Pages/CustomPasteArguments.razor:

@page "/custom-paste-arguments"

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

Lambdaausdrücke

Lambdaausdrücke werden als Delegatereignishandler unterstützt.

Pages/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";
}

Ein Ereignisargument (MouseEventArgs) in e.
Die Schaltflächennummer in buttonNumber.

Pages/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}";
    }
}

Die Schleifenvariable i wird buttonNumber zugewiesen.
buttonNumber wird im Lambdaausdruck verwendet.

Verwenden Sie alternativ eine foreach Schleife mit Enumerable.Range, welche nicht vom vorherigen Problem betroffen ist:

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

EventCallback

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

Die Parent-Komponente legt EventCallback<TValue> (OnClickCallback) des untergeordneten Elements auf seine ShowMessage-Methode fest.

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

Wenn die Schaltfläche in der ChildComponent ausgewählt ist:

Die ShowMessage-Methode der Parent-Komponente wird aufgerufen. message wird aktualisiert und in der Parent-Komponente angezeigt.
Ein Aufruf von StateHasChanged ist in der Methode des Rückrufs (ShowMessage) nicht erforderlich. StateHasChanged wird automatisch aufgerufen, um die Parent-Komponente zu rendern, so wie Ereignisse untergeordneter Elemente das Rendern von Komponenten in Ereignishandlern auslösen, die innerhalb des untergeordneten Elements ausgeführt werden. Weitere Informationen finden Sie unter Rendering von Razor-Komponenten in ASP.NET Core.

<ChildComponent 
    OnClickCallback="@(async () => { await Task.Yield(); messageText = "Blaze It!"; })" />

Rufen Sie ein EventCallback oder EventCallback<TValue> mit InvokeAsync auf, und warten Sie auf das Task:

await OnClickCallback.InvokeAsync(arg);

Verwenden Sie EventCallback und EventCallback<TValue> für die Ereignisbehandlung und die Bindung von Komponentenparametern.

Verhindern von Standardaktionen

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

Die Angabe des Attributs @on{DOM EVENT}:preventDefault ohne Wert ist gleichbedeutend mit @on{DOM EVENT}:preventDefault="true".

Ein Ausdruck ist ebenfalls ein zulässiger Wert des Attributs. Im folgenden Beispiel ist shouldPreventDefault ein bool-Feld, das entweder auf true oder false festgelegt ist:

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

...

@code {
    private bool shouldPreventDefault = true;
}

Beenden der Ereignisweitergabe

Rufen Sie den Pfad des Ereignisses durch Aufrufen von Event.composedPath() ab.
Filtern Sie Ereignisse basierend auf den zusammengesetzten Ereigniszielen (EventTarget).

Pages/EventHandlerExample7.razor:

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

<label>
    <input @bind="stopPropagation" type="checkbox" />
    Stop Propagation
</label>

<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 doesn't stop propagation when selected.
    </div>

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

<p>
    @message
</p>

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

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

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

Fokussieren eines Elements

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

Angeben von Delegatereignishandlern im Razor-Komponentenmarkup mit @on{DOM EVENT}="{DELEGATE}"Razor-Syntax:

Der Platzhalter {DOM EVENT} ist ein DOM-Ereignis (Dokumentobjektmodell) (z. B. click).
Der Platzhalter {DELEGATE} ist der C#-Delegatereignishandler.

Für Ereignisbehandlung gilt Folgendes:

Asynchrone Delegatereignishandler, die ein Task-Element zurückgeben, werden unterstützt.
Delegatereignishandler lösen automatisch Rendering der Benutzeroberfläche aus, sodass StateHasChanged nicht manuell aufgerufen werden muss.
Ausnahmen werden protokolliert.

Der folgende Code

Ruft die UpdateHeading-Methode auf, wenn die Schaltfläche in der Benutzeroberfläche ausgewählt wird.
ruft die CheckChanged-Methode auf, wenn das Kontrollkästchen auf der Benutzeroberfläche geändert wird.

Pages/EventHandlerExample1.razor:

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

<h1>@currentHeading</h1>

<p>
    <label>
        New title
        <input @bind="newHeading" />
    </label>
    <button @onclick="UpdateHeading">
        Update heading
    </button>
</p>

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

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

    private void UpdateHeading()
    {
        currentHeading = $"{newHeading}!!!";
    }

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

Im folgenden Beispiel gilt für UpdateHeading:

Wird asynchron aufgerufen, wenn die Schaltfläche ausgewählt wird.
Wartet zwei Sekunden, bevor die Überschrift aktualisiert wird.

Pages/EventHandlerExample2.razor:

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

<h1>@currentHeading</h1>

<p>
    <label>
        New title
        <input @bind="newHeading" />
    </label>
    <button @onclick="UpdateHeading">
        Update heading
    </button>
</p>

@code {
    private string currentHeading = "Initial heading";
    private string newHeading;

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

        currentHeading = $"{newHeading}!!!";
    }
}

Ereignisargumente

Pages/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}";
    }
}

Die unterstützten EventArgs sind in der folgenden Tabelle aufgeführt.

event	Klasse	DOM-Ereignisse und -Anmerkungen (Dokumentobjektmodell)
Zwischenablage	ClipboardEventArgs	`oncut`, `oncopy`, `onpaste`
Ziehen	DragEventArgs	`ondrag`, `ondragstart`, `ondragenter`, `ondragleave`, `ondragover`, `ondrop`, `ondragend` DataTransfer und DataTransferItem speichern gezogene Elementdaten. Implementiert Drag & Drop in Blazor-Apps mit JS-Interop und der HTML-Drag & Drop-API.
Fehler	ErrorEventArgs	`onerror`
event	EventArgs	Allgemein `onactivate`, `onbeforeactivate`, `onbeforedeactivate`, `ondeactivate`, `onfullscreenchange`, `onfullscreenerror`, `onloadeddata`, `onloadedmetadata`, `onpointerlockchange`, `onpointerlockerror`, `onreadystatechange`, `onscroll` Zwischenablage `onbeforecut`, `onbeforecopy`, `onbeforepaste` Eingabe `oninvalid`, `onreset`, `onselect`, `onselectionchange`, `onselectstart`, `onsubmit` Medien `oncanplay`, `oncanplaythrough`, `oncuechange`, `ondurationchange`, `onemptied`, `onended`, `onpause`, `onplay`, `onplaying`, `onratechange`, `onseeked`, `onseeking`, `onstalled`, `onstop`, `onsuspend`, `ontimeupdate`, `ontoggle`, `onvolumechange`, `onwaiting` EventHandlers enthält Attribute zum Konfigurieren der Zuordnungen zwischen Ereignisnamen und Ereignisargumenttypen.
Fokus	FocusEventArgs	`onfocus`, `onblur`, `onfocusin`, `onfocusout` Umfasst nicht die Unterstützung für `relatedTarget`.
Eingabe	ChangeEventArgs	`onchange`, `oninput`
Tastatur	KeyboardEventArgs	`onkeydown`, `onkeypress`, `onkeyup`
Maus	MouseEventArgs	`onclick`, `oncontextmenu`, `ondblclick`, `onmousedown`, `onmouseup`, `onmouseover`, `onmousemove`, `onmouseout`
Mauszeiger	PointerEventArgs	`onpointerdown`, `onpointerup`, `onpointercancel`, `onpointermove`, `onpointerover`, `onpointerout`, `onpointerenter`, `onpointerleave`, `ongotpointercapture`, `onlostpointercapture`
Mausrad	WheelEventArgs	`onwheel`, `onmousewheel`
Status	ProgressEventArgs	`onabort`, `onload`, `onloadend`, `onloadstart`, `onprogress`, `ontimeout`
Toucheingabe	TouchEventArgs	`ontouchstart`, `ontouchend`, `ontouchmove`, `ontouchenter`, `ontouchleave`, `ontouchcancel` TouchPoint stellt einen einzelnen Kontaktpunkt auf einem Gerät mit Berührungseingabe dar.

Weitere Informationen finden Sie unter EventArgs-Klassen in der ASP.NET Core-Verweisquelle (dotnet/aspnetcore, main-Branch).

Hinweis

Lambdaausdrücke

Lambdaausdrücke werden als Delegatereignishandler unterstützt.

Pages/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";
}

Ein Ereignisargument (MouseEventArgs) in e.
Die Schaltflächennummer in buttonNumber.

Pages/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}";
    }
}

Die Schleifenvariable i wird buttonNumber zugewiesen.
buttonNumber wird im Lambdaausdruck verwendet.

Verwenden Sie alternativ eine foreach Schleife mit Enumerable.Range, welche nicht vom vorherigen Problem betroffen ist:

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

EventCallback

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

Die Parent-Komponente legt EventCallback<TValue> (OnClickCallback) des untergeordneten Elements auf seine ShowMessage-Methode fest.

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

Wenn die Schaltfläche in der ChildComponent ausgewählt ist:

Die ShowMessage-Methode der Parent-Komponente wird aufgerufen. message wird aktualisiert und in der Parent-Komponente angezeigt.
Ein Aufruf von StateHasChanged ist in der Methode des Rückrufs (ShowMessage) nicht erforderlich. StateHasChanged wird automatisch aufgerufen, um die Parent-Komponente zu rendern, so wie Ereignisse untergeordneter Elemente das Rendern von Komponenten in Ereignishandlern auslösen, die innerhalb des untergeordneten Elements ausgeführt werden. Weitere Informationen finden Sie unter Rendering von Razor-Komponenten in ASP.NET Core.

<ChildComponent 
    OnClickCallback="@(async () => { await Task.Yield(); messageText = "Blaze It!"; })" />

Rufen Sie ein EventCallback oder EventCallback<TValue> mit InvokeAsync auf, und warten Sie auf das Task:

await OnClickCallback.InvokeAsync(arg);

Verwenden Sie EventCallback und EventCallback<TValue> für die Ereignisbehandlung und die Bindung von Komponentenparametern.

Verhindern von Standardaktionen

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

Die Angabe des Attributs @on{DOM EVENT}:preventDefault ohne Wert ist gleichbedeutend mit @on{DOM EVENT}:preventDefault="true".

Ein Ausdruck ist ebenfalls ein zulässiger Wert des Attributs. Im folgenden Beispiel ist shouldPreventDefault ein bool-Feld, das entweder auf true oder false festgelegt ist:

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

...

@code {
    private bool shouldPreventDefault = true;
}

Beenden der Ereignisweitergabe

Rufen Sie den Pfad des Ereignisses durch Aufrufen von Event.composedPath() ab.
Filtern Sie Ereignisse basierend auf den zusammengesetzten Ereigniszielen (EventTarget).

Pages/EventHandlerExample7.razor:

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

<label>
    <input @bind="stopPropagation" type="checkbox" />
    Stop Propagation
</label>

<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 doesn't stop propagation when selected.
    </div>

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

<p>
    @message
</p>

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

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

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

Fokussieren eines Elements

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

Angeben von Delegatereignishandlern im Razor-Komponentenmarkup mit @on{DOM EVENT}="{DELEGATE}"Razor-Syntax:

Der Platzhalter {DOM EVENT} ist ein DOM-Ereignis (Dokumentobjektmodell) (z. B. click).
Der Platzhalter {DELEGATE} ist der C#-Delegatereignishandler.

Für Ereignisbehandlung gilt Folgendes:

Asynchrone Delegatereignishandler, die ein Task-Element zurückgeben, werden unterstützt.
Delegatereignishandler lösen automatisch Rendering der Benutzeroberfläche aus, sodass StateHasChanged nicht manuell aufgerufen werden muss.
Ausnahmen werden protokolliert.

Der folgende Code

Ruft die UpdateHeading-Methode auf, wenn die Schaltfläche in der Benutzeroberfläche ausgewählt wird.
ruft die CheckChanged-Methode auf, wenn das Kontrollkästchen auf der Benutzeroberfläche geändert wird.

Pages/EventHandlerExample1.razor:

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

<h1>@currentHeading</h1>

<p>
    <label>
        New title
        <input @bind="newHeading" />
    </label>
    <button @onclick="UpdateHeading">
        Update heading
    </button>
</p>

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

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

    private void UpdateHeading()
    {
        currentHeading = $"{newHeading}!!!";
    }

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

Im folgenden Beispiel gilt für UpdateHeading:

Wird asynchron aufgerufen, wenn die Schaltfläche ausgewählt wird.
Wartet zwei Sekunden, bevor die Überschrift aktualisiert wird.

Pages/EventHandlerExample2.razor:

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

<h1>@currentHeading</h1>

<p>
    <label>
        New title
        <input @bind="newHeading" />
    </label>
    <button @onclick="UpdateHeading">
        Update heading
    </button>
</p>

@code {
    private string currentHeading = "Initial heading";
    private string newHeading;

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

        currentHeading = $"{newHeading}!!!";
    }
}

Ereignisargumente

Pages/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}";
    }
}

Die unterstützten EventArgs sind in der folgenden Tabelle aufgeführt.

event	Klasse	DOM-Ereignisse und -Anmerkungen (Dokumentobjektmodell)
Zwischenablage	ClipboardEventArgs	`oncut`, `oncopy`, `onpaste`
Ziehen	DragEventArgs	`ondrag`, `ondragstart`, `ondragenter`, `ondragleave`, `ondragover`, `ondrop`, `ondragend` DataTransfer und DataTransferItem speichern gezogene Elementdaten. Implementiert Drag & Drop in Blazor-Apps mit JS-Interop und der HTML-Drag & Drop-API.
Fehler	ErrorEventArgs	`onerror`
event	EventArgs	Allgemein `onactivate`, `onbeforeactivate`, `onbeforedeactivate`, `ondeactivate`, `onfullscreenchange`, `onfullscreenerror`, `onloadeddata`, `onloadedmetadata`, `onpointerlockchange`, `onpointerlockerror`, `onreadystatechange`, `onscroll` Zwischenablage `onbeforecut`, `onbeforecopy`, `onbeforepaste` Eingabe `oninvalid`, `onreset`, `onselect`, `onselectionchange`, `onselectstart`, `onsubmit` Medien `oncanplay`, `oncanplaythrough`, `oncuechange`, `ondurationchange`, `onemptied`, `onended`, `onpause`, `onplay`, `onplaying`, `onratechange`, `onseeked`, `onseeking`, `onstalled`, `onstop`, `onsuspend`, `ontimeupdate`, `onvolumechange`, `onwaiting` EventHandlers enthält Attribute zum Konfigurieren der Zuordnungen zwischen Ereignisnamen und Ereignisargumenttypen.
Fokus	FocusEventArgs	`onfocus`, `onblur`, `onfocusin`, `onfocusout` Umfasst nicht die Unterstützung für `relatedTarget`.
Eingabe	ChangeEventArgs	`onchange`, `oninput`
Tastatur	KeyboardEventArgs	`onkeydown`, `onkeypress`, `onkeyup`
Maus	MouseEventArgs	`onclick`, `oncontextmenu`, `ondblclick`, `onmousedown`, `onmouseup`, `onmouseover`, `onmousemove`, `onmouseout`
Mauszeiger	PointerEventArgs	`onpointerdown`, `onpointerup`, `onpointercancel`, `onpointermove`, `onpointerover`, `onpointerout`, `onpointerenter`, `onpointerleave`, `ongotpointercapture`, `onlostpointercapture`
Mausrad	WheelEventArgs	`onwheel`, `onmousewheel`
Status	ProgressEventArgs	`onabort`, `onload`, `onloadend`, `onloadstart`, `onprogress`, `ontimeout`
Toucheingabe	TouchEventArgs	`ontouchstart`, `ontouchend`, `ontouchmove`, `ontouchenter`, `ontouchleave`, `ontouchcancel` TouchPoint stellt einen einzelnen Kontaktpunkt auf einem Gerät mit Berührungseingabe dar.

Weitere Informationen finden Sie unter EventArgs-Klassen in der ASP.NET Core-Verweisquelle (dotnet/aspnetcore, main-Branch).

Hinweis

Lambdaausdrücke

Lambdaausdrücke werden als Delegatereignishandler unterstützt.

Pages/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";
}

Ein Ereignisargument (MouseEventArgs) in e.
Die Schaltflächennummer in buttonNumber.

Pages/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}";
    }
}

Die Schleifenvariable i wird buttonNumber zugewiesen.
buttonNumber wird im Lambdaausdruck verwendet.

Verwenden Sie alternativ eine foreach Schleife mit Enumerable.Range, welche nicht vom vorherigen Problem betroffen ist:

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

EventCallback

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

Die Parent-Komponente legt EventCallback<TValue> (OnClickCallback) des untergeordneten Elements auf seine ShowMessage-Methode fest.

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

Wenn die Schaltfläche in der ChildComponent ausgewählt ist:

Die ShowMessage-Methode der Parent-Komponente wird aufgerufen. message wird aktualisiert und in der Parent-Komponente angezeigt.
Ein Aufruf von StateHasChanged ist in der Methode des Rückrufs (ShowMessage) nicht erforderlich. StateHasChanged wird automatisch aufgerufen, um die Parent-Komponente zu rendern, so wie Ereignisse untergeordneter Elemente das Rendern von Komponenten in Ereignishandlern auslösen, die innerhalb des untergeordneten Elements ausgeführt werden. Weitere Informationen finden Sie unter Rendering von Razor-Komponenten in ASP.NET Core.

<ChildComponent 
    OnClickCallback="@(async () => { await Task.Yield(); messageText = "Blaze It!"; })" />

Rufen Sie ein EventCallback oder EventCallback<TValue> mit InvokeAsync auf, und warten Sie auf das Task:

await OnClickCallback.InvokeAsync(arg);

Verwenden Sie EventCallback und EventCallback<TValue> für die Ereignisbehandlung und die Bindung von Komponentenparametern.

Verhindern von Standardaktionen

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

Die Angabe des Attributs @on{DOM EVENT}:preventDefault ohne Wert ist gleichbedeutend mit @on{DOM EVENT}:preventDefault="true".

Ein Ausdruck ist ebenfalls ein zulässiger Wert des Attributs. Im folgenden Beispiel ist shouldPreventDefault ein bool-Feld, das entweder auf true oder false festgelegt ist:

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

...

@code {
    private bool shouldPreventDefault = true;
}

Beenden der Ereignisweitergabe

Rufen Sie den Pfad des Ereignisses durch Aufrufen von Event.composedPath() ab.
Filtern Sie Ereignisse basierend auf den zusammengesetzten Ereigniszielen (EventTarget).

Pages/EventHandlerExample7.razor:

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

<label>
    <input @bind="stopPropagation" type="checkbox" />
    Stop Propagation
</label>

<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 doesn't stop propagation when selected.
    </div>

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

<p>
    @message
</p>

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

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

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

ASP.NET Core Blazor-Ereignisbehandlung

Ereignisargumente

Integrierte Ereignisargumente

Benutzerdefinierte Ereignisargumente

Allgemeine Konfiguration

Beispiel für Ereignis für benutzerdefiniertes Einfügen aus der Zwischenablage

Lambdaausdrücke

EventCallback

Verhindern von Standardaktionen

Beenden der Ereignisweitergabe

Fokussieren eines Elements

Ereignisargumente

Integrierte Ereignisargumente

Benutzerdefinierte Ereignisargumente

Allgemeine Konfiguration

Beispiel für Ereignis für benutzerdefiniertes Einfügen aus der Zwischenablage

Lambdaausdrücke

EventCallback

Verhindern von Standardaktionen

Beenden der Ereignisweitergabe

Fokussieren eines Elements

Ereignisargumente

Lambdaausdrücke

EventCallback

Verhindern von Standardaktionen

Beenden der Ereignisweitergabe

Fokussieren eines Elements

Ereignisargumente

Lambdaausdrücke

EventCallback

Verhindern von Standardaktionen

Beenden der Ereignisweitergabe

Zusätzliche Ressourcen

Zusätzliche Ressourcen