本来今天开始是有其他的安排了，也没办法抽出那么多时间来学NetCore，不过我想做事情有始有终吧，除了gRPC还没跑起来之外，Blazor这部分也了解了一点，官网地址：https://dotnet.microsoft.com/apps/aspnet/web-apps/blazor
目前来说还不是很完善，真正的离线单页应用还处于预览版阶段。
Blazor目前有两种运行模式，一种是服务器端部署，一种是客户端部署，后者可以完全脱离服务器，也就是标题写的WebAssembly，不过目前处于预览版（有点标题党了）。
项目文件结构
主要的文件夹就是这个Pages和Shared。里面包含了mvc页面(cshtml结尾)和razor组件(razor结尾)。
然后再看看wwwroot文件夹：
可以看到只有css，没有js文件夹，因为blazor要做的事情就是要把js代码换成C#代码，其实就是让后端开发去做前端开发。
（PS：node就是让前端去做后端，历史总是惊人的相似hhh）
先看看它的代码是怎么写的，后面再具体介绍。
例子代码
这是官方的例子，点击按钮之后可以计算点击次数。
@page "/counter"
<h1>Counter</h1>
<p>Current count: @_currentCount</p>
<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>
@code {
private int _currentCount = 0;
private void IncrementCount()
{
_currentCount++;
}
}
我感觉项目的具体代码应该放在最后面，还是继续介绍一下原理什么的吧~
托管模型
就是前文提到的服务器和客户端两种模式。
客户端模型
Blazor 的主体宿主模型在 WebAssembly 上的浏览器中运行客户端。 将 Blazor 应用、其依赖项以及 .NET 运行时下载到浏览器。 应用将在浏览器线程中直接执行。 UI 更新和事件处理发生在同一进程中。 应用的资产将作为静态文件部署到 web 服务器或可为客户端提供静态内容的服务。
服务端模型
使用 Blazor 服务器托管模型，可在服务器上从 ASP.NET Core 应用中执行应用。 UI 更新、事件处理和 JavaScript 调用是通过 SignalR 连接进行处理。
又出现SignalR了，真的好用，关于SignalR的可以看看我上一篇：Asp.Net Core学习笔记：（三）使用SignalR实时通信框架开发聊天室
Blazor Server 宿主模型具有以下几个优点：
- 下载大小明显小于 Blazor WebAssembly 应用，且应用加载速度快得多。
- 应用充分利用服务器功能，包括使用任何与 .NET Core 兼容的 Api。
- 服务器上的 .NET Core 用于运行应用程序，因此现有的 .NET 工具（如调试）可按预期方式工作。
- 支持瘦客户端。 例如，Blazor Server apps 适用于不支持 WebAssembly 的浏览器以及资源受限设备上的浏览器。
- 应用程序的 .NET/C#代码库（包括应用程序的组件代码）不会提供给客户端。
Blazor Server 宿主有一些缺点：
- 通常存在较高的延迟。 每个用户交互都涉及网络跃点。
- 无脱机支持。 如果客户端连接失败，应用将停止工作。
- 对于包含多个用户的应用而言，可伸缩性非常困难。 服务器必须管理多个客户端连接并处理客户端状态。
- 为应用提供服务需要 ASP.NET Core 服务器。 不可能的无服务器部署方案（例如，通过 CDN 为应用提供服务）。
项目配置
首先是从一个普通的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 =>
{
// 相当于一个Blazor版的SignalR
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>Sorry, there's nothing at this address.</p>
</LayoutView>
</NotFound>
</Router>
之前在中间件那里配置了endpoints.MapFallbackToPage("/_Host");，可以理解为默认页面吧。
内容如下：
@page "/"
@namespace BlazorOne.Pages
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
@{
Layout = null;
}
<!DOCTYPE html>
<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">
An error has occurred. This application may no longer respond until reloaded.
</environment>
<environment include="Development">
An unhandled exception has occurred. See browser dev tools for details.
</environment>
<a href="" class="reload">Reload</a>
<a class="dismiss">
标签：Core,Asp,app,Server,https,服务器,Blazor,客户端
From： https://www.cnblogs.com/deali/p/18011840