位置：网站建设 > 技术支持 > Blazor ——在 MVC 项目中兼容 Blazor 开发的组件

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

来源：网络整理时间：2023/2/14 1:00:28 共 3631 浏览

前言

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

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

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

    安装包 Microsoft.AspNetCore.Components
    添加 services.AddServerSideBlazor() 服务
    添加 endpoints.UseBlazorHub() 中间件
    引用 _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 兼容到我们的系统当中。但是使用组件还是比较繁琐，希望微软可以在下一个版本支持标记的形式使用组件，这不过是时间问题，让我们拭目以待吧！

版权说明：
本网站凡注明“广州京杭原创”的皆为本站原创文章，如需转载请注明出处！
本网转载皆注明出处，遵循行业规范，如发现作品内容版权或其它问题的，请与我们联系处理！
欢迎扫描右侧微信二维码与我们联系。

·上一条：ASP.NET Core Blazor 初探之 Blazor Server | ·下一条：《进击吧！Blazor！》系列入门教程第一章 7.图表