碼上快樂

相關內容    簡體    繁體

Blazor 事件處理開發指南

本文轉載自   查看原文   2021-07-26 15:00   461    csharp/ dotnet/ Blazor/ DotNet

翻譯自 Waqas Anwar 2021年3月25日的文章 《A Developer’s Guide To Blazor Event Handling》 [1]

A-Developers-Guide-To-Blazor-Event-Handling

如果您正在開發交互式 Web 應用程序，根據不同的應用程序事件和用戶操作動態更新用戶界面是十分常見的做法。這些操作會觸發事件，而作為開發人員，我們的工作是使用一些事件處理技術來處理這些事件。Blazor 內置支持處理多種事件，比如 onclick、onchange 和 onmousemove 等，並為開發者提供了處理這些事件的多種方式。我將在本教程中概述 Blazor 事件處理。此外，我還將介紹如何在 Blazor 中使用事件參數和 Lambda 表達式，以及如何將附加參數傳遞給事件處理程序。

Blazor 事件處理入門

Blazor 中處理事件的基本語法如下所示：

@on[DOM EVENT]="[DELEGATE]"

在上面的語法中

  • [DOM EVENT] 是 DOM 事件的占位符，例如 click、mouseup 等。
  • [DELEGATE] 是 C# 委托事件處理程序的占位符。

假設您要處理按鈕單擊事件，您可以按如下方式使用上述語法：

<button @onclick="Update" />

讓我們通過一些實際的例子來更詳細地介紹一下事件處理。 在 Visual Studio 2019 中創建一個新的 Blazor Server 應用程序，然后添加一個新的 Blazor 組件 Calculator.razor。

@page "/calculator"
 
<h3>Calculator</h3>
 
<div class="form-group">
    <label for="number1">Number 1</label>
    <input type="number" class="form-control" id="number1" @bind="number1">
</div>
<div class="form-group">
    <label for="number2">Number 2</label>
    <input type="number" class="form-control" id="number2" @bind="number2">
</div>
<div class="form-group">
    <label><b>Total: </b>@total</label>
</div>
 
<button class="btn btn-primary" @onclick="Calculate">Calculate</button>
<button class="btn btn-secondary" @onclick="Clear">Clear</button>
 
@code {
    private int number1 = 0;
    private int number2 = 0;
    private int total = 0;
 
    private void Calculate()
    {
        total = number1 + number2;
    }
 
    private void Clear()
    {
        number1 = 0;
        number2 = 0;
        total = 0;
    }
}

上面的組件中有兩個按鈕：Calculate 和 Clear，它們都處理了 onclick 事件，並調用了上面的 @code 代碼塊中編寫的 Calculate 和 Clear 方法。

<button class="btn btn-primary" @onclick="Calculate">Calculate</button>
<button class="btn btn-secondary" @onclick="Clear">Clear</button>

如果您運行這個簡單的示例，將看到類似於以下內容的頁面。在文本框中輸入一些數字，然后按下按鈕查看事件處理的效果。

Simple-Blazor-Event-Handling-Example

如下面的代碼片段所示，Blazor 還支持異步委托事件處理程序。這些處理程序類型會返回一個 Task，在其內部我們可以使用 await 關鍵字調用異步方法。

private async Task Clear()
{
    await Task.Delay(10);
 
    number1 = 0;
    number2 = 0;
    total = 0;
}

理解 Blazor 事件參數

大部分 Blazor 事件支持事件參數，這些參數是攜帶觸發事件的相關信息的對象。例如，KeyboardEventArgs 可以為我們提供用戶按下的按鍵的詳細信息。

讓我們創建一個帶有標准的 HTML div 元素的基本組件，如下所示。

@page "/mouseevents"
 
<h3>Mouse Events</h3>
 
<div style="width: 400px; height: 400px; background: lightblue" @onmousemove="Move"></div>
<label><b>Coordinates: </b>@coordinates</label>
 
@code {
    private string coordinates = "";
 
    private void Move(MouseEventArgs e)
    {
        coordinates = $"{e.ScreenX}:{e.ScreenY}";
    }
}

上面的 div 元素處理 onmousemove 事件並將 MouseEventArgs 傳遞給方法名為 Move 的事件處理程序。然后，Move 事件處理程序使用 MouseEventArgs 類中提供的 ScreenX 和 ScreenY 屬性，用鼠標的 X 和 Y 位置更新本地字段 coordinates。運行應用程序，並嘗試在 div 中移動鼠標，您將看到坐標會實時更新。

Blazor-Mouse-Move-Event-Example

Blazor 支持大量的 EventArgs 對象，但最常用的 EventArgs 如下表所示：

事件 類 DOM 事件
焦點(Focus) FocusEventArgs onfocus, onblur, onfocusin, onfocusout
輸入(Input) ChangeEventArgs onchange, oninput
鍵盤(Keyboard) KeyboardEventArgs onkeydown, onkeypress, onkeyup
鼠標(Mouse) MouseEventArgs onclick, oncontextmenu, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout
鼠標滾輪(Mouse wheel) WheelEventArgs onwheel, onmousewheel
觸控(Touch) TouchEventArgs ontouchstart, ontouchend, ontouchmove, ontouchenter, ontouchleave, ontouchcancel

您可以在微軟 Blazor 文檔頁面[2]上看到 EventArgs 的完整列表。

在 Blazor 事件中使用 Lambda 表達式

Blazor 還支持將 Lambda 表達式作為委托事件處理程序。您應當只在簡單的用例中使用這些表達式，如果有很多的代碼要執行，應避免使用 Lambda 表達式。讓我們修改一下前面的 Calculator 示例，這次使用 Lambda 表達式替代上面的 Calculate 和 Clear 方法。

@page "/calculator"
<h3>Calculator</h3>
<div class="form-group">
    <label for="number1">Number 1</label>
    <input type="number" class="form-control" id="number1" @bind="number1">
</div>
<div class="form-group">
    <label for="number2">Number 2</label>
    <input type="number" class="form-control" id="number2" @bind="number2">
</div>
<div class="form-group">
    <label><b>Total: </b>@total</label>
</div>
 
<button class="btn btn-primary" @onclick="@(e => total = number1 + number2)">Calculate</button>
<button class="btn btn-secondary" @onclick="@(e => total = number1 = number2 = 0)">Clear</button>
 
@code {
    private int number1 = 0;
    private int number2 = 0;
    private int total = 0; 
}

向事件處理程序傳遞附加參數

有時，我們希望根據每個應用程序的需要向事件處理程序傳遞額外的參數。例如，在一個循環中，您可能希望將循環迭代索引號傳遞給事件參數，以便您知道此事件處理程序是針對循環中的哪一項執行的。另一個簡單的例子是，從兩個或多個控件調用相同的事件處理程序，並傳遞控件的引用以處理事件。讓我們用一個基礎的例子來介紹一下這個概念。依照下面的代碼片段再次修改 Calculator 的代碼。

<div class="form-group">
    <label for="number1">Number 1</label>
    <input type="number" class="form-control" id="number1" @bind="number1">
</div>
 
<div class="form-group">
    <label for="number2">Number 2</label>
    <input type="number" class="form-control" id="number2" @bind="number2">
</div>
  
<div class="form-group">
    <label><b>Total: </b>@total</label>
</div>
 
<button class="btn btn-primary" @onclick="@(e => Calculate(e, 1))">Add</button>
<button class="btn btn-primary" @onclick="@(e => Calculate(e, 2))">Subtract</button>
 
<button class="btn btn-secondary" @onclick="Clear">Clear</button>
 
@code {
    private int number1 = 0;
    private int number2 = 0;
    private int total = 0;
 
    private void Calculate(MouseEventArgs e, int buttonType)
    {
        switch (buttonType)
        {
            case 1:
                total = number1 + number2;
                break;
            case 2:
                total = number1 - number2;
                break;
        }
    }
 
    private void Clear()
    {
        number1 = 0;
        number2 = 0;
        total = 0;
    }
}

在上面代碼片段中，重要的兩行如下，我將一個附加參數傳遞給了 Calculate 方法，其值分別為 1 和 2：

<button class="btn btn-primary" @onclick="@(e => Calculate(e, 1))">Add</button>
<button class="btn btn-primary" @onclick="@(e => Calculate(e, 2))">Subtract</button>

方法 Calculate 的代碼也略有修改，因為現在它接受一個額外的參數 buttonType。在此方法中，我們根據 buttonType 參數的值進行加法或減法運算。

private void Calculate(MouseEventArgs e, int buttonType)
{
    switch (buttonType)
    {
        case 1:
            total = number1 + number2;
            break
        case 2:
            total = number1 - number2;
            break;
    }
}

再次運行應用程序，並嘗試點擊 Add 和 Subtract 方法，您會看到相同的 Calculate 方法給了我們不同的結果。

Passing-Additional-Arguments-to-Blazor-Event-Handler-using-Lambda-Expression


相關閱讀：

作者 ： Waqas Anwar
翻譯 ： 技術譯站
鏈接 ： 英文原文

  1. https://www.ezzylearning.net/tutorial/a-developers-guide-to-blazor-event-handling A Developer’s Guide To Blazor Event Handling ↩︎

  2. https://docs.microsoft.com/zh-cn/aspnet/core/blazor/components/event-handling ASP.NET Core Blazor 事件處理 ↩︎


免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。



猜您在找 Blazor 事件處理(3) Blazor 模板化組件開發指南 Blazor 組件庫開發指南 Blazor 數據綁定開發指南 Blazor 路由及導航開發指南 ios開發事件處理之：一：UIView的拖拽 Android開發之基於監聽的事件處理 SDL 開發實戰（四）： SDL 事件處理 PJSIP開發指南 paypal開發指南
 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM