在Razor页面中使用Razor Components(Blazor组件)-CSDN博客

本文详细介绍了如何在Razor页面中集成和使用Blazor组件。首先，在Startup.cs文件中添加Blazor服务和中间件。接着，创建Components文件夹并添加_Imports.razor文件以引入必要的命名空间。然后，创建并调用自定义的Blazor组件，通过component TagHelper在Razor页面中插入组件，并确保引入_blazor.server.js以支持用户交互。最后，测试组件的运行效果，验证Blazor组件功能的正常工作。

一、添加Blazor服务

在Startup.cs文件相应位置添加以下语句

1、在ConfigureServices注入Blaozr服务

        public void ConfigureServices(IServiceCollection services)
        {
            services.AddRazorPages();
            services.AddServerSideBlazor(); //注册Blaozr服务
        }

2、在Configure中添加Blazor中间件

            app.UseEndpoints(endpoints =>
            {
                endpoints.MapRazorPages();
                endpoints.MapBlazorHub(); // 添加Blazor中间件
            });

二、添加Blazor组件

1、项目中创建一个名为Components的文件夹

2、在文件夹内添加_Imports.razor文件，文件内容如下

@using System.Net.Http
@using Microsoft.AspNetCore.Authorization
@using Microsoft.AspNetCore.Components.Authorization
@using Microsoft.AspNetCore.Components.Forms
@using Microsoft.AspNetCore.Components.Routing
@using Microsoft.AspNetCore.Components.Web
@using Microsoft.JSInterop

※ 这一步非常重要，如果没有引入对应的命名空间，不仅VS针对Blazor的智能提示不正常，比如 @onclick这类directive没有提示，颜色标注不正确等；后续Blazor中的事件也无法正常触发

※ 当然你可以不用_Imports.razor，在每个组件的.Razor文件分别引用这些命名空间

3、在Components文件夹中按常规方式创建Blazor组件。（解决方案资源管理器中，右键菜单，添加--->Razor组件...）

这里我们创建一个简单的MyComponent组件

MyComponent.razor

<h3>Counter</h3>
<label>Counter:@Counter</label>
<button @onclick="Increase">Increase</button>
@code {
    [Parameter]
    public int Counter { get; set; }


    void Increase()
    {
        Counter++;
    }
}

※ 这一步演示在项目中添加Blazor组件。已经封装为dll的的组件库按照下面的第三步直接调用。

三、调用

1、插入组件

在Razor页面中，通过component TagHelper来调用Razor Component

    <component type="typeof(Components.MyComponent)" param-Counter="30" render-mode="ServerPrerendered" />

其中

type指定组件类型
param-参数名 用于传递组件的[Parameter]参数
render-mod 可以使用Server或ServerPrerendered

2、引用js

为了使Blazor组件能处理用户交互，页面需要加载 _framework/blazor.server.js。引用js的方式随意，比如

在_Layout.cshtml中全局引入
使用Razor的section，仅在需要的视图中引入

视图文件中

@section Scripts {
    <script src="_framework/blazor.Server.js"></script>
}

_Layout.cshtml中

    @RenderSection("Scripts", required: false)

总之页面能加载framework/blazor.server.js就行

四、测试效果

点击按钮，Counter数值增加，则Blazor组件运行正常