如何快速入门ASP.NET Core Blazor基础篇？

大家好，我是码农刚子。最近自学ASP.NET Core Blazor，顺便记录一下学习过程和笔记，后面也会持续更新学习内容。如果有正在进行或者想学习Blazor的同学，欢迎一起探讨学习。 1、Blazor 简介 Blazor 是由Microsoft开发的一款基于.NET的开源交互式Web UI框架。Blazor使开发人员能够使用C#和HTML建立全堆栈的单页应用程序，并避免使用JavaScript。Blazor基于组件模型，该模型提供了以具有强类型的符合Razor标准的页面和组件的形式构建用户界面的能力。 Blazor的加入使得.NET开发人员有机会在客户端和服务器上使用同一种编程模型，同时享受到.NET的优势，比如其功能强大的运行时，标准库，语言互操作性和辅助开发者高效开发的工具等。 在Blazor中，有两个主要的托管模型： Blazor Server: 在此模式下，应用程序在服务器端运行，并使用SignalR实时通讯框架与浏览器进行交互。这种模型要求永久的有效连接，但是客户端的计算和下载需求会大大减低，所有的逻辑运行都在服务器端。 Blazor WebAssembly: 在此模式下，应用程序直接在客户端的WebAssembly中运行，允许C#代码在浏览器中执行，不依赖服务器。 Blazor 支持的浏览器： 下表所示的浏览器在移动平台和桌面平台上均支持 Blazor WebAssembly 和 Blazor Server。 浏览器 Version Apple Safari 当前版本+ Google Chrome 当前版本+ Microsoft Edge 当前版本+ Mozilla Firefox 当前版本+ Blazor三种托管模型及其各自特点 1、Blazor Server 简介： Blazor Server 应用程序在服务器上运行，可享受完整的 .NET Core 运行时支持。所有处理都在服务器上完成，UI/DOM 更改通过 SignalR 连接回传给客户端。这种双向 SignalR 连接是在用户第一次从浏览器中加载应用程序时建立的。 由于 .NET 代码已经在服务器上运行，因此您无需为前端创建 API。您可以直接访问服务、数据库等，并在传统的服务端技术上做任何您想做的事情。在客户端上，Blazor 脚本 (blazor.server.js) 与服务器建立 SignalR 连接。 脚本由 ASP.NET Core 共享框架中的嵌入资源提供给客户端应用。 客户端应用负责根据需要保持和还原应用状态。 Blazor Server 托管模型优点： 下载项大小明显小于 Blazor WebAssembly 应用，且应用加载速度快得多。 应用可以充分利用服务器功能，包括对 .NET Core API 的使用。 服务器上的 .NET Core 用于运行应用，因此调试等现有 .NET 工具可按预期正常工作。 支持瘦客户端。 例如，Blazor Server 应用适用于不支持 WebAssembly 的浏览器以及资源受限的设备。 应用的 .NET/C# 代码库（其中包括应用的组件代码）不适用于客户端。 Blazor Server 托管模型局限性： 通常延迟较高。 每次用户交互都涉及到网络跃点。 不支持脱机工作。 如果客户端连接失败，应用会停止工作。 若要缩放具有许多用户的应用，需要使用服务器资源处理多个客户端连接和客户端状态。 需要 ASP.NET Core 服务器为应用提供服务。 无服务器部署方案不可行，例如通过内容分发网络 (CDN) 为应用提供服务的方案。 2、Blazor WebAssembly 简介： Blazor WebAssembly（WASM）应用程序在浏览器中基于WebAssembly的.NET运行时运行客户端。Blazor应用程序及其依赖项和.NET运行时被下载到浏览器中。该应用程序直接在浏览器的UI线程上执行。UI更新和事件处理在同一进程中进行。应用程序的资产被作为静态文件部署到能够为客户提供静态内容的网络服务器或服务上。当Blazor WebAssembly应用被创建用于部署，而没有后端ASP.NET Core应用为其提供文件时，该应用被称为独立的Blazor WebAssembly应用。当应用程序被创建用于部署，并有一个后端应用程序为其提供文件时，该应用程序被称为托管的Blazor WebAssembly应用程序。 Blazor WebAssembly 托管模型优点： 从服务器下载应用后，没有 .NET 服务器端依赖项，因此，如果服务器脱机，应用将保持正常运行。 可充分利用客户端资源和功能。