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

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

use blazor component in ASP.NET Core 3.1 MVC。

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

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();
});

新建一个组件HelloWorld.razor。

HelloWorld

Hello @Name
Toggle

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

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

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

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

// ASP.NET Core 3.1


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

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

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

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

Shared/_Layout.cshtml配置。

     // ant-design-blazor



     // ant-design-blazor
    
    
    @RenderSection("Scripts", required: false) 

Use Blazor in your existing ASP.NET Core 3.x application