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

发布：2022/1/10 16:47:00作者：管理员来源：本站浏览次数：1079

前言

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

　《进击吧！Blazor！》系列入门教程第一章 7.图表

ASP.NET Core Blazor 初探之 Blazor Server　

C#winform软件实现一次编译，跨平台windows和linux、mac兼容运行，兼容Visual Studio原生界面Form表单开发 c#开发的winform程序在不同操作系统下的兼容问题 .net core 分页组件X.PagedList之前为PagedList .net mvc用的 Android Studio 开发项目中Okio的使用简介在asp.net开发中MVC中html.beginform提交表单的四种方法全程详解 ASP.NET Core 中的组件标记帮助程序解决MVC中使用Razor组件传值问题学习ASP.NET Core Blazor编程系列二之第一个Blazor应用程序（中）学习ASP.NET Core Blazor编程系列二之第一个Blazor应用程序（上）学习ASP.NET Core Blazor编程系列一之综述 C# ASP.NET MVC 微信和支付宝H5支付开发及Demo

柏港建站平台

柏港 asp.net(c#)

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

柏港为您推荐了一些相关资讯