ASP.NET Core 学习笔记：4. Blazor Server 入门
原本计划今天学习其他内容，但决定坚持完成当前任务。除了 gRPC 还未运行外，Blazor 部分已有所了解。官方网站：https://dotnet.microsoft.com/apps/aspnet/web-apps/blazor
目前 Blazor 处于预览版，尚未实现完整的离线单页应用。
Blazor 提供两种运行模式：服务器端部署和客户端部署。客户端模式采用 WebAssembly，但目前仍处于预览版。
官方文档：https://docs.microsoft.com/zh-cn/aspnet/core/blazor/get-started?view=aspnetcore-3.1&tabs=visual-studio
项目文件结构
主要文件夹包括 Pages 和 Shared，分别包含 MVC 页面（以 .cshtml 结尾）和 Razor 组件（以 .razor 结尾）。
查看 wwwroot 文件夹：
注意：blazor 会将 js 代码转换为 C# 代码，实现后端开发。node 则让前端承担后端职责，历史总是惊人的相似。
接下来介绍 Blazor 的代码编写。
例子代码
这是官方示例，点击按钮可以增加计数。
@page "/counter"
<h1>计数器</h1>
<p>当前计数: @_currentCount</p>
<button class="btn btn-primary" @onclick="IncrementCount">点击我</button>
@code {
private int _currentCount = 0;
private void IncrementCount()
{
_currentCount++;
}
}
项目配置
首先从普通 AspNetCore 项目开始，进行以下配置：
// 注册服务
public void ConfigureServices(IServiceCollection services)
{
services.AddRazorPages();
services.AddServerSideBlazor();
services.AddSingleton<WeatherForecastService>();
}
// 配置中间件
public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
{
if (env.IsDevelopment())
{
app.UseDeveloperExceptionPage();
}
else
{
app.UseExceptionHandler("/Error");
app.UseHsts();
}
app.UseStaticFiles();
app.UseRouting();
app.UseEndpoints(endpoints =>
{
endpoints.MapBlazorHub();
endpoints.MapFallbackToPage("/_Host");
});
}
编写 Razor 组件
Blazor 名称类似 AspNetCore 的 Razor，语法也相近，例如 TagHelper。
编写 App.razor：
<Router AppAssembly="@typeof(Program).Assembly">
<Found Context="routeData">
<RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />
</Found>
<NotFound>
<LayoutView Layout="@typeof(MainLayout)">
<p>对不起，这里没有内容。</p>
</LayoutView>
</NotFound>
</Router>
endpoints.MapFallbackToPage("/_Host") 可以理解为默认页面。
内容如下：
@page "/"
@namespace BlazorOne.Pages
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
@{
Layout = null;
}
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>BlazorOne</title>
<base href="~/" />
<link rel="stylesheet" href="css/bootstrap/bootstrap.min.css" />
<link href="css/site.css" rel="stylesheet" />
</head>
<body>
<app>
<component type="typeof(App)" render-mode="ServerPrerendered" />
</app>
<div id="blazor-error-ui">
<environment include="Staging,Production">
发生错误。此应用程序可能无法重新加载。
</environment>
<environment include="Development">
未处理的异常。请参阅浏览器开发者工具获取详细信息。
</environment>
<a href="" class="reload">重新加载</a>
<a class="dismiss">🗙</a>
</div>
<script src="_framework/blazor.server.js"></script>
</body>
</html>
这是一个普通的 AspNetCore MVC 页面，但 body 中包含 <app> 节点，可以渲染其他 Razor 组件。
效果
这是官方示例运行的效果，简单展示了一下 Blazor 的基本功能。
微软的官方文档不错，尽管可能是机器翻译，但看起来很通顺，内容也很详细。
官方文档：https://docs.microsoft.com/zh-cn/aspnet/core/blazor/hosting-models?view=aspnetcore-3.1
欢迎交流
问题请在微信公众号后台留言，我会一一回复。
- 微信公众号：画星星高手
- 打代码直播间：https://live.bilibili.com/11883038
- 知乎：https://www.zhihu.com/people/dealiaxy
- 专栏：https://zhuanlan.zhihu.com/deali
- 简书：https://www.jianshu.com/u/965b95853b9f
