ASP.NET Core Blazor zpracování událostí

  • Článek
  • 13 min ke čtení

Zadejte obslužné rutiny události delegáta v Razor kódu komponenty s @on{DOM EVENT}="{DELEGATE}" Razor syntaxí:

Pro zpracování událostí:

  • Asynchronní obslužné rutiny událostí delegáta, které vracejí a Task jsou podporované.
  • Obslužné rutiny události delegáta automaticky spouštějí vykreslování uživatelského rozhraní, takže není nutné ručně volat StateHasChanged .
  • Výjimky jsou protokolovány.

Následující kód:

  • Volá UpdateHeading metodu, když je vybráno tlačítko v uživatelském rozhraní.
  • Volá CheckChanged metodu, když se v uživatelském rozhraní změní zaškrtávací políčko.

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

V následujícím příkladu UpdateHeading :

  • Se nazývá asynchronně, když je vybráno tlačítko.
  • Před aktualizací záhlaví počká dvě sekundy.

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

Argumenty události

Předdefinované argumenty události

Pro události, které podporují typ argumentu události, je nutné zadat parametr události v definici metody události pouze v případě, že je typ události použit v metodě. V následujícím příkladu MouseEventArgs se používá v ReportPointerLocation metodě pro nastavení textu zprávy, který ohlásí souřadnice myši, když uživatel vybere tlačítko v uživatelském rozhraní.

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

Podporované EventArgs jsou uvedené v následující tabulce.

Událost Třída Události a poznámky k model DOM (Document Object Model) (DOM)
Schránka ClipboardEventArgs oncut, oncopy, onpaste
Myší DragEventArgs ondrag, ondragstart, ondragenter, ondragleave, ondragover, ondrop, ondragend

DataTransfer a DataTransferItem uchovávají přetažená data položky.

Implementujte přetahování Blazor aplikací pomocí zprostředkovatele komunikace js pomocí rozhraní APIpro přetahování HTML.
Chyba ErrorEventArgs onerror
Událost EventArgs Obecné
onactivate, onbeforeactivate, onbeforedeactivate, ondeactivate, onfullscreenchange, onfullscreenerror, onloadeddata, onloadedmetadata, onpointerlockchange, onpointerlockerror, onreadystatechange, onscroll

Schránka
onbeforecut, onbeforecopy, onbeforepaste

Vstup
oninvalid, onreset, onselect, onselectionchange, onselectstart, onsubmit

Média
oncanplay, oncanplaythrough, oncuechange, ondurationchange, onemptied, onended, onpause, onplay, onplaying, onratechange, onseeked, onseeking, onstalled, onstop, onsuspend, ontimeupdate, ontoggle, onvolumechange, onwaiting

EventHandlers obsahuje atributy pro konfiguraci mapování mezi názvy událostí a typy argumentů události.
Zaměření FocusEventArgs onfocus, onblur, onfocusin, onfocusout

Nezahrnuje podporu pro relatedTarget .
Vstup ChangeEventArgs onchange, oninput
Klávesnice KeyboardEventArgs onkeydown, onkeypress, onkeyup
Myš MouseEventArgs onclick, oncontextmenu, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout
Ukazatel myši PointerEventArgs onpointerdown, onpointerup, onpointercancel, onpointermove, onpointerover, onpointerout, onpointerenter, onpointerleave, ongotpointercapture, onlostpointercapture
Kolečko myši WheelEventArgs onwheel, onmousewheel
Průběh ProgressEventArgs onabort, onload, onloadend, onloadstart, onprogress, ontimeout
Dotykové ovládání TouchEventArgs ontouchstart, ontouchend, ontouchmove, ontouchenter, ontouchleave, ontouchcancel

TouchPoint představuje jeden kontaktní bod na zařízení citlivém na dotykové ovládání.

Další informace naleznete v následujících zdrojích:

Vlastní argumenty události

Blazor podporuje vlastní argumenty události, které umožňují předávání libovolných dat do obslužných rutin událostí .NET s vlastními událostmi.

Obecná konfigurace

Vlastní události s argumenty vlastní události jsou obecně povolené pomocí následujících kroků.

  1. V jazyce JavaScript definujte funkci pro vytvoření objektu argumentu vlastní události ze zdrojové události:

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

  2. Zaregistrujte vlastní událost pomocí předchozí obslužné rutiny v wwwroot/index.html ( Blazor WebAssembly ) nebo Pages/_Layout.cshtml ( Blazor Server ) hned za Blazor <script> :

    <script>
  Blazor.registerCustomEventType('customevent', {
    createEventArgs: eventArgsCreator;
  });
</script>

    Poznámka

    Volání registerCustomEventType je provedeno ve skriptu pouze jednou pro každou událost.

  3. Definujte třídu pro argumenty události:

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

  4. Navedením vlastní události s argumenty události přidejte EventHandlerAttribute anotaci atributu pro vlastní událost. Třída nevyžaduje členy:

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

  5. Zaregistrujte obslužnou rutinu události v jednom nebo více prvcích HTML. Přístup k datům, která byla předána z JavaScriptu v metodě obslužné rutiny delegáta:

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

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

Pokaždé, když je vlastní událost aktivována v modelu DOM, obslužná rutina události je volána s daty předanými z JavaScriptu.

Pokud se pokoušíte aktivovat vlastní událost, bubbles musí být povolená nastavením její hodnoty na true . V opačném případě událost nedosáhne Blazor obslužné rutiny pro zpracování do vlastní EventHandlerAttribute metody jazyka C#. Další informace najdete v tématu MDN web Docs: šíření událostí.

Příklad události vložení vlastní schránky

Následující příklad obdrží vlastní událost vložení do schránky, která obsahuje dobu vložení a vložení textu uživatele.

Deklarujete vlastní název ( oncustompaste ) pro událost a třídu .NET ( CustomPasteEventArgs ), která bude uchovávat argumenty události pro tuto událost:

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

Přidejte kód jazyka JavaScript k zadání dat pro EventArgs podtřídu. V wwwroot/index.html souboru nebo Pages/_Layout.cshtml přidejte následující <script> značku a obsah hned za Blazor skript. Následující příklad zpracovává pouze vkládání textu, ale můžete použít libovolná rozhraní JavaScript API pro práci s uživateli, kteří vkládají další typy dat, například obrázky.

wwwroot/index.html ( Blazor WebAssembly ) nebo Pages/_Layout.cshtml ( Blazor Server ) hned za Blazor skriptem:

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

Předchozí kód oznamuje prohlížeči, že když dojde k nativní paste události:

  • Vyvolat custompaste událost.
  • Zadejte data argumentů události pomocí uvedené vlastní logiky:

Konvence názvů událostí se liší od .NET a JavaScriptu:

  • V rozhraní .NET jsou názvy událostí s předponou " on ".
  • V jazyce JavaScript nemají názvy událostí předponu.

V Razor součásti připojte vlastní obslužnou rutinu k elementu.

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

Výrazy lambda

Výrazy lambda jsou podporovány jako obslužná rutina události delegáta.

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

Je často vhodné uzavřít další hodnoty pomocí parametrů metod jazyka C#, jako je například při iteraci přes sadu prvků. Následující příklad vytvoří tři tlačítka, z nichž každý volá UpdateHeading a předá následující data:

  • Argument události ( MouseEventArgs ) v e .
  • Číslo tlačítka v 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}";
    }
}

Poznámka

Nepoužívejte proměnnou smyčky přímo ve výrazu lambda, například i v předchozím for příkladu smyčky. V opačném případě se stejná proměnná používá ve všech výrazech lambda, což má za následek použití stejné hodnoty ve všech výrazech lambda. Vždy Zachyťte hodnotu proměnné v místní proměnné a pak ji použijte. V předchozím příkladu:

  • Proměnná smyčky i je přiřazena k buttonNumber .
  • buttonNumber se používá ve výrazu lambda.

Vytvoření velkého počtu delegátů událostí ve smyčce může způsobit špatný výkon vykreslování. Další informace naleznete v tématu BlazorASP.NET Core osvědčené postupy z oblasti výkonu.

Vnořenou eventCallback

Běžný scénář s vnořenými komponentami spustí metodu nadřazené komponenty, když dojde k události podřízené součásti. onclickUdálost, ke které dochází v podřízené součásti, je běžným případem použití. Chcete-li zobrazit události napříč komponentami, použijte EventCallback . Nadřazená komponenta může přiřadit metodu zpětného volání podřízené součásti EventCallback .

Následující Child Komponenta ukazuje, jak onclick je obslužná rutina tlačítka nastavena pro příjem EventCallback delegáta z ukázky ParentComponent . EventCallbackJe typu MouseEventArgs , který je vhodný pro onclick událost z periferního zařízení.

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

ParentKomponenta nastaví podřízenou položku EventCallback<TValue> ( OnClickCallback ) na její ShowMessage metodu.

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

Když je vybráno tlačítko v ChildComponent :

  • Parent ShowMessage Je volána metoda součásti. message aktualizuje a zobrazí se v Parent součásti.
  • Volání StateHasChanged není vyžadováno v metodě zpětného volání ( ShowMessage ). StateHasChanged se nazývá automaticky pro revykreslování Parent komponenty, stejně jako podřízené události, spouštějí se revykreslování komponenty v obslužných rutinách události, které jsou spouštěny v rámci podřízeného objektu. Další informace naleznete v tématu BlazorASP.NET Core vykreslování komponent.

EventCallback a EventCallback<TValue> povolují asynchronní delegáty. EventCallback je slabě typované a umožňuje předat libovolný argument typu v InvokeAsync(Object) . EventCallback<TValue> je silného typu a vyžaduje předání T argumentu v InvokeAsync(T) , který je možné přiřadit TValue .

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

Vyvolat EventCallback nebo EventCallback<TValue> s InvokeAsync a očekávat Task :

await OnClickCallback.InvokeAsync(arg);

Použití EventCallback a EventCallback<TValue> pro zpracování událostí a parametry komponenty vazby.

Preferovat silného typu EventCallback<TValue> přes EventCallback . EventCallback<TValue> poskytuje rozšířenou zpětnou vazbu k chybám uživatelům součásti. Podobně jako u jiných obslužných rutin událostí uživatelského rozhraní je zadání parametru události volitelné. Použijte EventCallback v případě, že zpětnému volání není předáno žádné číslo.

Zabránit výchozím akcím

Pomocí @on{DOM EVENT}:preventDefault atributu direktiva zabráníte výchozí akci pro událost, kde {DOM EVENT} zástupný symbol je událost model DOM (Document Object Model) (DOM).

Když je vybraný klíč na vstupním zařízení a fokus prvku je v textovém poli, prohlížeč normálně zobrazuje znak klíče v textovém poli. V následujícím příkladu je výchozím chováním znemožněno zadáním @onkeydown:preventDefault atributu direktiva. Když je fokus na <input> prvku, čítač se zvýší s posunemklávesovou sekvencí + + . +Znak není přiřazen k <input> hodnotě elementu. Další informace o naleznete v keydown tématu MDN Web Docs: Document: keydown Event.

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

Určení @on{DOM EVENT}:preventDefault atributu bez hodnoty je ekvivalentní @on{DOM EVENT}:preventDefault="true" .

Výraz je také povolenou hodnotou atributu. V následujícím příkladu shouldPreventDefault je bool pole nastaveno na buď true nebo false :

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

...

@code {
    private bool shouldPreventDefault = true;
}

Zastavit šíření událostí

@on{DOM EVENT}:stopPropagationChcete-li zastavit šíření událostí v rámci oboru, použijte atribut direktiva Blazor . {DOM EVENT} je zástupný symbol pro událost model DOM (Document Object Model) (DOM).

stopPropagationÚčinek atributu direktivy je omezen na Blazor obor a nerozšiřuje se na HTML DOM. Události musí být šířeny do kořenového adresáře HTML DOM, než Blazor je mohou fungovat. Chcete-li zabránit šíření událostí HTML modelu HTML, vezměte v úvahu následující postup:

V následujícím příkladu zaškrtnutím políčka zabráníte kliknutí na události z druhého podřízeného <div> objektu na nadřazenou položku <div> . Vzhledem k tomu, že události šířené po kliknutí obvykle aktivují tuto OnSelectParentDiv metodu, výběr druhé podřízené <div> výsledky v nadřazené <div> zprávě, pokud je políčko zaškrtnuto.

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

Zaměření prvku

Zavolejte FocusAsync na odkaz elementu pro zaměření prvku v kódu. V následujícím příkladu vyberte tlačítko pro zaměření <input> prvku.

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

Zadejte obslužné rutiny události delegáta v Razor kódu komponenty s @on{DOM EVENT}="{DELEGATE}" Razor syntaxí:

Pro zpracování událostí:

  • Asynchronní obslužné rutiny událostí delegáta, které vracejí a Task jsou podporované.
  • Obslužné rutiny události delegáta automaticky spouštějí vykreslování uživatelského rozhraní, takže není nutné ručně volat StateHasChanged .
  • Výjimky jsou protokolovány.

Následující kód:

  • Volá UpdateHeading metodu, když je vybráno tlačítko v uživatelském rozhraní.
  • Volá CheckChanged metodu, když se v uživatelském rozhraní změní zaškrtávací políčko.

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

V následujícím příkladu UpdateHeading :

  • Se nazývá asynchronně, když je vybráno tlačítko.
  • Před aktualizací záhlaví počká dvě sekundy.

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

Argumenty události

Pro události, které podporují typ argumentu události, je nutné zadat parametr události v definici metody události pouze v případě, že je typ události použit v metodě. V následujícím příkladu MouseEventArgs se používá v ReportPointerLocation metodě pro nastavení textu zprávy, který ohlásí souřadnice myši, když uživatel vybere tlačítko v uživatelském rozhraní.

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

Podporované EventArgs jsou uvedené v následující tabulce.

Událost Třída Události a poznámky k model DOM (Document Object Model) (DOM)
Schránka ClipboardEventArgs oncut, oncopy, onpaste
Myší DragEventArgs ondrag, ondragstart, ondragenter, ondragleave, ondragover, ondrop, ondragend

DataTransfer a DataTransferItem uchovávají přetažená data položky.

Implementujte přetahování Blazor aplikací pomocí zprostředkovatele komunikace js pomocí rozhraní APIpro přetahování HTML.
Chyba ErrorEventArgs onerror
Událost EventArgs Obecné
onactivate, onbeforeactivate, onbeforedeactivate, ondeactivate, onfullscreenchange, onfullscreenerror, onloadeddata, onloadedmetadata, onpointerlockchange, onpointerlockerror, onreadystatechange, onscroll

Schránka
onbeforecut, onbeforecopy, onbeforepaste

Vstup
oninvalid, onreset, onselect, onselectionchange, onselectstart, onsubmit

Média
oncanplay, oncanplaythrough, oncuechange, ondurationchange, onemptied, onended, onpause, onplay, onplaying, onratechange, onseeked, onseeking, onstalled, onstop, onsuspend, ontimeupdate, ontoggle, onvolumechange, onwaiting

EventHandlers obsahuje atributy pro konfiguraci mapování mezi názvy událostí a typy argumentů události.
Zaměření FocusEventArgs onfocus, onblur, onfocusin, onfocusout

Nezahrnuje podporu pro relatedTarget .
Vstup ChangeEventArgs onchange, oninput
Klávesnice KeyboardEventArgs onkeydown, onkeypress, onkeyup
Myš MouseEventArgs onclick, oncontextmenu, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout
Ukazatel myši PointerEventArgs onpointerdown, onpointerup, onpointercancel, onpointermove, onpointerover, onpointerout, onpointerenter, onpointerleave, ongotpointercapture, onlostpointercapture
Kolečko myši WheelEventArgs onwheel, onmousewheel
Průběh ProgressEventArgs onabort, onload, onloadend, onloadstart, onprogress, ontimeout
Dotykové ovládání TouchEventArgs ontouchstart, ontouchend, ontouchmove, ontouchenter, ontouchleave, ontouchcancel

TouchPoint představuje jeden kontaktní bod na zařízení citlivém na dotykové ovládání.

Další informace naleznete v následujících zdrojích:

Výrazy lambda

Výrazy lambda jsou podporovány jako obslužná rutina události delegáta.

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

Je často vhodné uzavřít další hodnoty pomocí parametrů metod jazyka C#, jako je například při iteraci přes sadu prvků. Následující příklad vytvoří tři tlačítka, z nichž každý volá UpdateHeading a předá následující data:

  • Argument události ( MouseEventArgs ) v e .
  • Číslo tlačítka v 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}";
    }
}

Poznámka

Nepoužívejte proměnnou smyčky přímo ve výrazu lambda, například i v předchozím for příkladu smyčky. V opačném případě se stejná proměnná používá ve všech výrazech lambda, což má za následek použití stejné hodnoty ve všech výrazech lambda. Vždy Zachyťte hodnotu proměnné v místní proměnné a pak ji použijte. V předchozím příkladu:

  • Proměnná smyčky i je přiřazena k buttonNumber .
  • buttonNumber se používá ve výrazu lambda.

Vytvoření velkého počtu delegátů událostí ve smyčce může způsobit špatný výkon vykreslování. Další informace naleznete v tématu BlazorASP.NET Core osvědčené postupy z oblasti výkonu.

Vnořenou eventCallback

Běžný scénář s vnořenými komponentami spustí metodu nadřazené komponenty, když dojde k události podřízené komponenty. Běžným případem použití je událost, ke které dochází v onclick podřízené komponentě. Pokud chcete vystavit události napříč komponentami, použijte EventCallback . Nadřazená komponenta může metodě zpětného volání přiřadit metodu podřízené komponenty EventCallback .

Následující komponenta ukazuje, jak je obslužná rutina tlačítka nastavená tak, aby přijímal delegáta z Child onclick třídy EventCallback ParentComponent . Typ EventCallback se zadá pomocí MouseEventArgs , což je vhodné pro událost z onclick periferního zařízení.

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

Komponenta Parent nastaví podřízený objekt ( ) na jeho EventCallback<TValue> OnClickCallback ShowMessage metodu.

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

Když je tlačítko vybrané v ChildComponent :

  • Volá Parent se ShowMessage metoda komponenty. message se aktualizuje a zobrazí v Parent komponentě .
  • Volání metody StateHasChanged není vyžadováno v metodě zpětného volání ( ShowMessage ). StateHasChanged se volá automaticky pro opětovné vykreslení komponenty, stejně jako podřízené události aktivují opětovné vykreslení komponenty v obslužných rutinách událostí, které se Parent spouštějí v rámci podřízeného okruhu. Další informace naleznete v tématu BlazorASP.NET Core vykreslování komponent.

EventCallback a EventCallback<TValue> povolují asynchronní delegáty. EventCallback je slabě typovaný a umožňuje předávání libovolného argumentu typu v InvokeAsync(Object) . EventCallback<TValue>je silného typu a vyžaduje předání T argumentu v InvokeAsync(T) , který je možné přiřadit . TValue

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

Vyvolání nebo EventCallback pomocí a čekání na EventCallback<TValue> InvokeAsync Task :

await OnClickCallback.InvokeAsync(arg);

Pro EventCallback zpracování událostí a vazby parametrů komponent použijte a EventCallback<TValue> .

Upřednostňte silného typu EventCallback<TValue> před EventCallback . EventCallback<TValue> poskytuje uživatelům komponenty vylepšenou zpětnou vazbu k chybám. Podobně jako u jiných obslužných rutin událostí uživatelského rozhraní je zadání parametru události volitelné. Použijte EventCallback v případě, že zpětnému volání není předána žádná hodnota.

Zabránění výchozím akcím

Pomocí atributu direktivy můžete zabránit výchozí akci události, kde zástupný symbol je @on{DOM EVENT}:preventDefault {DOM EVENT} model DOM (Document Object Model) (DOM).

Když je na vstupním zařízení vybrán klíč a fokus prvku je na textovém poli, prohlížeč obvykle zobrazí znak klíče v textovém poli. V následujícím příkladu je výchozí chování zabráněn zadáním @onkeydown:preventDefault atributu direktivy. Když je fokus na <input> prvku, čítač se zvýší pomocí klávesy Shift + + . Znak + není přiřazen k <input> hodnotě prvku. Další informace o najdete keydown v události . MDN Web Docs: Document: keydown

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

Zadání @on{DOM EVENT}:preventDefault atributu bez hodnoty je ekvivalentní hodnotě @on{DOM EVENT}:preventDefault="true" .

Výraz je také povolenou hodnotou atributu. V následujícím příkladu shouldPreventDefault je pole nastavené na nebo bool true false :

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

...

@code {
    private bool shouldPreventDefault = true;
}

Zastavení šíření událostí

K zastavení šíření událostí v rámci oboru použijte atribut @on{DOM EVENT}:stopPropagation Blazor direktivy . {DOM EVENT}je zástupný symbol události model DOM (Document Object Model) (DOM).

Účinek stopPropagation atributu direktivy je omezen na obor a Blazor nerozšiřuje se na HTML DOM. Události musí být rozšířeny do kořenového adresáře modelu DOM HTML, Blazor aby s nimi bylo možné jednat. Pokud chcete zabránit šíření událostí modelu HTML DOM, zvažte následující přístup:

V následujícím příkladu zaškrtnutí políčka zabráníte šíření událostí kliknutí z druhého podřízeného objektu <div> do nadřazeného objektu <div> . Vzhledem k tomu, že se obvykle mají spustit šíření událostí kliknutí, zobrazí se po výběru druhého podřízeného prvku nadřazená zpráva, pokud OnSelectParentDiv <div> políčko není <div> zaškrtnuté.

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

Zaměření elementu

Volání FocusAsync odkazu na prvek pro fokus elementu v kódu. V následujícím příkladu vyberte tlačítko, na které chcete <input> prvek zaměřit.

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

Určení obslužných rutin událostí delegáta ve Razor značkách komponent pomocí @on{DOM EVENT}="{DELEGATE}" Razor syntaxe:

  • Zástupný {DOM EVENT} symbol je model DOM (Document Object Model) (DOM) (například click ).
  • Zástupný {DELEGATE} symbol je obslužná rutina události delegáta C#.

Pro zpracování událostí:

  • Jsou podporovány obslužné rutiny událostí asynchronního Task delegátu, které vrací .
  • Delegování obslužných rutin událostí automaticky aktivuje vykreslení uživatelského rozhraní, takže není potřeba ručně volat StateHasChanged .
  • Výjimky se protokolují.

Následující kód:

  • Volá UpdateHeading metodu , když je tlačítko vybráno v uživatelském rozhraní.
  • Volá CheckChanged metodu při změně zaškrtávacího políčka v uživatelském rozhraní.

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

V následujícím příkladu UpdateHeading :

  • Při výběru tlačítka se volá asynchronně.
  • Před aktualizací nadpisu počká dvě sekundy.

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

Argumenty událostí

Pro události, které podporují typ argumentu události, je zadání parametru události v definici metody události nezbytné pouze v případě, že je typ události použit v metodě . V následujícím příkladu se používá v metodě k nastavení textu zprávy, který hlásí souřadnice myši, když uživatel vybere MouseEventArgs ReportPointerLocation tlačítko v uživatelském rozhraní.

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

Podporované EventArgs možnosti jsou uvedené v následující tabulce.

Událost Třída model DOM (Document Object Model) (DOM) a poznámky
Schránka ClipboardEventArgs oncut, oncopy, onpaste
Přetáhněte DragEventArgs ondrag, ondragstart, ondragenter, ondragleave, ondragover, ondrop, ondragend

DataTransfer a DataTransferItem podržte přetažená data položky.

Implementujte přetahování v Blazor aplikacích pomocí zprostředkovatele komunikace JS s rozhraním HTML API pro přetahování.
Chyba ErrorEventArgs onerror
Událost EventArgs Obecné
onactivate, onbeforeactivate, onbeforedeactivate, ondeactivate, onfullscreenchange, onfullscreenerror, onloadeddata, onloadedmetadata, onpointerlockchange, onpointerlockerror, onreadystatechange, onscroll

Schránka
onbeforecut, onbeforecopy, onbeforepaste

Vstup
oninvalid, onreset, onselect, onselectionchange, onselectstart, onsubmit

Média
oncanplay, oncanplaythrough, oncuechange, ondurationchange, onemptied, onended, onpause, onplay, onplaying, onratechange, onseeked, onseeking, onstalled, onstop, onsuspend, ontimeupdate, onvolumechange, onwaiting

EventHandlers obsahuje atributy pro konfiguraci mapování mezi názvy událostí a typy argumentů událostí.
Zaměření FocusEventArgs onfocus, onblur, onfocusin, onfocusout

Nezahrnuje podporu pro relatedTarget .
Vstup ChangeEventArgs onchange, oninput
Klávesnice KeyboardEventArgs onkeydown, onkeypress, onkeyup
Myš MouseEventArgs onclick, oncontextmenu, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout
Ukazatel myši PointerEventArgs onpointerdown, onpointerup, onpointercancel, onpointermove, onpointerover, onpointerout, onpointerenter, onpointerleave, ongotpointercapture, onlostpointercapture
Kolečko myši WheelEventArgs onwheel, onmousewheel
Průběh ProgressEventArgs onabort, onload, onloadend, onloadstart, onprogress, ontimeout
Dotykové ovládání TouchEventArgs ontouchstart, ontouchend, ontouchmove, ontouchenter, ontouchleave, ontouchcancel

TouchPoint představuje jeden kontaktní bod na zařízení citlivém na dotykové ovládání.

Další informace naleznete v následujících zdrojích:

Výrazy lambda

Výrazy lambda jsou podporovány jako obslužná rutina události delegáta.

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

Často je vhodné uzavřít další hodnoty pomocí parametrů metody jazyka C#, například při iteraci přes sadu prvků. Následující příklad vytvoří tři tlačítka, z nichž každé volá UpdateHeading a předává následující data:

  • Argument události ( MouseEventArgs ) v e .
  • Číslo tlačítka v 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}";
    }
}

Poznámka

Nepoužívejte proměnnou smyčky přímo ve výrazu lambda, například i v předchozím for příkladu smyčky. V opačném případě je stejná proměnná použita všemi výrazy lambda, což vede k použití stejné hodnoty ve všech výrazech lambda. Vždy zachyťte hodnotu proměnné v místní proměnné a pak ji použijte. V předchozím příkladu:

  • Proměnná smyčky i je přiřazena proměnné buttonNumber .
  • buttonNumber se používá ve výrazu lambda.

Vytvoření velkého počtu delegátů událostí ve smyčce může způsobit nízký výkon vykreslování. Další informace naleznete v tématu BlazorASP.NET Core osvědčené postupy z oblasti výkonu.

Zpětné volání událostí

Běžný scénář s vnořenými komponentami spustí metodu nadřazené komponenty, když dojde k události podřízené komponenty. Běžným případem použití je událost, ke které dochází v onclick podřízené komponentě. Pokud chcete vystavit události napříč komponentami, použijte EventCallback . Nadřazená komponenta může metodě zpětného volání přiřadit metodu podřízené komponenty EventCallback .

Následující komponenta ukazuje, jak je obslužná rutina tlačítka nastavená tak, aby přijímal delegáta z Child onclick třídy EventCallback ParentComponent . Typ EventCallback se zadá pomocí MouseEventArgs , což je vhodné pro událost z onclick periferního zařízení.

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

Komponenta Parent nastaví podřízený objekt ( ) na jeho EventCallback<TValue> OnClickCallback ShowMessage metodu.

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

Když je tlačítko vybrané v ChildComponent :

  • Volá Parent se metoda ShowMessage komponenty. message se aktualizuje a zobrazí v Parent komponentě .
  • Volání metody StateHasChanged není nutné v metodě zpětného volání ( ShowMessage ). StateHasChanged se volá automaticky pro opětovné vykreslení komponenty, stejně jako podřízené události aktivují opětovné vykreslení komponenty v obslužných rutinách událostí, které se Parent spouštějí v rámci podřízeného okruhu. Další informace naleznete v tématu BlazorASP.NET Core vykreslování komponent.

EventCallback a EventCallback<TValue> povolují asynchronní delegáty. EventCallback je slabě typovaný a umožňuje předávání libovolného argumentu typu v InvokeAsync(Object) . EventCallback<TValue>je silného typu a vyžaduje předání T argumentu v InvokeAsync(T) , který je možné přiřadit . TValue

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

Vyvolání nebo EventCallback pomocí a čekání na EventCallback<TValue> InvokeAsync Task :

await OnClickCallback.InvokeAsync(arg);

Pro EventCallback zpracování událostí a vazby parametrů komponent použijte a EventCallback<TValue> .

Upřednostňte silného typu EventCallback<TValue> před EventCallback . EventCallback<TValue> poskytuje uživatelům komponenty vylepšenou zpětnou vazbu k chybám. Podobně jako u jiných obslužných rutin událostí uživatelského rozhraní je zadání parametru události volitelné. Použijte EventCallback v případě, že zpětnému volání není předána žádná hodnota.

Zabránění výchozím akcím

Pomocí atributu direktivy můžete zabránit výchozí akci události, kde zástupný symbol je @on{DOM EVENT}:preventDefault {DOM EVENT} model DOM (Document Object Model) (DOM).

Když je na vstupním zařízení vybrán klíč a fokus prvku je na textovém poli, prohlížeč obvykle zobrazí znak klíče v textovém poli. V následujícím příkladu je výchozí chování zabráněn zadáním @onkeydown:preventDefault atributu direktivy. Když je fokus na <input> elementu, čítač se zvýší pomocí klávesy Shift + + . Znak + není přiřazen k <input> hodnotě prvku. Další informace o najdete keydown v události . MDN Web Docs: Document: keydown

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

Zadání @on{DOM EVENT}:preventDefault atributu bez hodnoty je ekvivalentní hodnotě @on{DOM EVENT}:preventDefault="true" .

Výraz je také povolenou hodnotou atributu. V následujícím příkladu shouldPreventDefault je pole nastavené na nebo bool true false :

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

...

@code {
    private bool shouldPreventDefault = true;
}

Zastavení šíření událostí

K zastavení šíření událostí v rámci oboru použijte atribut @on{DOM EVENT}:stopPropagation Blazor direktivy . {DOM EVENT}je zástupný symbol události model DOM (Document Object Model) (DOM).

Účinek atributu direktivy je omezen na obor a stopPropagation Blazor nerozšiřuje se na HTML DOM. Události musí být rozšířeny do kořenového adresáře modelu DOM HTML, Blazor aby s nimi bylo možné jednat. Pokud chcete zabránit šíření událostí modelu HTML DOM, zvažte následující přístup:

V následujícím příkladu zaškrtnutí políčka zabráníte šíření událostí kliknutí z druhého podřízeného objektu <div> do nadřazeného objektu <div> . Vzhledem k tomu, že se obvykle mají spustit šíření událostí kliknutí, při výběru druhého podřízeného objektu se zobrazí nadřazená zpráva, pokud OnSelectParentDiv <div> políčko není <div> zaškrtnuté.

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