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

57 阅读 0 评论 38 点赞

我是靠谱客的博主斯文饼干，最近开发中收集的这篇文章主要介绍[.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。

解决方案

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>