一篇关于Blazor组件入门指南

本文转载自微信公众号「技术译站」，作者技术译民。转载本文请联系技术译站公众号。

公司主营业务：成都网站设计、成都网站制作、移动网站开发等业务。帮助企业客户真正实现互联网宣传，提高企业的竞争能力。创新互联是一支青春激扬、勤奋敬业、活力青春激扬、勤奋敬业、活力澎湃、和谐高效的团队。公司秉承以“开放、自由、严谨、自律”为核心的企业文化，感谢他们对我们的高要求，感谢他们从不同领域给我们带来的挑战，让我们激情的团队有机会用头脑与智慧不断的给客户带来惊喜。创新互联推出汾阳免费做网站回馈大家。

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

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

下载源码[2]

Blazor 组件概述

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

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

 
 
 
 
    
  
  
  
  
  1. @page "/counter" 
    2.   
  
  
  
  2.  
    3.   
  
  
  
  3. Counter
     
    4.   
  
  
  
  4.  
    5.   
  
  
  
  5. Current count: @currentCount
     
    6.   
  
  
  
  6.  
    7.   
  
  
  
  7. Click me 
    8.   
  
  
  
  8.  
    9.   
  
  
  
  9. @code { 
    10.   
  
  
  
  10.     private int currentCount = 0; 
    11.   
  
  
  
  11.  
    12.   
  
  
  
  12.     private void IncrementCount() 
    13.   
  
  
  
  13.     { 
    14.   
  
  
  
  14.         currentCount++; 
    15.   
  
  
  
  15.     } 
    16.   
  
  
  
  16. } 
    17.

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

 
 
 
 
    
  
  
  
  
  1. @page "/counter" 
    2.

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

 
 
 
 
    
  
  
  
  
  1. @page "/counter" 
    2.   
  
  
  
  2. @page "/mycounter" 
    3.

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

 
 
 
 
    
  
  
  
  
  1. Current count: @currentCount
     
    2.

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

 
 
 
 
    
  
  
  
  
  1. Click me 
    2.

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

 
 
 
 
    
  
  
  
  
  1. @code { 
    2.   
  
  
  
  2.     private int currentCount = 0; 
    3.   
  
  
  
  3.   
    4.   
  
  
  
  4.     private void IncrementCount() 
    5.   
  
  
  
  5.     { 
    6.   
  
  
  
  6.         currentCount++; 
    7.   
  
  
  
  7.     } 
    8.   
  
  
  
  8. } 
    9.

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

在 Visual Studio 2019 中创建 Blazor 组件

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

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

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

Calculator.razor

 
 
 
 
    
  
  
  
  
  1. @page "/calculator" 
    2.   
  
  
  
  2.   
    3.   
  
  
  
  3. Calculator
     
    4.   
  
  
  
  4.   
    5.   
  
  
  
  5.  
    6.   
  
  
  
  6.     Number 1 
    7.   
  
  
  
  7.      
    8.
 
  •  
  •     Number 2 
  •      
  •  
  •  
  •       
  •  
  •   
  • Calculate 
  •   
  • @code { 
  •     private int number1 = 0; 
  •     private int number2 = 0; 
  •     private int total = 0; 
  •   
  •     private void Calculate() 
  •     { 
  •         total = number1 + number2; 
  •     } 
  • } 

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

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

     
 
 
 
      
  
  
  
  
    1.  
      2.

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

     
 
 
 
      
  
  
  
  
    1.   
      2.

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

     
 
 
 
      
  
  
  
  
    1. Calculate 
      2.

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

     
 
 
 
      
  
  
  
  
    1.  
      2.   
  
  
  
    2.     
      3.   
  
  
  
    3.        Calculator 
      4.   
  
  
  
    4.     
      5.   
  
  
  
    5.  

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

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

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

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

     
 
 
 
      
  
  
  
  
    1. §使用基类拆分组件 
      2.

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

    CalculatorBase.cs

     
 
 
 
      
  
  
  
  
    1. public class CalculatorBase : ComponentBase 
      2.   
  
  
  
    2. { 
      3.   
  
  
  
    3.     private int number1 = 0; 
      4.   
  
  
  
    4.     private int number2 = 0; 
      5.   
  
  
  
    5.     private int total = 0; 
      6.   
  
  
  
    6.   
      7.   
  
  
  
    7.     private void Calculate() 
      8.   
  
  
  
    8.     { 
      9.   
  
  
  
    9.         total = number1 + number2; 
      10.   
  
  
  
    10.     } 
      11.   
  
  
  
    11. } 
      12.

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

    Calculator.razor

     
 
 
 
      
  
  
  
  
    1. @page "/calculator" 
      2.   
  
  
  
    2. @inherits CalculatorBase 
      3.   
  
  
  
    3.   
      4.   
  
  
  
    4. Calculator
       
      5.   
  
  
  
    5.   
      6.   
  
  
  
    6.  
      7.   
  
  
  
    7.     Number 1 
      8.   
  
  
  
    8.      
      9.   
  
  
  
    9.  
      10.   
  
  
  
    10.  
      11.   
  
  
  
    11.     Number 2 
      12.   
  
  
  
    12.      
      13.   
  
  
  
    13.  
      14.   
  
  
  
    14.  
      15.   
  
  
  
    15.       
      16.   
  
  
  
    16.  
      17.   
  
  
  
    17.   
      18.   
  
  
  
    18. Calculate 
      19.   
  
  
  
    19.   
      20.   
  
  
  
    20. @code { 
      21.   
  
  
  
    21.       
      22.   
  
  
  
    22. } 
      23.

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

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

     
 
 
 
      
  
  
  
  
    1. public class CalculatorBase : ComponentBase 
      2.   
  
  
  
    2. { 
      3.   
  
  
  
    3.     public int number1 = 0; 
      4.   
  
  
  
    4.     public int number2 = 0; 
      5.   
  
  
  
    5.     public int total = 0; 
      6.   
  
  
  
    6.   
      7.   
  
  
  
    7.     public void Calculate() 
      8.   
  
  
  
    8.     { 
      9.   
  
  
  
    9.         total = number1 + number2; 
      10.   
  
  
  
    10.     } 
      11.   
  
  
  
    11. } 
      12.

    译者注：

     
 
 
 
      
  
  
  
  
    1. §使用部分类拆分组件 
      2.

    Blazor 组件生成为部分类，这意味着我们可以创建一个与我们的组件同名的 partial 类，并将所有 C# 代码移动到该部分类中。然后，此部分类将成为代码隐藏文件，该文件中声明的字段和属性可在 Blazor 组件中直接使用。让我们创建一个类 Calculator.razor.cs，并将 Calculator 的代码放在这个新类中。

    Calculator.razor.cs

     
 
 
 
      
  
  
  
  
    1. public partial class Calculator 
      2.   
  
  
  
    2. { 
      3.   
  
  
  
    3.     public int number1 = 0; 
      4.   
  
  
  
    4.     public int number2 = 0; 
      5.   
  
  
  
    5.     public int total = 0; 
      6.   
  
  
  
    6.   
      7.   
  
  
  
    7.     public void Calculate() 
      8.   
  
  
  
    8.     { 
      9.   
  
  
  
    9.         total = number1 + number2; 
      10.   
  
  
  
    10.     } 
      11.   
  
  
  
    11. } 
      12.

    如果启用了文件嵌套，您将看到 Visual Studio 会自动将组件和代码隐藏文件显示在一起。

    再次运行应用程序，Calculator 会以前面相同的方式工作。

    创建和使用子组件

    Blazor 子组件是没有 @page 指令的组件。这些组件可以使用标准的 HTML 语法包含在其他组件中。然后，我们可以通过在页面上添加组件来构建复杂的 UI，我们甚至可以在同一个页面上添加同一子组件的多个实例。如果一个子组件可能在多个父组件或页面中重复使用，那么最好将它放在 Shared 文件夹中。让我们在 Shared 文件夹中创建一个简单的 Heading.razor 子组件，并在其中添加以下代码。

    Heading.razor

     
 
 
 
      
  
  
  
  
    1. Calculator
       
      2.

    接下来，将父组件 Calculator.razor 中的 h3 元素替换为 元素。运行应用程序，您会看到 h3 标题从子组件中渲染到了页面上。

     

    Calculator.razor

     
 
 
 
      
  
  
  
  
    1. @page "/calculator" 
      2.   
  
  
  
    2. @inherits CalculatorBase 
      3.   
  
  
  
    3.   
      4.   
  
  
  
    4.  
      5.   
  
  
  
    5.   
      6.   
  
  
  
    6.  
      7.   
  
  
  
    7.     Number 1 
      8.   
  
  
  
    8.      
      9.   
  
  
  
    9.  
      10.   
  
  
  
    10.  
      11.   
  
  
  
    11.     Number 2 
      12.   
  
  
  
    12.      
      13.   
  
  
  
    13.  
      14.   
  
  
  
    14.  
      15.   
  
  
  
    15.       
      16.   
  
  
  
    16.  
      17.   
  
  
  
    17.   
      18.   
  
  
  
    18. Calculate 
      19.

    您甚至可以通过复制和粘贴相同的 元素来添加子组件的多个实例。 

     
 
 
 
      
  
  
  
  
    1.  
      2.   
  
  
  
    2.  
      3.   
  
  
  
    3.  
      4.

    现在，如果您运行应用程序，您将会在页面上看到三个 h3 标题。

    自定义带参数的 Blazor 组件

    只是生成具有相同内容的静态组件不是很有用。如果我们可以将一些数据传递给组件，而不仅仅是自定义它生成的 UI，还自定义其行为或功能，那就更好了。我们可以使用参数来自定义 Blazor 组件。这些参数可以是简单的 int、bool 等，也可以是复杂的 Customer、Order 等。一旦声明了参数，我们便可以使用属性将数据传递给组件。让我们通过在 Heading 组件中声明一个简单的 Title 参数来学习一下这个概念。要指定一个参数，我们要将 [Parameter] 特性附加到一个属性上。

    Heading.razor

     
 
 
 
      
  
  
  
  
    1. @Title
       
      2.   
  
  
  
    2.   
      3.   
  
  
  
    3. @code { 
      4.   
  
  
  
    4.     [Parameter] 
      5.   
  
  
  
    5.     public string Title { get; set; } = "Default Title"; 
      6.   
  
  
  
    6. } 
      7.

    我们还为 Title 属性设置了一个默认值 Default Title，当未提供 Title 时，则显示该默认字符串。

    Visual Studio 智能感知也可以提示组件参数，因此我们不需要记忆这些参数，这很有用。

    我们可以通过传递任意字符串作为 Title 的值来从外部自定义 Title，Heading 组件将自动渲染传递给它的不同字符串。

     
 
 
 
      
  
  
  
  
    1.   
      2.

    我们还可以使用表达式从父组件到子组件传递数据。让我们创建另外一个子组件 CalculatorTotal.razor，并向其添加以下代码。

    CalculatorTotal.razor

     
 
 
 
      
  
  
  
  
    1.  
      2.   
  
  
  
    2.   
      3.   
  
  
  
    3. @code { 
      4.   
  
  
  
    4.     [Parameter] 
      5.   
  
  
  
    5.     public int Total { get; set; } 
      6.   
  
  
  
    6. } 
      7.

    现在，您可以使用我们在父 Calculator 控制器中声明和设置的 @total 字段来传递 Total 的值。

    Calculator.razor

     
 
 
 
      
  
  
  
  
    1. @page "/calculator" 
      2.   
  
  
  
    2.   
      3.   
  
  
  
    3.  
      4.   
  
  
  
    4.   
      5.   
  
  
  
    5.  
      6.   
  
  
  
    6.     Number 1 
      7.   
  
  
  
    7.      
      8.   
  
  
  
    8.  
      9.   
  
  
  
    9.  
      10.   
  
  
  
    10.     Number 2 
      11.   
  
  
  
    11.      
      12.   
  
  
  
    12.  
      13.   
  
  
  
    13.  
      14.   
  
  
  
    14.      
      15.   
  
  
  
    15.  
      16.   
  
  
  
    16.   
      17.   
  
  
  
    17. Calculate 
      18.

    将路由参数传递给 Blazor 组件

    Blazor 组件还可以接受在 @page 指令中提供的来自路由模板的参数。路由器使用路由参数自动填充相应的组件参数。

    让我们看一个如何通过路由将数据传递给组件的示例。创建一个新的名为 MathTable.razor 的 Blazor 组件并添加以下代码。

    MathTable.razor

     
 
 
 
      
  
  
  
  
    1. @page "/MathTable/{number:int}" 
      2.   
  
  
  
    2.   
      3.   
  
  
  
    3. Math Table
       
      4.   
  
  
  
    4.   
      5.   
  
  
  
    5.  
      6.   
  
  
  
    6.     @for (int i = 1; i <= 10; i++) 
      7.   
  
  
  
    7.     { 
      8.   
  
  
  
    8.          
      9.   
  
  
  
    9.             @Number 
      10.   
  
  
  
    10.             x 
      11.   
  
  
  
    11.             @i 
      12.   
  
  
  
    12.             = 
      13.   
  
  
  
    13.             @(Number * i) 
      14.   
  
  
  
    14.          
      15.   
  
  
  
    15.     } 
      16.   
  
  
  
    16.  
      17.   
  
  
  
    17.   
      18.   
  
  
  
    18. @code { 
      19.   
  
  
  
    19.     [Parameter] 
      20.   
  
  
  
    20.     public int Number { get; set; }  
      21.   
  
  
  
    21. } 
      22.

    我们指定了一个带有 int 参数 number 的路由模板：

     
 
 
 
      
  
  
  
  
    1. @page "/MathTable/{number:int}" 
      2.

    该路由参数将自动映射到以下组件参数：

     
 
 
 
      
  
  
  
  
    1. [Parameter] 
      2.   
  
  
  
    2. public int Number { get; set; } 
      3.

    在 HTML 标记中，我使用 number 参数生成一个数学公式表。运行项目并尝试在路由 URL 中传递不同的数字，您将看到根据每一参数值更新的数学公式表。

    总结

    在本教程中，我介绍了 Blazor 组件的基础知识。我试图用易于理解的示例来演示每个概念，以便您可以快速学习基本概念。Blazor 组件提供的功能比我在本教程中介绍的要多得多，而且还有许多其他与 Blazor 组件相关的高级主题。在接下来的几周里，我将尝试写更多关于 Blazor 的文章，因此请继续访问我的网站以学习有关 Blazor 的更多知识。

    相关阅读：

    Blazor Server 和 WebAssembly 应用程序入门指南

    Blazor 组件入门指南(本文)

    相关链接：

    https://www.ezzylearning.net/tutorial/a-beginners-guide-to-blazor-components A Beginner’s Guide to Blazor Components ??

    https://github.com/ezzylearning/BlazorComponentsDemo ??

    作者 ：Waqas Anwar

    译者 ：技术译民

    出品 ：技术译站(https://ITTranslator.cn/)

    当前名称：一篇关于Blazor组件入门指南
    文章地址：http://www.csdahua.cn/qtweb/news26/499126.html

    网站建设、网络推广公司-快上网，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

    广告

    声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 快上网

    成都快上网为您推荐相关内容

    移动网站建设知识

    各行业网站

    西信服务器托管　　 　微信小程序　　 　成都网站制作　　 　雅安电信机房　　 　东方电机技改服务有限公司　　 　重庆电信回兴机房　　 　成都网站建设公司　　 　四川晃众门窗　　 　重庆网站建设　　 　成都西云机房　　 　娃娃鱼鱼苗　　 　网站免费收录　　 　成都网站制作　　 　成都网站制作　　 　ssl证书申请　　 　SSL证书　　 　xjjierui.cn　　 　成都网站推广　　 　微信小程序开发　　 　阿坝网站设计