Blazor 组件入门指南 (2)

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

HTML 标记中有两个输入框，它们使用 @bind 属性来绑定 number1 和 number2 变量：

<input type="number" @bind="number1">

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

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

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

<button @onclick="Calculate">Calculate</button>

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

<li> <NavLink href="http://www.likecs.com/calculator"> <span aria-hidden="true"></span> Calculator </NavLink> </li>

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

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

拆分 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> <label for="number1">Number 1</label> <input type="number" @bind="number1"> </div> <div> <label for="number2">Number 2</label> <input type="number" @bind="number2"> </div> <div> <label><b>Total: </b>@total</label> </div> <button @onclick="Calculate">Calculate</button> @code { }

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

出现上述所有错误的原因是 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; } }

译者注：