这篇文章演示了如何使用Blazor构建SPA应用。Blazor简化了可在任何浏览器中运行的快速且美观的SPA的任务。它通过使开发人员能够编写基于Dotnet的Web应用程序来实现此目的。 这些应用程序可以在使用了开放Web标准的浏览器中运行。让我们开始使用Blazor吧。 首先，在服务器端使用Razor组件，接下来，在浏览器中将应用程序作为Web Assembly运行。 服务器端 支持在 ASP.NETCore 应用程序的服务器上托管 Razor组件。 客户端 Blazor应用程序以及.NET运行时和其他依赖项已下载到浏览器中。另外，你可以在客户端和服务器端之间共享模型、验证和其他业务逻辑。此外，你还可以利用在浏览器上直接运行的几个.NET 库。 下一步工作 除了此篇文章外，我还计划写其他几篇文章： 使用 Blazor和 EntityFrameworkCore进行CRUD操作 Blazor中模型验证 Blazor应用程序的容器化
本文讨论了SPA和传统Web应用程序之间的选择，并说明了服务器端渲染和客户端渲染之间的区别。 ? 传统Web应用程序 传统的Web应用程序是很少或没有客户端处理的应用程序。 这种方式允许 html代码 和后端代码写在一起， 这样的优势是可以快速进行页面开发，传统的Web应用程序工作流通常向用户提供一个表单，一个提交按钮，并且在用户单击按钮后会从服务器收到响应，这样的用户体验通常不好 Blazor是一个SPA框架，它使用编译的C＃来操纵HTML DOM来替代JavaScript，Blazor允许使用服务器端或客户端托管模型，但是无论哪种情况，浏览器都可以操作HTML DOM客户端，该应用程序仍然是 C＃程序员几乎无需学习就可以开始开发Blazor Web应用程序，如果C＃程序员已经使用ASP MVC，你会更得心应手，Blazor语法与ASP MVC语法非常相似，如果您的团队拥有MVC的代码库，则向 Blazor托管模型 区分Blazor托管模型和页面渲染很重要,在客户端模型中，Blazor在浏览器内部的WebAssembly（WASM）上运行，在服务器端模型中，Blazor在服务器上运行，并通过Signal-R
手把手教您从零开始搭建网站/Minecraft游戏服务器/图床/网盘、部署应用、开发测试、GPU渲染训练等，畅享云端新生活。
本文讨论了SPA和传统Web应用程序之间的选择，并说明了服务器端渲染和客户端渲染之间的区别。 [clipboard_20210109_051157.png] 传统Web应用程序 传统的Web应用程序是很少或没有客户端处理的应用程序。HTML在服务器端渲染并传递到浏览器。 这种方式允许 html代码 和后端代码写在一起， 这样的优势是可以快速进行页面开发，传统的Web应用程序工作流通常向用户提供一个表单，一个提交按钮，并且在用户单击按钮后会从服务器收到响应，这样的用户体验通常不好 Blazor是一个SPA框架，它使用编译的C＃来操纵HTML DOM来替代JavaScript，Blazor允许使用服务器端或客户端托管模型，但是无论哪种情况，浏览器都可以操作HTML DOM客户端，该应用程序仍然是 ）上运行，在服务器端模型中，Blazor在服务器上运行，并通过Signal-R将HTML传输到客户端。
如果您正在编写 .NET Web 应用程序，您很可能已经意识最近一年在.NET Web开发领域的热点都是 Blazor 的。 我们看到Blazor的很多改进：CSS隔离、JavaScript隔离、组件虚拟化、切换事件支持、延迟加载、服务器端预渲染等等。 Blazor 是基于 WebAssembly 标准构建的（使用 C# 而不是 JavaScript 来构建 Web 应用程序），而不是使用可以突然被放弃的微软独家技术构建的。 Blazor 降低了通常与 JavaScript 关联的前端学习曲线，并允许开发人员使用他们的语言和工具完成工作。Blazor不会取代JavaScript 。 但是，如果您是服务与一家拥有大多数 C# 开发人员的公司，则工作效率将明显提高。
程序运行在.NET运行时上面，有服务器端和客户端两种模式，对于服务器端，HTML DOM呈现在服务器上，然后通过Signal-R 发送到浏览器，进行数据渲染, 对于客户端，Mono在浏览器内部的WebAssembly 上运行，WASM 无需服务器端渲染或其他浏览器插件即可充分发挥.NET的强大功能。 Blazor 允许开发人员在桌面应用和移动应用中使用，Electron允许开发人员使用HTML和CSS构建桌面应用程序，Electron.Net是一种弥合差距并允许与Blazor一起使用的技术，微软已为本机移动应用程序建立了实验性绑定 Blazor 功能特性 •使用C＃代替JavaScript和TypeScript构建 Web UI•构建渐进式Web应用程序（PWA）•创建和使用用C＃编写的可重用组件•在服务器端模式提供全面的调试支持 Angular的更高版本也以类似于Blazor的方式支持服务器端渲染。模板语法与razor语法类，并且具有数据绑定的HTML DOM UI组件。
，进行数据渲染, 对于客户端，Mono在浏览器内部的WebAssembly上运行，WASM 无需服务器端渲染或其他浏览器插件即可充分发挥.NET的强大功能。 Blazor 允许开发人员在桌面应用和移动应用中使用，Electron允许开发人员使用HTML和CSS构建桌面应用程序，Electron.Net是一种弥合差距并允许与Blazor一起使用的技术，微软已为本机移动应用程序建立了实验性绑定 ，这可能表明Blazor应用程序将在iOS和Android等平台上运行。 Angular的更高版本也以类似于Blazor的方式支持服务器端渲染。模板语法与razor语法类，并且具有数据绑定的HTML DOM UI组件。 Blazor将熟悉的HTML DOM带入C＃，并为Web开发人员提供了使用C＃的能力。它具有构建桌面和移动应用程序的潜力，并在Microsoft开发社区中具有吸引力。
共享使用 .NET 编写的服务器端和客户端应用逻辑。 将 UI 呈现为 HTML 和 CSS，以支持众多浏览器，其中包括移动浏览器。 应用充分利用服务器功能，包括使用任何与 .NET Core 兼容的 Api。 服务器上的 .NET Core 用于运行应用程序，因此现有的 .NET 工具（如调试）可按预期方式工作。 支持瘦客户端。 例如，Blazor 服务器应用程序适用于不支持 WebAssembly 的浏览器以及资源受限设备上的浏览器。 应用程序的 .NET/C#代码库（包括应用程序的组件代码）不会提供给客户端。 Blazor 服务器托管有缺点： 通常存在较高的延迟。 每个用户交互都涉及网络跃点。 无脱机支持。 如果客户端连接失败，应用将停止工作。 对于包含多个用户的应用而言，可伸缩性非常困难。 Blazor WebAssembly 托管模型具有以下几个优点： 没有 .NET 服务器端依赖项。 应用在下载到客户端之后完全正常运行。 完全利用客户端资源和功能。 工作从服务器卸载到客户端。
毋庸置疑，当应用程序的位置以编程方式更改时，路由器也会启动。最后一点也非常重要，路由器在浏览器历史记录中记录任何它负责的位置更改，因此后退和前进按钮可以按用户的期望工作。 路由器之战：Blazor 与Angular 很长一段时间，路由逻辑的实现都隐藏在 Web 服务器或服务器端框架（如 ASP.NET）的折叠中。 在 Blazor 中，URL 模式或路由模板被收集在路由表中。该表通过查看使用 Route 属性修饰的 Blazor 应用程序的组件进行填充。每个组件的路径都将成为受支持的路由模板。 对于具有约束的路由，任何无法成功转换为指定类型的参数值都会使匹配失效，并且无法识别该路由。 更智能的链接和编程 URL 导航 在 Blazor 应用程序中，欢迎你使用定位标记来创建指向外部内容的链接。 但是，当定位标记用于呈现菜单或导航栏时，可能需要一些额外的工作来调整 CSS 样式以反映链接的状态。 内置的 Blazor NavLink 组件可以用于任何需要定位点元素的地方，尤其是在菜单中。
小编目前的精力是更多的专注于Blazor-WebAssembly模式的研究，所以本系列文章只会对Server-Side模式做简要说明。 相对于Server-Side模式，当与服务器连接断掉时，依然可以连接，但是涉及到数据库查询等后台功能时，肯定是无法正常工作的。 可以减少服务器负载压力。 WebAssembly缺点(此处有误，请看评论) 由于其每个交互HTML由服务器端预呈现，这意味Server-Side无法使用静态化方案。 Server-Side优点 Blazor 服务器端已经先于客户端呈现了HTML内容。相对于WebAssembly模式要下载很多的文件，Server-Side的启动速度更快，也对搜索引擎更加友好。 Server-Side缺点 由于其每个交互HTML由服务器端预呈现，这意味Server-Side无法使用静态化方案。
</button> Blazor应用程序的身份验证和授权支持 Blazor现在内置了对处理身份验证和授权的支持。 服务器端Blazor模板现在支持使用ASP.NET Core Identity，Azure AD和Azure AD B2C启用所有标准身份验证配置的选项。 要创建启用了身份验证的新Blazor应用程序： 创建一个新的Blazor（服务器端）项目，然后选择链接以更改身份验证配置。 这些Router参数仅在此版本的客户端Blazor中提供支持，但在将来的更新中将为服务器端Blazor启用它们。 在服务器端Blazor应用程序中AuthenticationStateProvider，用户从HttpContext建立与服务器的连接的表面。
</button> Blazor应用程序的身份验证和授权支持Blazor现在内置了对处理身份验证和授权的支持。 服务器端Blazor模板现在支持使用ASP.NET Core Identity，Azure AD和Azure AD B2C启用所有标准身份验证配置的选项。 要创建启用了身份验证的新Blazor应用程序：创建一个新的Blazor（服务器端）项目，然后选择链接以更改身份验证配置。 这些Router参数仅在此版本的客户端Blazor中提供支持，但在将来的更新中将为服务器端Blazor启用它们。 在服务器端Blazor应用程序中AuthenticationStateProvider，用户从HttpContext建立与服务器的连接的表面。
Blazor 可以使用 WebAssembly 直接在浏览器中运行客户端 C# 代码，正因为它是运行在 WebAssembly 上的 .NET 程序，所以客户端也可以重用服务器端的代码和库。 即使不使用 WebAssembly，Blazor 也可以在服务器端运行客户端的业务逻辑。 而 Blazor 使用的是开放的 Web 标准，不需要额外的插件或代码语言转换。Blazor 可以在所有主流的 Web 浏览器中工作，包括移动端浏览器。 在客户端运行 Blazor 代码和 JavaScript 框架一样是在安全的沙箱中执行的，在基于开放的 Web 标准基础上，Blazor 具有服务器端代码的灵活性，比如直接连接数据库。 当使用服务器端运行代码时，Blazor 会负责在客户端使用 JavaScript 无缝调用 C# 代码。 下面是一个 JavaScrit 调用 C# 的示例。
如今，C# 程序员可以编写桌面、服务器端 Web、云、电话、平板电脑、手表、电视和 IoT 应用程序。Blazor 填补了欠缺的一环，C# 开发人员现在可以直接在用户浏览器中共享代码和业务逻辑。 对于 C# 开发人员来说，这是一项十分强大的功能，可显著提升工作效率。 本文将展示常见的代码共享用例。我将展示如何在 Blazor 客户端和 WebAPI 服务器应用程序之间共享验证逻辑。 新建 Blazor 应用程序 首先，新建 Blazor 应用程序。 在“新建项目”对话框中，依次单击“ASP.NET Core Web 应用程序”和“确定”，再选择图 1 所示对话框中的“Blazor”图标。单击“确定”。这会创建默认的 Blazor 示例应用程序。 如果已试用过 Blazer，便会对此默认应用程序很熟悉。 ? 图 1：选择 Blazor 应用程序 新的注册窗体将展示验证业务规则的共享逻辑。
在本文中，我们将介绍如何将 Blazor 应用程序放入Jexus 容器以进行开发和部署。我们将使用 .NET Core CLI，因此无论平台如何，使用的命令都将是相同的。 Blazor 服务器：运行服务器端并使用 SignalR 与浏览器通信的 Web 框架。 WebAssembly 托管模型的目标是在浏览器中托管整个应用程序。 Blazor WebAssembly 应用程序中的项目包括 HTML、JavaScript、.NET 运行时版本和二进制文件。它们都在浏览器中运行，因此您可以将它托管为静态网站。 Web 组装应用程序： dotnet new blazorwasm -o wasmtest 这将创建一个新的 Blazor WebAssembly 应用程序，名称为"wasmtest"。 在生产环境中，我们可以通过Jexus配置更多的操作，上面这些步骤是托管你的Blazor WebAssembly 应用程序在容器中进行开发。
从2014年开始的演变，支持多平台，并提供给各种操作系统，如Linux，Mac，iOS和Android等。 它涵盖广泛的应用程序，从桌面、Web 应用程序、云、移动、游戏、IoT 到 AI。 愿景还包括云原生，Microsoft 计划为所有现代工作负载提供最佳解决方案。.NET 为所有开发人员提供了更多的选择。开发者使用.NET 上的工具和平台，无论他们选择什么，都很容易实现他们想要的。. NET 开发人员 可以使用称为宇宙第一的 Visual Studio 集成开发环境，可在各种目标上部署您喜爱的应用，从而保持高工作效率。 NET 6 还改进了对 "ASP.NET Core Blazor"的支持，以方便 C# 开发人员进行 Web 前端开发。Web 应用程序开发在服务器端和前端使用不同的语言和框架。 相反，它提供了一种在 Blazor 服务器上运行程序并使用称为 SignalR 的技术进行渲染的方法。
WebAssembly被设计为可以和JavaScript一起协同工作——通过使用WebAssembly的JavaScript API，你可以把WebAssembly模块加载到一个JavaScript应用中并且在两者之间共享功能 浏览器充当应用程序的宿主。在 Blazor WebAssembly 应用程序中构建的文件将编译并发送到浏览器。然后，浏览器在浏览器的执行沙盒中运行您的 JavaScript、HTML 和 C#。 换句话说，blazor使用了一个驻留在另一个虚拟机中的虚拟机，堪称《盗梦空间》级别的悖论，也是一种在浏览器中运行非 JavaScript 应用程序框架的巧妙方法。 您可以使用 C# 开发丰富的前端应用程序。 WebAssembly自身无法访问任何平台API，而要访问这些API，JavaScript也是必要的。
共享使用 .NET 编写的服务器端和客户端应用逻辑。 将 UI 呈现为 HTML 和 CSS，以支持众多浏览器，其中包括移动浏览器。 与新式托管平台（如 Docker）集成。 受益于 .NET 的性能、可靠性和安全性。 在 Windows、Linux 和 macOS 上使用 Visual Studio 保持高效工作。 1、Ant Design Blazor Ant Design Blazor是一套基于 Ant Design 和 Blazor 的企业级组件库。 特性 提炼自企业级中后台产品的交互语言和视觉风格。 开箱即用的高质量 Blazor 组件，可在多种托管方式共享。 支持基于 WebAssembly 的客户端和基于 SignalR 的服务端 UI 事件交互。 BootstrapBlazor 是一套基于 Bootstrap 和 Blazor 的企业级组件库，可以认为是 Bootstrap 项目的 Blazor 版实现。
共享用 .NET 编写的服务器端和客户端应用程序逻辑。将 UI 渲染为 HTML 和 CSS，以提供广泛的浏览器支持，包括移动浏览器。 Blazor Server Blazor 将组件渲染逻辑与 UI 更新的逻辑进行了解耦。Blazor Server 支持在服务器上的 ASP.NET Core 应用程序中承载 Razor 组件。 Blazor WebAssembly （预览） Blazor 应用程序也可以使用基于 WebAssembly 的 .NET 运行时直接在浏览器中运行。 Razor 组件 Blazor 应用程序是由组件 (components) 构建而成的。组件是自包含的用户界面元素，例如页面、对话框或者表单等。 通过客户端到服务器的流传输，服务器端方法可以采用 IAsyncEnumerable或者 ChannelReader的实例。
值得一提的是，Blazor是由Browser和Razor这两个单词合并而成的，意思就是Blazor可以基于客户端执行Razor视图后将HTML呈现给浏览器。 所以想要更好的理解Blazor，就要首先更好的了解浏览器和Razor。 Blazor有以下几个优点： 使用C＃来取代JavaScript创建丰富的交互式UI 基于.NET及其生态编写服务器端和客户端应用程序逻辑 糅合现有HTML和CSS技术，提供了广泛的浏览器支持，包括移动浏览器其 Blazor是开源的，其源码位置在GitHub上 ❝另外需要注意的，Blazor和Silverlight不可混为一谈，Blazor是基于开放标准而构建的，本身不需要任何额外插件。 通过以上示例，我们基本上对Blazor和WebAssembly的部分运行机制有了一个比较清晰的认识了，接下来，我们继续讨论有关Blazor的内容。
里面如是说： 何时应使用传统 Web 应用程序： 应用程序的客户端要求简单，甚至要求只读。 应用程序需在不支持 JavaScript 的浏览器中工作。 有关 Razor 组件（名为 Blazor 的代码）的详细信息，请参阅 Blazor 入门。 何时选择传统 Web 应用 以下内容详细介绍前面提到的选择传统 Web 应用程序的原因。 应用程序需在不支持 JavaScript 的浏览器中工作 如需在有限或不支持 JavaScript 的浏览器中工作的 Web 应用程序，则应使用传统的 Web 应用工作流编写（或至少可以回退到此类行为） 团队不熟悉 JavaScript 或 TypeScript 开发技术 如果团队不熟悉 JavaScript 或 TypeScript，但熟悉服务器端 Web 应用程序开发，那相较于 SPA，他们交付传统 / 应用程序已为其他（内部或公共）客户端公开 API 如果已提供一个 Web API 供其他客户端使用，则相较于在服务器端窗体中复制逻辑，创建一个利用这些 API 的 SPA 实现更加容易。
云函数（Serverless Cloud Function，SCF）是腾讯云为企业和开发者们提供的无服务器执行环境，帮助您在无需购买和管理服务器的情况下运行代码。您只需使用平台支持的语言编写核心代码并设置代码运行的条件，即可在腾讯云基础设施上弹性、安全地运行代码。SCF 是实时文件处理和数据处理等场景下理想的计算平台。
扫码关注腾讯云开发者
领取腾讯云代金券
云服务器
即时通信 IM
网站备案
对象存储
实时音视频
