[.NET学习笔记] - 在ASP.NET Core MVC中使用Blazor组件

最新推荐文章于 2025-10-16 08:04:20 发布

原创最新推荐文章于 2025-10-16 08:04:20 发布 · 2.1k 阅读

7 ·

CC 4.0 BY-SA版权

学习笔记同时被 2 个专栏收录

46 篇文章

订阅专栏

C#/.NET

34 篇文章

订阅专栏

本文介绍了如何在现有的ASP.NET Core 3.1 MVC项目中集成Blazor Server Side组件。通过NuGet安装必要的包，配置Startup.cs，创建并使用Blazor组件，以及在页面中预渲染组件，实现了MVC与Blazor的结合。同时，提到了对Ant Design Blazor库的引用。

部署运行你感兴趣的模型镜像

场景

.NET5发布了，突然对Blazor有了点兴趣，想尝尝鲜。
Blazor有两种模式，server-side与client-side(WASM)。这里打算在已有的MVC项目中使用Blazor组件，所以用的server-side。

use blazor component in ASP.NET Core 3.1 MVC。

解决方案

step0

Nuget安装Microsoft.AspNetCore.Components，注意版本号。

step1

startup.cs配置。

// ConfigureServices
services.AddServerSideBlazor();
services.AddAntDesign(); // 我用到了ant-design-blazor

# Configure
app.UseEndpoints(endpoints =>
{
    endpoints.MapControllerRoute(
        name: "default",
        pattern: "{controller=Home}/{action=Index}/{id?}");
    
    endpoints.MapBlazorHub();
});

step2

新建一个组件HelloWorld.razor。

<h3>HelloWorld</h3>

Hello @Name
<button @onclick="Toggle">Toggle</button>

@code {
    public string Name { get; set; } = "Jon";

    protected async Task Toggle()
    {
        if (Name == "Jon")
        {
            Name = "Susan";
        }
        else
        {
            Name = "Jon";
        }
    }
}

step3

在页面中使用组件。如在Index.cshtml中使用HelloWorld.razor。

@{
    ViewData["Title"] = "Home Page";
}

// ASP.NET Core 3.1
<component type="typeof(HelloWorld)" render-mode="ServerPrerendered" />

// ASP.NET Core 3.0 
// @(await Html.RenderComponentAsync<HelloWorld>(RenderMode.ServerPrerendered))

// render-mode可以根据需求调整。

到这一步基本上就能实现在mvc中调用Blazor组件的目标了。

step4

增加Views/_Imports.razor，与Views/_ViewImports.cshtml功能类似，用于添加公共的引用。

step5

Shared/_Layout.cshtml配置。

<head>
    <link href="_content/AntDesign/css/ant-design-blazor.css" rel="stylesheet" /> // ant-design-blazor
</head>

<body>
    <script src="_content/AntDesign/js/ant-design-blazor.js"></script> // ant-design-blazor
    <script src="~/_framework/blazor.server.js"></script>
    
    @RenderSection("Scripts", required: false) <!-- existing code -->
</body>