当前位置： 首页 > 科技观察

Blazor组件入门指南

时间：2023-03-13 14:56:41 科技观察

本文转载自微信公众号“技术翻译站”，作者：技术翻译敏。转载本文请联系技术翻译站公众号。翻译自WaqasAnwar于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组件（如果您在VisualStudio2019中使用Blazor应用程序模板，它会自动为我们生成）。下面是Counter.razor的完整代码。@page"/counter"

Counter

Currentcount:@currentCount

点我@code{privateintcurrentCount=0;privatevoidIncrementCount(){currentCount++;}}文件中的第一行使用Razor@page指令指定组件的路由。这意味着Counter组件是一个页面级或可路由组件，可以在浏览器中使用URL末尾的路径/counter进行访问。如果我们不指定@page指令，该组件将成为子组件，可以通过将其嵌套在其他组件中来使用。@page"/counter"如下图，我们也可以声明多个@page级别的指令。这将允许我们使用两个URL访问该组件。@page"/counter"@page"/mycounter"在@page指令之后，是一个HTML标签，指定了这个组件的UI。这些标记可以使用Razor语法通过表达式、条件或循环动态呈现HTML。在上面的Counter组件示例中，它的UI由一个标题(h1)、一个段落(p)和一个按钮(button)元素组成。段落(p)元素使用Razor语法输出C#代码块中定义的currentCount变量的值。

Currentcount:@currentCount

按钮（button）元素通过调用方法IncrementCount来响应用户点击，该方法也在代码块中定义。Clickme最后，有一个代码块，每次调用IncrementCount方法时，我们只需将currentCount变量的值增加1。@code{privateintcurrentCount=0;privatevoidIncrementCount(){currentCount++;}}当Blazor应用程序编译时，HTML标记和C#代码被转换成一个组件类，其类名与组件的文件名相对应。这个类的成员和我们在@code中定义的变量和方法是一样的。允许多个@code块，编译后全部合并到同一个组件类中。在VisualStudio2019中创建Blazor组件如果要创建页面级组件，请右键单击“页面”文件夹并选择“添加”>“Razor组件...”菜单选项。您还可以在解决方案资源管理器中右键单击项目名称，然后使用Razor组件模板创建一个组件。让我们创建一个名为Calculator.razor的组件并添加以下代码。Calculator.razor@page"/calculator"

计算器

Number1
Number2
计算@code{privateintnumber1=0;privateintnumber2=0;privateinttotal=0;privatevoidCalculate(){total=number1+number2;}}这个@code块有三个私有变量和一个Calculate方法。Calculate方法只是将number1和number2的总和分配给total变量。HTML标签中有两个输入框，使用@bind属性绑定number1和number2变量：变量total该值使用Razor语法呈现在页面上@total:最后，有一个按钮元素将Calculate方法绑定到@onclick事件。每当用户单击该按钮时，就会调用Calculate方法并更新页面上总变量的值。Calculate为了轻松访问您的计算器组件，您可以通过将以下标记添加到您的NavMenu.razor组件，将计算器组件添加到您的应用程序侧边栏。计算器按F5运行您的应用程序，您应该会看到如下页面。尝试在输入框中输入一些数字，您应该会看到页面上显示的数字之和。单击计算按钮运行服务器端C#代码，但没有浏览器回发或页面刷新。一切都感觉如此流畅和快速，就好像您在浏览器中使用JavaScript进行计算一样。如果要验证代码是否在服务器端运行，只需尝试在Calculate方法中添加一个断点，然后再次按F5。这一次，当您单击“计算”按钮时，您会看到代码执行停在断点处，您还可以在工具提示中看到用户输入，如下图所示：SplitlabelsandcodeinBlazorcomponents如果你创建如果您有小组件，您可能希望将所有C#代码编写在一个.razor文件中；但是如果你要写的逻辑比较多，又想把C#代码和HTML标签分开，方便代码维护，可以通过下面两种方式来实现。§使用基类拆分组件通过这种方式，您可以创建一个独立的类，该类应该派生自ComponentBase类。然后，您可以将组件中的属性和方法从@code块移动到这个新创建的类，最后，您可以使用@inherits指令指定组件的基类。让我们将此方法应用于上面创建的计算器组件。在您的项目中创建一个CalculatorBase类，并将C#代码从Calculator.razor移动到这个新类中。CalculatorBase.cspublicclassCalculatorBase:ComponentBase{privateintnumber1=0;privateintnumber2=0;privateinttotal=0;privatevoidCalculate(){total=number1+number2;}}然后在Calculator.razor文件的顶部添加@inherits命令，如下：Calculator.razor@page"/calculator"@inheritsCalculatorBase

计算器

Number1
Number2计算@code{}此时，如果您尝试构建应用程序，您会收到很多错误，抱怨字段和方法的可访问性。上述所有错误的原因是Calculator组件继承自CalculatorBase类和我们粘贴的属性在CalculatorBase类中，该方法是私有的。为确保子组件可以访问这些字段和方法，您需要将它们声明为公共的。publicclassCalculatorBase:ComponentBase{publicintnumber1=0;publicintnumber2=0;publicinttotal=0;publicvoidCalculate(){total=number1+number2;}}访问过。CalculatorBase类必须包含在命名空间中，否则会报错。§使用分部类拆分组件Blazor组件生成为分部类，这意味着我们可以创建一个与我们的组件同名的分部类，并将所有C#代码移动到该分部类中。然后，此分部类成为代码隐藏文件，其中声明的字段和属性可直接在Blazor组件中使用。让我们创建一个类Calculator.razor.cs并将计算器代码放入这个新类中。Calculator.razor.cspublicpartialclassCalculator{publicintnumber1=0;publicintnumber2=0;publicinttotal=0;publicvoidCalculate(){total=number1+number2;}}如果启用文件嵌套，你会看到VisualStudio会自动隐藏组件和代码文件一起显示。再次运行应用程序，计算器将以与以前相同的方式工作。创建和使用子组件Blazor子组件是没有@page指令的组件。这些组件可以使用标准HTML语法包含在其他组件中。然后我们可以通过在页面上添加组件来构建复杂的UI，我们甚至可以在同一页面上添加同一子组件的多个实例。如果一个子组件很可能在多个父组件或页面中被复用，最好将其放在Shared文件夹中。让我们在Shared文件夹中创建一个简单的Heading.razor子组件，并在其中添加以下代码。Heading.razor

Calculator

接下来，将父组件Calculator.razor中的h3元素替换为元素。运行该应用程序，您将看到从子组件呈现在页面上的h3标题。Calculator.razor@page"/calculator"@inheritsCalculatorBaseNumber1Number2计算您甚至可以通过复制和粘贴同一元素来添加子组件的多个实例。现在，如果您运行该应用程序，您将在页面上看到三个h3标题。自定义Blazor组件的参数只是生成具有相同内容的静态组件，这不是很有用。如果我们可以将一些数据传递给组件并且不仅自定义它生成的UI，还自定义它的行为或功能，那就更好了。我们可以使用参数来自定义Blazor组件。这些参数可以是简单的int、bool等，也可以是复杂的Customer、Order等。一旦声明了参数，我们就可以使用属性向组件传递数据。让我们通过在Heading组件中声明一个简单的Title参数来学习这个概念。要指定参数，我们将[Parameter]属性附加到属性。Heading.razor

@Title

@code{[Parameter]publicstringTitle{get;set;}="DefaultTitle";}我们还为Title属性设置了一个默认值DefaultTitle，当没有提供Title时，然后显示默认字符串。VisualStudioIntelliSense还可以提示组件参数，所以我们不需要记住它们，这很有用。我们可以通过将任何字符串作为Title的值传递来从外部自定义Title，Heading组件将自动呈现传递给它的不同字符串。我们还可以使用表达式将数据从父组件传递到子组件。让我们创建另一个子组件CalculatorTotal.razor，并向其添加以下代码。CalculatorTotal.razor@code{[Parameter]publicintTotal{get;set;}}现在您可以使用我们在父计算器控制器@中声明和设置的内容total字段传递Total的值。Calculator.razor@page"/calculator"Number1Number2Calculate将路由参数传递给Blazor组件Blazor组件还可以接受来自@page指令中提供的路由模板的参数。路由器使用路由参数自动填充相应的组件参数。让我们看一个如何通过路由将数据传递给组件的示例。创建一个名为MathTable.razor的新Blazor组件并添加以下代码。MathTable.razor@page"/MathTable/{number:int}"

MathTable

@for(inti=1;i<=10;i++){@Numberx@i=@(Number*i)}@code{[Parameter]publicintNumber{get;set;}}我们指定了一个带有int参数编号的路由模板：@page"/MathTable/{number:int}"路由参数会自动映射到以下组件参数：[Parameter]publicintNumber{get;set;}在HTML标记中，我使用数字参数生成数学公式表。运行项目并尝试在路由URL中传递不同的数字，您将看到数学表更新了每个参数值。总结在本教程中，我介绍了Blazor组件的基础知识。我尝试用通俗易懂的例子来演示每个概念，以便您可以快速学习基本概念。Blazor组件提供的功能比我在本教程中介绍的要多得多，并且还有许多与Blazor组件相关的其他高级主题。在接下来的几周内，我会尝试写更多关于Blazor的文章，所以请继续访问我的网站以了解更多关于Blazor的信息。相关阅读：ABeginner'sGuidetoBlazorComponentsABeginner'sGuidetoBlazorComponents（本文）相关链接：https://www.ezzylearning.net/tutorial/a-beginners-guide-to-blazor-componentsABeginner'sGuidetoBlazor组件??https://github.com/ezzylearning/BlazorComponentsDemo??作者：WaqasAnwar译者：科技译者出品：科技翻译站(https://ITTranslator.cn/)

Blazor组件入门指南相关文章
最新推荐
猜你喜欢

Copyright © 2012-2022 程序源 版权所有豫ICP备2022028201号

重要申明：本站所有的文章、图片、评论等，均由网友发表或上传并维护或收集自网络，属个人行为，与本站立场无关。 如果侵犯了您的权利，请与我们联系，我们将在24小时内进行处理、任何非本站因素导致的法律后果，本站均不负任何责任。