目录
开始使用Blazor时,首先需要了解的是组件。了解如何创建组件、使用模板以及将参数从父组件传递到子组件。
Blazor应用程序由多层组件组成。Blazor中的所有内容都是一个组件。
面向组件的体系结构具有许多优点,例如简单的代码重用、独立编程和可组合性,甚至可以跨多个Blazor应用程序。
我将Blazor应用程序中的组件分为三类:页面、组件和控件。从技术上讲,它们都是Blazor组件。它们组合在一起,生成一个组件树,从而生成Blazor应用程序。
什么是Blazor组件?
Blazor组件有两个主要部分:模板和交互代码。该模板使用标准的Web技术,例如HTML和CSS。交互代码是用C#实现的。
<h1>@Title</h1>
@code {
public string Title { get; set; } = "My Component";
}
这个简单组件包含一个带有单个<h1> HTML元素的模板。<h1>元素的内容引用组件模板下方@code块中C#代码的Title属性。
输出变量的值非常简单。我们可以使用@符号后跟组件代码节中定义的属性名称。
当我们想引用组件@code部分的代码时,我们可以在模板中的任何位置使用@符号。
使用预先存在的控件
上面的示例包含一个简单的<h1>标签。但是,在实际应用中,组件变得更加复杂。
这个想法是通过将组件限制为单个职责来保持组件尽可能小。例如,表单组件处理表单交互,但不为表单中的每个字段定义模板。
一些用例很常见,构建的组件可以跨多个应用程序使用。可以生成组件,这非常耗时,也可以依赖第三方UI控件库,例如 Telerik UI for Blazor UI组件库。
这样可以腾出时间专注于构建应用程序,而不必担心实现低级控制组件,例如美观的复选框或进度条控件。
Blazor模板语法
Blazor基于ASP.NET Core Razor Pages引入的Razor语法构建。
如果你熟悉该语法,你将很快适应Blazor语法。如果您完全不熟悉语法,请不要担心,它非常简单。
Blazor应用程序中的页面
在Blazor中,页面是组件。要将上一个示例的组件转换为页面,我们唯一需要做的就是添加@page指令。
@page "/MyPage"
<h1>@Title</h1>
@code {
public string Title { get; set; } = "My Component";
}
简单的Blazor组件模型允许我们通过添加@page指令将组件转换为页面。在此示例中,我们使用/MyPage路由作为可访问页面的路由。
该@page指令将组件注册为页面,并将路由添加到ASP.NET Core路由提供程序。
组件树:分层组件组合
现在,我们了解了什么是Blazor组件以及如何实现它,以及如何将Blazor组件转换为页面,我们想要生成一个有意义的组件树。
我们将代码提取到一个MyComponent.razor文件中,并添加一个包含MyComponent的MyPage.razor文件。生成的代码如下所示:
MyPage.razor:
@page "/MyPage"
<MyComponent />
MyComponent.razor:
<h1>@Title</h1>
@code {
public string Title { get; set; } = "My Component";
}
我们用五行代码创建了两个组件,并在MyPage组件中引用了该MyComponent组件。
我们可以继续使用相同的模式来构建一整棵组件树,所有组件都引用其他组件。
例如,页面可以包含Content组件和Menu组件。然后,菜单组件包含一些MenuItem组件,依此类推。
将参数从父组件传递到子组件
有时我们想重用组件的实现,但需要为每个实例提供特定的数据。
使用Blazor时,我们只需添Parameter加属性即可将属性转换为可从组件外部设置的参数。
例如,MyComponent可以将其更改为如下所示:
<h1>@Title</h1>
@code {
[Parameter]
public string Title { get; set; }
}
我们接受来自父组件的标题,而不是为所有组件实例设置相同的Title属性值。
在父组件中,在我们的例子中是MyPage组件,我们现在在模板中引用组件时为Title属性添加一个值。
@page "/MyPage"
<MyComponent Title="MyTitle" />
如你所见,在使用Blazor组件时,定义和提供从一个组件到另一个组件的参数非常简单。
结论
Blazor组件构建Blazor应用程序的基础。每个Blazor应用程序都由一堆Blazor组件组成,这些组件使用简单的HTML模板粘合在一起。
我们可以使用@符号来引用Blazor组件中的C#代码,以将静态HTML模板转换为功能组件。
有一些高级主题,例如高级路由、组件之间的通信、绑定数据、处理事件等等。但这一切都基于这个基础。
若要详细了解Blazor开发,可以在 YouTube上观看我的免费 Blazor速成课程。敬请期待 转到Telerik博客,了解更多 Blazor基础知识。
https://www.telerik.com/blogs/blazor-basics-creating-blazor-component