用C#代替Javascript来做Web应用，是有多爽？
今天聊聊 Blazor。
Blazor 是一个 Web UI 框架。这个框架允许开发者使用 C# 来创建可运行于浏览器的具有完全交互 UI 的 Web 应用。
可以理解为，这是一个 C# 语言的 Vue / Angular / React，可以和 HTML、CSS 一起实现可重用的 Web UI，可以和服务器共享代码和库。
Blazor 拥有现代 Web 框架具备的所有功能，包括：
用于构建 composable UI 的组件模型
路由
布局
表格和验证
依赖注入
JavaScript 互操作
开发期间在浏览器中实时重新加载
服务器端渲染
在浏览器和 IDE 中全面调试 .NET
能够通过 asm.js 在较早版本的（非 WebAssembly ）浏览器上运行
Blazor 有两种托管模型：
Blazor WebAssembly （blazorwasm）
Blazor Server （blazorserver）
两种模型从应用层面没有太大的区别，但从实际运行和布署上，两个模型还是有相当的区别的。
Blazor WebAssembly 应用跑在浏览器上，要求浏览器支持 WebAssembly。换句话说，早期的一些浏览器并不支持 WebAssembly，所以也无法使用。同时，应用在首次运行时，需要下载应用和应用依赖项和运行时到本地，所以会有个加载延时。但是，这种模型可以全部运行在客户端，充分利用客户端资源，对服务器压力小。
Blazor Server 则相反，应用跑在服务器上，通过SignalR来处理 UI 更新、事件处理。所以，它加载速度快，可以充分利用服务器功能，并可以运行早期的浏览器。不过，因为应用需要跟服务器通讯，所以，不支持脱机工作，服务器压力大。
简单的区别就这么多，详细的内容，我会另开一文来说。
今天我们主说 Blazor for Server-Side ，也就是上面介绍的 Blazor Server 模型。
为了防止不提供原网址的转载，特在这里加上原文链接：https://www.cnblogs.com/tiger-wang/p/13264415.html
一、创建空项目我们先创建一个Web空项目：
% dotnet new sln -o demoThe template "Solution File" was created successfully.
% cd demo
% dotnet new web -o demo
The template "ASP.NET Core Empty" was created successfully.
Processing post-creation actions...
Running 'dotnet restore' on demo/demo.csproj...
Determining projects to restore...
Restored /demo/demo/demo.csproj (in 148 ms).
Restore succeeded.
% dotnet sln add demo/demo.csproj
Project `demo/demo.csproj` added to the solution.
创建完成。看一下目录结构：
% tree ..
├── demo
│ ├── Program.cs
│ ├── Properties
│ │ └── launchSettings.json
│ ├── Startup.cs
│ ├── appsettings.Development.json
│ ├── appsettings.json
│ └── demo.csproj
└── demo.sln
这就是我们的基础项目了。后面所有的项目，都会在这个基础上进行修改和增加。
二、添加 Blazor 服务打开Startup.cs文件。
1. 修改 ConfigureServices在ConfigureServices中添加：
services.AddRazorPages();services.AddServerSideBlazor();
这两行代码中，services.AddRazorPages()是添加Razor服务。
Razor和Blazor名字很像，但本身并没有关系。Razor是一种服务器标记语言，类似于PHP。
这里添加Razor，只是因为我习惯用Razor，并没有特殊性。如果你习惯用 MVC，这儿也可以换成services.AddMvc()，是一样的。
下面一行services.AddServerSideBlazor()，才是真正的内容：添加Blazor Server-Side服务。
2. 修改 Configure在Configure中添加：
app.UseStaticFiles();app.UseEndpoints(endpoints =>
{
endpoints.MapBlazorHub();
});
其中，app.UseStaticFiles()表明我们会用到静态文件。文件默认要求放在wwwroot目录下，所以可以把目录也建了。
app.UseEndpoints，需要使用Blazor路由，所以要改成endpoints.MapBlazorHub()。
这儿就完成了。
3. 加入路由接下来，我们需要建立路由。在项目中建一个目录Pages。这是Blazor默认的单页面目录。然后在里面建一个_Host.cshtml。
@page "http://www.likecs.com/"@namespace demo.Pages
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Demo</title>
<base href="~/" />
</head>
<body>
<app>
<component type="typeof(App)" render-mode="ServerPrerendered" />
</app>
<script src="_framework/blazor.server.js"></script>
</body>
</html>