Blazor 组件入门指南

翻译自 Waqas Anwar 2021年3月19日的文章 《A Beginner’s Guide to Blazor Components》 [1]

Blazor 组件入门指南

Blazor 应用程序是组件的组合,这些组件不仅负责呈现用户界面,还协同工作以促进用户交互。它们是 Blazor 应用程序的主要构建块,大多数 Blazor 功能都是围绕组件展开的。在本教程中,我将向您详细介绍组件,并向您展示在 Blazor 应用程序中创建和使用组件的多种技术。

下载源码[2]

Blazor 组件概述

Blazor 组件是 UI 的一个自包含部分,例如一个页面、一个侧边栏菜单、一个联系人表单或仪表盘小工具等。它包括用于呈现 UI 的 HTML 标签和用于处理数据或处理用户事件的 C# 代码。组件可以相互嵌套,也可以在项目中重用,甚至可以跨多个项目重用。Blazor 组件是作为 Razor 组件实现的,这正是它们使用 Razor 语法并具有 .razor 文件扩展名的原因。

Blazor 组件入门指南

为了理解 Blazor 组件的结构及其工作方式,让我们回顾一下 Counter.razor 组件(如果您在 Visual Studio 2019 中使用 Blazor App 模板,它会自动为我们生成)。下面是 Counter.razor 的完整代码。

@page "/counter"

<h1>Counter</h1>

<p>Current count: @currentCount</p>

<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>

@code {
    private int currentCount = 0;

    private void IncrementCount()
    {
        currentCount++;
    }
}

文件中的第一行使用了 Razor @page 指令来指定组件的路由。这意味着 Counter 组件是页面级或可路由组件,可以在浏览器中使用 URL 末尾的 /counter 路径来访问它。如果我们不指定 @page 指令,则该组件将变为子组件,可以通过将其嵌套在其他组件中来使用它。

@page "/counter"

如下所示,我们还可以声明多个 @page 级别的指令。这将允许我们使用两个 URL 访问组件。

@page "/counter"
@page "/mycounter"

@page 指令之后,是用于指定该组件 UI 的 HTML 标记。这些标记可以使用 Razor 语法动态地使用表达式、条件或循环来渲染 HTML。在上述的 Counter 组件示例中,其 UI 包含一个标题 (h1)、一个段落 (p) 和一个按钮 (button) 元素。段落 (p) 元素使用 Razor 语法来输出 C# 代码块中定义的 currentCount 变量的值。

<p>Current count: @currentCount</p>

按钮 (button) 元素通过调用方法 IncrementCount 来响应用户单击操作,该方法也定义在代码块中。

<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>

最后,是一个代码块,每次调用 IncrementCount 方法时,我们简单地将 currentCount 变量的值加 1。

@code {
    private int currentCount = 0;
 
    private void IncrementCount()
    {
        currentCount++;
    }
}

当 Blazor 应用程序进行编译时,HTML 标记和 C# 代码将转换成一个组件类,类名称与组件的文件名相对应。该类的成员是我们在 @code 中定义的相同的变量和方法。允许使用多个 @code 块,所有这些代码块在编译后会合并进同一组件类。

在 Visual Studio 2019 中创建 Blazor 组件

如果您要创建一个页面级组件,请右键单击 Pages 文件夹并选择 添加 > Razor 组件... 菜单选项。

Blazor 组件入门指南

您也可以在解决方案资源管理器中右键单击项目名称,然后使用 Razor 组件 模板创建一个组件。

Blazor 组件入门指南

让我们创建一个文件名为 Calculator.razor 的组件,并添加以下代码。

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>
 
@code {
    private int number1 = 0;
    private int number2 = 0;
    private int total = 0;
 
    private void Calculate()
    {
        total = number1 + number2;
    }
}

@code 块具有三个私有变量和一个 Calculate 方法。Calculate 方法简单地将 number1number2 的和赋值给 total 变量。

HTML 标记中有两个输入框,它们使用 @bind 属性来绑定 number1number2 变量:

<input type="number" class="form-control" id="number1" @bind="number1">

变量 total 的值使用 Razor 语法 @total 渲染在页面上:

<label><b>Total: </b>@total</label> 

最后,是一个按钮元素,它将 Calculate 方法绑定到 @onclick 事件。每当用户点击按钮时,就会调用 Calculate 方法,页面上的 total 变量的值将更新。

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

为了轻松访问您的 Calculator 组件,可以通过在 NavMenu.razor 组件中添加以下标记,在应用程序侧边栏中添加 Calculator 组件。

<li class="nav-item px-3">
   <NavLink class="nav-link" href="calculator">
      <span class="oi oi-calculator" aria-hidden="true"></span> Calculator
   </NavLink>
</li>

F5 运行您的应用程序,您应该会看到如下所示的页面。尝试在输入框中输入一些数字,您应该能看到页面上显示的数字之和。点击 Calculate 按钮运行了服务端的 C# 代码,却并没有浏览器回传或页面刷新。一切都感觉那么流畅和快速,就像您在浏览器中使用 JavaScript 进行计算一样。

Blazor 组件入门指南

如果您想检验一下代码是在服务端上运行的,只需尝试在 Calculate 方法中添加一个断点,然后再次按下 F5。这次,当您点击 Calculate 按钮时,您将看到代码执行到断点处停止,您还可以在 tooltips 中看到用户输入,如下图所示:

Blazor 组件入门指南

拆分 Blazor 组件中的标签和代码

如果您创建的是小型组件,那么您可能希望在单个 .razor 文件中编写所有 C# 代码;但如果您有大量的逻辑要写并且为了更好的代码维护,您希望将 C# 代码与 HTML 标签分开,那么可以通过以下两种方式来实现。

使用基类拆分组件

使用这种方式,您可以创建一个独立的类,该类应该从 ComponentBase 类派生。然后,您可以将组件中的属性和方法从 @code 块移动到这个新创建的类,最后,您可以使用 @inherits 指令来指定组件的基类。让我们将这种方式应用于我们上面创建的 Calculator 组件。在项目中创建一个 CalculatorBase 类,并将 C# 代码从 Calculator.razor 移动到这个新类中。

CalculatorBase.cs

public class CalculatorBase : ComponentBase
{
    private int number1 = 0;
    private int number2 = 0;
    private int total = 0;
 
    private void Calculate()
    {
        total = number1 + number2;
    }
}

然后在 Calculator.razor 文件的顶部添加 @inherits 指令,如下:

Calculator.razor

@page "/calculator"
@inherits CalculatorBase
 
<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>
 
@code {
     
}

此时如果您尝试构建应用程序,则会遇到很多错误抱怨字段和方法的可访问性。

Blazor 组件入门指南

出现上述所有错误的原因是 Calculator 组件继承自 CalculatorBase 类,而我们在 CalculatorBase 类中粘贴的属性和方法是 private。为了确保子组件可以访问这些字段和方法,您需要将它们声明为 public

public class CalculatorBase : ComponentBase
{
    public int number1 = 0;
    public int number2 = 0;
    public int total = 0;
 
    public void Calculate()
    {
        total = number1 + number2;
    }
}

译者注:

上一篇:深入浅出Blazor webassembly之razor组件的C#代码组织形式


下一篇:.net5 core Razor 进阶之三:异常和日志处理