Blazor 事件处理开发人员指南

![在这里插入图片描述](https://img-blog.csdnimg.cn/img_convert/a30c91f6ef1ae9b2b3359d897f5bb1fb.png

如果您正在开发交互式 Web 应用程序，根据不同的应用程序事件和用户操作动态更新用户界面是非常常见的做法。这些操作会引发事件，作为开发人员，我们的工作是使用一些事件处理技术来处理这些事件。 Blazor 内置支持处理多个事件，例如 onclick、onchange 和 onmousemove 等，它还为开发人员提供了多种处理这些事件的方法。在本教程中，我将概述 Blazor 事件处理。您还将学习如何使用事件参数和 lambda 表达式，以及如何将其他参数传递给 Blazor 中的事件处理程序。

Blazor 事件处理基础

Blazor 中处理事件的基本语法如下:

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

在上面的语法中

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

假设您要处理按钮单击事件，您可以按如下方式应用上述语法：

<button @onclick=”Update” /> 

让我们通过一些实际示例更详细地介绍事件处理。在 Visual Studio 2019 中创建一个新的 Blazor 服务器应用程序，然后添加一个新的 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 还支持异步委托事件处理程序，如下面的代码片段所示。这些类型的处理程序可以返回一个任务，在这些处理程序中，我们可以使用 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 的事件处理程序方法。移动偶数处理程序然后使用 MouseEventArgs 类中可用的 ScreenX 和 ScreenY 属性更新具有鼠标 X 和 Y 位置的局部字段坐标。运行应用程序并尝试在 div 内移动鼠标，您将看到坐标实时更新。

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

Event	Class	DOM Events
Focus	FocusEventArgs	onfocus, onblur, onfocusin, onfocusout
Input	ChangeEventArgs	onchange, oninputKeyboard
Keyboard	EventArgs	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

您可以在 Microsoft Blazor 文档页面上查看 EventArgs 的完整列表。

将 Lambda 表达式与 Blazor 事件结合使用

Blazor 还支持 Lambda 表达式作为委托事件处理程序。您应该仅将这些表达式用于简单的用例，如果您有大量代码要执行，则应避免使用这些表达式。让我们修改我们的计算器示例，这次使用 Lambda 表达式而不是我们上面使用的计算和清除方法。

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

将附加参数传递给事件处理程序

有时，我们希望根据您的应用程序要求将附加参数传递给事件处理程序。例如，如果您在循环中，您可能希望将循环迭代索引号传递给事件参数，以便您知道此特定事件处理程序针对循环中的哪个项目执行。另一个简单的例子是从两个或多个控件调用相同的事件处理程序，并传递处理事件的控件的引用。让我们用一个基本的例子来介绍这个概念。按照以下代码片段再次修改计算器代码。

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

上面代码片段中的重要行如下，我将一个附加参数传递给计算方法，其值为 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>

计算方法的代码也略有修改，因为它现在接受一个额外的参数 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 方法，您将看到相同的计算方法会给我们不同的结果。