Blazor ——在 MVC 项目中兼容 Blazor 开发的组件

前言

在 Blazor 出现之前，已经有很多大部分项目是用 MVC或 Razor 页面开发的，如果完全这个时候想要替换 Blazor 组件，重构成本非常的大。因此这一篇文章会教你如何在 MVC 项目中兼容 Blazor 组件。

一定要先将 .NET Core 版本升级到 3.x+

兼容 Blazor 只需要以下几个步骤：

1. 安装包 Microsoft.AspNetCore.Components
2. 添加 services.AddServerSideBlazor() 服务
3. 添加 endpoints.UseBlazorHub() 中间件
4. 引用 _framework/blazor.server.js 脚本

然后我们下面来详细说一下

向 DI 添加配置服务

在 ConfigureServices 方法中添加服务 services.AddServerSideBlazor();

public void ConfigureServices(IServiceCollection services)
{
	//....
    services.AddServerSideBlazor(); 
    //....
}

添加中间件路由

在 Configure 方法中添加 endpoints.MapBlazorHub(); 方法：

            app.UseEndpoints(endpoints =>
            {                
				//...
                endpoints.MapBlazorHub();
            });

在页面中引入 blazor 脚本

一般会在模板页面，即 Shared/_Layout.cshtml 中引入脚本：

<script src="_framework/blazor.server.js"></script>

构建一个 razor 组件

这里新建一个 Components 文件夹，构建了一个 UserList.razor 的组件，呈现一个用户列表：

@using Models
<table class="table table-sm table-hover">
    <thead>
        <tr>
            <th>
                Id
            </th>
            <th>
                Name
            </th>
        </tr>
    </thead>
    <tbody>
        @foreach (var item in Users)
        {
            <tr>
                <td>
                    @item.Id
                </td>
                <td>
                    @item.Name
                </td>                
            </tr>
        }
    </tbody>
</table>

@code {
    [Parameter] public IEnumerable<UsersViewModel> Users { get; set; }
}

犹如一般的 razor 组件一样的封装，这里并没有什么特别。

使用组件

调用 Html.RenderComponentAsync 方法来呈现组件。

这里有一个 List.cshtml 页面：

@model IEnumerable<UsersViewModel>

@(await Html.RenderComponentAsync<UserList>(RenderMode.ServerPrerendered, new { Users = Model }))

这里是 Controller 的 Action 方法：

public IActionResult List()
{
    var users = new List<UsersViewModel>()
    {
        new UsersViewModel{ Id=1, Name="张三" },
        new UsersViewModel{ Id=2, Name="李四" },
        new UsersViewModel{ Id=3, Name="王五" },
        new UsersViewModel{ Id=4, Name="赵六" },
        new UsersViewModel{ Id=5, Name="郑七" },
    };

    return View(users);
}

其实我更希望能使用这样的方式呈现组件：

@model IEnumerable<UsersViewModel>

<UserList Users="@Model" />

在 cshtml 文件中，目前还无法使用标签的形式呈现 razor 组件，具体可以查看 Github 的 Issue。

运行起来查看效果：

当我们改变页面的代码以后，呈现了如下内容：

这就说明我们已经兼容了 Blazor 了。

总结

使用这样的方式我们就可以将 Blazor 兼容到我们的系统当中。但是使用组件还是比较繁琐，希望微软可以在下一个版本支持标记的形式使用组件，这不过是时间问题，让我们拭目以待吧！