Blazor 事件處理開發指南

2021 年 8 月 16 日
筆記
Blazor, csharp, dotnet

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

如果您正在開發互動式 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>

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

如下面的程式碼片段所示，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 支援大量的 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 方法給了我們不同的結果。