Blazor 组件：创建、生命周期、嵌套和 UI 集成

news2024/11/22 20:27:15

在本文中，您将获得以下问题的答案。

什么是 Blazor 组件？
如何使用组件？
Blazor 组件的生命周期是什么？
我们可以从一个组件调用另一个组件吗？
如何创建 Blazor 组件？
在组件中哪里写 C# 代码？

什么是 Blazor 组件？

Blazor 组件是 Blazor 应用程序的构建块。用于 GUI 和事件代码的组件。您可以将 GUI 代码（HTML、CSS）和 C# 代码写入组件或将它们分开。您可以将组件重新用作用户控件（Asp.Net WebForm）和部分视图（Asp.Net MVC）。

Blazor 组件会创建一个 RAZOR 扩展文件。如果您的组件名称是 DateCalculator，则组件文件名将类似于 DATECALCULATOR.RAZOR。Blazor Component 类继承自 ComponentBase 类。ComponentBase 类是组件的可选基类。或者，组件可以直接实现 IComponent。

Blazor 中的组件我们可以称为 Razor 组件、Blazor 组件或仅组件。Blazor 组件名称应以大写字母开头。使用 PascalCase 是一种很好的做法。

例子

DateCalculator.razor: Correct
dateCalculator.razor: Wrong
datecalculator.razor: Wrong

访问以下参考链接

https://learn.microsoft.com/en-us/dotnet/api/microsoft.aspnetcore.components.componentbase?view=aspnetcore-8.0
https://learn.microsoft.com/en-us/aspnet/core/blazor/components/?view=aspnetcore-8.0

根据上图，您可以看到主要有两个主要组件。

标题组件
页脚组件

Header 组件由三个组件组成

Logo组件：用于日志显示的UI代码。
导航组件：菜单的 UI 代码。
用户配置文件组件：用户配置文件选项的 UI 代码。

页脚组件由三个组件组成

快速链接组件：门户的重要链接。
社交媒体组件：链接至社交平台。

Blazor 组件的生命周期事件是什么？

以下是Blazor组件的生命周期事件。

初始化时
初始化异步
参数设置时
OnParamtersSetAsync
渲染后
渲染后异步

OnInitialized 和 OnInitializedAsync 在组件渲染之前被调用。

OnParametersSet 和 OnParametersSetAsync 在 OnInitialized、OnInitializedAsync 之后立即调用，并且从父级接收到新参数。

OnAfterRender 和 OnAfterRenderAsync 在组件完全渲染后调用。

我们可以从一个组件调用另一个组件吗？

是的，我们当然可以从任何组件调用任何组件。组件可以相互嵌套，也可以在项目内甚至跨多个项目重复使用。

如何创建 Blazor 组件？

切换到解决方案资源管理器并右键单击 PAGES 文件夹。

选择添加 RAZOR 组件选项。

如下图所示。

上图显示的是使用名称“DateCalculator.razor”创建的 Razor 组件。

DateCalculator.Razor 是使用以下默认代码创建的。

<h3>DateCalculator</h3>
@code {
}

在组件中哪里写 C# 代码？

上图中第 3 行，在 @Code {} 里面，可以编写 C# 代码。

编写代码根据当前时间显示早上好、下午好和晚上好

双击位于 PAGES 文件夹内的 DateCalculator.razor 组件。

@page "/datecalc"

<h3>Welcome User</h3>

Current Date: @DateTime.Now.ToLongDateString()
<br />
<br />
Current Time: @DateTime.Now.ToLongTimeString()
<br />
<br />
<label>@Msg</label>
<br />
<br />
<button>Ok</button>

@code {
    int hours = DateTime.Now.Hour;
    string Msg = string.Empty;

    protected override void OnInitialized()
    {
        if (hours < 12)
        {
            Msg = "Good Morning";
        }

        if (hours > 12 && hours < 18)
        {
            Msg = "Good Afternoon";
        }

        if (hours > 18)
        {
            Msg = "Good Evening";
        }

        base.OnInitialized();
    }
}

按 F5 并点击浏览器地址来运行该应用程序。