Blazor —— 教你从零搭建 Blazor for Server-Side 项目
前言
这篇文章不会介绍什么是 Blazor，若想理解基本概念，请自行百度或查看微软官方文档。这篇文章是偏向技术的，也就是说它不是概念，而是教你从零开始搭建一个 Blazor 项目，前提是你必须先掌握 ASP.NET CORE 的基本知识。
学习Blazor的前提知识点
- ASP.NET CORE 的基本概念
- Razor Page 的基本概念
- 依赖注入的知识
言归正传
Blazor 是属于 ASP.NET CORE 3.0 体系下的又一套框架，所以你第一件事要做的就是下载 ASP.NET CORE 3.0 SDK 环境。而且仅支持 Visual Studio 2019 的版本，如果没有的话，出门右转。
小伙伴们一定要转变一个思维：
Blazor 是使用 C# 语言来进行客户端开发的框架。
和 React / Vue / Angular 这些客户端框架一样，是用来做前端的。具体怎么实现的，大家自己去看文档吧。
从零开始
请记住：这篇教程是从零开始，而不是从一个 Blazor 模版开始。
而是使用
1. 创建一个空的解决方案
然后为这个解决方案创建一个空项目或者一个控制台项目
创建完成后，只有一个 Program.cs
2.修改项目文件
- 修改项目文件【直接点击项目，或使用右键->编辑项目文件】
然后会看到如下显示代码：<Project Sdk="Microsoft.NET.Sdk"> <PropertyGroup> <OutputType>ExeOutputType> <TargetFramework>netcoreapp3.0TargetFramework> PropertyGroup> Project> - 修改节点【Project】的 SDK 值为【Microsoft.NET.Sdk.Web】，表示使用的是 Web 项目。
<Project Sdk="Microsoft.NET.Sdk.Web"> <PropertyGroup> <OutputType>ExeOutputType> <TargetFramework>netcoreapp3.0TargetFramework> PropertyGroup> Project>
3. 添加 Startup.cs 类
public class Startup
{
public void Configure(IApplicationBuilder app)
{
throw new NotImplementedException();
}
public void ConfigureServices(IServiceCollection services)
{
throw new NotImplementedException();
}
}
4.修改 Program.cs 类
class Program
{
static void Main(string[] args)
{
CreateHostBuilder(args).Build().Start();
}
static IHostBuilder CreateHostBuilder(string[] args)
=> Host.CreateDefaultBuilder(args)
.ConfigureWebHostDefaults(configure =>
{
configure.UseStartup<Startup>();
});
}
对比一下 ASP.NET CORE 2.2 的写法
public class Program
{
public static void Main(string[] args)
{
CreateWebHostBuilder(args).Build().Run();
}
public static IWebHostBuilder CreateWebHostBuilder(string[] args) =>
WebHost.CreateDefaultBuilder(args)
.UseStartup<Startup>();
}
大致猜测
3.0 将 Host 抽象出来，可能是为了更好的兼容 Winform 和 WPF，也有可能是为了下一代的跨平台 App 做准备，因此他们托管的不一定就是 WebHost，可以是其他容器。
5. 修改 Starup.cs 的代码
public class Startup
{
public void ConfigureServices(IServiceCollection services)
{
services.AddRazorPages();
services.AddServerSideBlazor();
}
public void Configure(IApplicationBuilder app)
{
app.UseStaticFiles(); //必须要有
app.UseRouting();
app.UseEndpoints(configure =>
{
configure.MapBlazorHub();
configure.MapFallbackToPage("/_Host");
});
}
}
services.AddRazorPages()
这是添加 Razor Page 的服务，Blazor 也兼容 Mvc 视图模式，你也可以改成services.AddMvc()，这里不过是添加依赖注入的服务的位置。services.AddServerSideBlazor()
同理，也需要添加 Server-Side Blazor 的服务。点这里查看有关Blazor for Server-Side 和 Blazor for Client-Side(Blazor WebAssembly) 的区别。
在3.0中，映射路由的中间件代码，从原来的
app.UseMvc()改为使用了app.Endpoints()终结点模式。相关3.0的迁移改动请移步微软官方迁移文档。
app.MapBlazorHub()
添加 Singlr 对 Blazor 的路由机制。app.MapFallbackToPage()
这是一个失败处理的路由，如果路由匹配失败，则跳转到该页面。
6. 添加一个 _Host.cshtml 页面
Razor Page 默认是在 Pages 文件夹下。
代码如下：
@page "/"
@addTagHelper *,Microsoft.AspNetCore.Mvc.TagHelpers
<html>
<head>
<title>title>
<base href="~/" />
head>
<body>
<script type="text/javascript" src="_framework/blazor.server.js">script>
body>
html>
注意事项
- @page 标记一定要有，而且是“/”，表示根目录。
- @addTagHelper *,Microsoft.AspNetCore.Mvc.TagHelpers 必须要有
- 在
中，一定要有 - 在底部必须有
代码，这个 js 是内置的，路径和名字就得原封不动是这个。
7. 在 Pages 外面添加一个 _Imports.razor 组件
_Imports.razor 组件是用来导入全局命名空间的，相当于 using 命名空间，否则就得在每一个 razor 组件中自己引用命名空间。
默认会有以下命名空间：
@using Microsoft.AspNetCore.Components.Forms
@using Microsoft.AspNetCore.Components.Web
@using Microsoft.AspNetCore.Components.Routing
@using Microsoft.JSInterop
需要其他的，自行添加。
8. 添加 App.razor 组件
该组件是一个基本路由组件，用来呈现 SPA(Single Page Application)的单页面容器。（学过前端的应该都懂这个基本概念吧。）
<Router AppAssembly="typeof(Program).Assembly">
<Found Context="routeData">
<RouteView RouteData="routeData">RouteView>
Found>
<NotFound>
<h2>抱歉！找不到页面。h2>
NotFound>
Router>
Router 组件，位于 Microsoft.AspNetCore.Components.Routing 命名空间。AppAssembly是必填的，要指定一个路由所在的程序集。因此你可以有多个不同的路由形式。
Found 组件，当找到页面了显示的内容区域。Coontext是必填的，声明一个变量。RouterView 组件，顾名思义就是显示的视图容器，RouteData属性要求必填，使用Found 组件声明的Context的变量即可。
NotFound 组件当然就是找不到视图要显示的内容了。
9. 修改 _Host.cshtml 页面
@page "/"
@addTagHelper *,Microsoft.AspNetCore.Mvc.TagHelpers
<html>
<head>
<title>title>
<base href="/" />
head>
<body>
@(await Html.RenderComponentAsync<BlazorApp.App>(RenderMode.ServerPrerendered))
<script type="text/javascript" src="_framework/blazor.server.js">script>
body>
html>
在 body 内部增加了一段代码，用于呈现某个组件：@(await Html.RenderComponentAsync
10. 最后，你可以新建一个 Index.razor 来显示首页
@page "/"
<h1>这里是首页h1>
然后运行你的项目吧！！准备好雀跃一番_
恭喜你完成了第一个 Blazor App 的搭建
现在你学会了 Blazor Server-Side 从零开始搭建的技能，所以接下来可以趁热打铁，开始搭建属于自己的应用程序咯。