翻譯自 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 如下表所示：

您可以在微軟 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;breakcase 2:total = number1 - number2;break;} }

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

相關閱讀：

• Blazor Server 和 WebAssembly 應用程序入門指南

• Blazor 組件入門指南

• Blazor 數據綁定開發指南

• Blazor 事件處理開發指南(本文)

---

相關鏈接：

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

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

作者 ：Waqas Anwar
譯者 ：技術譯民
出品 ：技術譯站（https://ITTranslator.cn/）

總結

以上是生活随笔為你收集整理的Blazor 事件处理开发指南的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。