DR：本教程通过指导您使用C构建一个简单的Web应用程序来介绍Blazor框架。它还将向您展示如何将Blazor应用程序与Auth0集成以保护它。按照本教程中描述的步骤，您将最终构建一个简单Web应用程序的两个版本。您可以在这个GitHub存储库中找到完整的代码。"了解如何使用Blazor使用C构建Web应用程序。"在推特上留言什么是Blazor？Blazor最近越来越受欢迎，尤其是在.NETCore3.0发布之后，它用许多有趣的特性丰富了它。人们对它产生了极大的兴趣，而微软也对它的未来下了很大的赌注。但布拉佐到底是什么？Blazor是一个使用.NET构建客户端Web应用程序的编程框架。它允许.NET开发人员使用他们的C和Razor知识来构建运行在浏览器中的交互式UI。使用Blazor开发客户端应用程序给.NET开发人员带来了一些好处：他们使用C#和Razor而不是JavaScript和HTML他们可以利用整个.NET功能它们可以跨服务器和客户机共享代码他们可以使用常用的.NET开发工具简而言之，Blazor向.NET开发人员承诺，让他们用自己熟悉的开发平台来构建客户端Web应用程序。托管模型Blazor为您提供了两种运行Web客户端应用程序的方法：Blazor服务器和Blazor WebAssembly。这些被称为托管模型。Blazor服务器托管模型在服务器上运行您的应用程序ASP.NET核心应用程序。UI被发送到浏览器，但是UI更新和事件处理在服务器端执行。这与传统的Web应用程序类似，但是客户端和服务器端之间的通信通过信号器连接进行。下图让您了解Blazor服务器托管模型的总体架构：Blazor服务器托管模型提供了一些好处，例如客户端应用程序的下载大小更小，并且与非最新浏览器兼容。然而，它也有一些缺点，比如由于大多数用户交互需要在客户机和服务器之间往返，所以延迟更高，并且在高流量场景下具有挑战性的可伸缩性。Blazor WebAssembly托管模型允许应用程序完全在用户的浏览器上运行。应用程序的完整代码（包括其依赖项和.NET运行时）被编译到WebAssembly中，由用户的浏览器下载并在本地执行。下图描述了Blazor WebAssembly的托管模型：Blazor WebAssembly托管模型提供的好处与单页应用程序提供的好处类似。下载后，除了需要的交互之外，应用程序独立于服务器。而且，你不需要ASP.NET托管应用程序的核心Web服务器。您可以使用任何Web服务器，因为WebAssembly编译的结果只是一组静态文件。另一方面，您应该了解这种托管模式的缺点。Blazor WebAssembly宿主模型要求浏览器支持WebAssembly。此外，应用程序的初始下载可能需要一些时间。"你不需要ASP.NET用于承载Blazor WebAssembly应用程序的核心Web服务器。"在推特上留言Blazor路线图Blazor为.NET开发人员提供了一个很好的机会。但是，考虑到整个项目仍在进行中。事实上，在撰写本文时，.NETCore3.0中只正式支持Blazor服务器托管模型。Blazor WebAssembly托管模型在.NETCore3.1预览版中提供，只是为了测试目的，但它的正式上市时间定于2020年5月。微软在Blazor项目上的目标非常雄心勃勃，尤其是对于Blazor WebAssembly。在他们的愿景中，BlazorWebAssembly不仅将成为主流的托管模式，而且将推动客户端开发的一场伟大革命。Blazor WebAssembly托管模型将包括编译成WebAssembly的单页应用程序、渐进式Web应用程序、混合移动应用程序、基于电子的桌面应用程序和本机应用程序。先决条件在开始构建Blazor应用程序之前，您需要确保在计算机上安装了正确的工具。特别是，您需要通过在终端窗口中键入以下命令来检查是否已安装.NET Core 3.0 SDK：dotnet—版本结果应该是3.0.100或更高。如果没有，您应该下载.NETCore3.0SDK并将其安装到您的计算机上。如果要使用Visual Studio，请注意，您需要使用Visual Studio 2019 16.3或Visual Studio for Mac 8.3或更高版本。注意：如果您将visualstudio更新到最新版本，您将获得.netcore3.0sdk绑定。构建Blazor服务器应用程序为了开始使用Blazor，您将构建一个简单的测验应用程序，该应用程序显示包含多个答案的问题列表，并根据您提供的正确答案为您分配分数。您将使用Blazor服务器托管模型来构建此应用程序。稍后您将看到如何使用Blazor WebAssembly模型构建相同的应用程序。因此，通过在终端窗口中键入以下命令来创建一个基本的Blazor服务器项目：dotnet新blazorserver-o QuizManager此命令使用blazorserver模板为QuizManager文件夹中的应用程序生成项目。这个新创建的文件夹包含很多内容，但是除了根文件夹之外，您要访问的相关文件夹包括：数据文件夹：它包含实现业务逻辑的模型和服务。Pages文件夹：包含生成HTML视图的Razor组件。特别是，此文件夹包含_主机.cshtml作为webui的起点的Razor页面。共享文件夹：它包含Razor组件和页面间共享的其他元素创建模型和服务因此，作为第一步，删除数据文件夹中的文件。接下来，添加一个奎兹坦.cs文件放入此文件夹并粘贴以下代码：//数据/奎兹坦.cs使用系统；使用System.Collections.Generic;命名空间QuizManager数据{公共课QuizItem{公共字符串问题{get；set；}public List选项{get；set；}公共int答案索引{get；set；}公共int Score{get；set；}公共QuizItem（）{选项=新列表（）；}}}这个类为测验的每个项目实现模型。它提供一个问题，一个可能的答案列表，正确答案的从零开始的索引，以及当用户给出正确答案时分配的分数。在同一个数据文件夹中，添加另一个名为QuizService.cs包括以下内容：//数据/QuizService.cs使用系统；使用System.Collections.Generic;使用系统线程化任务;命名空间QuizManager数据{公共类QuizService{私有静态只读列表测验；静态QuizService（）{测验=新列表{新奎兹坦{Question="以下哪一项是达芬奇的杰作？",Choices=newlist{"向日葵"，"蒙娜丽莎"，"吻"}，答案索引=1，得分=3},新奎兹坦{Question="以下哪一部小说是米格尔·德塞万提斯写的？",选择=新列表{"拉曼西亚的天才绅士唐吉诃德"，"巨人和潘塔古尔的生活"，"百年孤独"}，答案索引=0，得分=5}};}公共任务GetQuizAsync（）{返回任务.FromResult（测验）；}}}此类将测试定义为由QuizService（）构造函数初始化的QuizItem实例列表。为了简单起见，列表是用静态变量实现的，但是在实际场景中，它应该被持久化到数据库中。GetQuizAsync（）方法只返回测验变量的值。现在，移动到项目的根目录并编辑启动.cs文件，方法是使用以下代码替换ConfigureServices（）方法的定义：// 启动.cs使用系统；//其他使用条款命名空间QuizManager{公共类启动{//其余的不动public void ConfigureServices（IServiceCollection服务）{服务.AddRazorPages();服务.AddServerSideBlazor();服务.AddSingleton（）；}//其余的不动}}通过此更改，您注册了上面定义的QuizService服务，而不是默认Blazor项目模板附带的示例应用程序的服务。创建Razor组件现在已经创建了应用程序的模型和服务，现在是实现UI的时候了。Blazor利用Razor作为模板处理器来生成动态HTML。特别是，Blazor使用Razor组件构建应用程序UI。Razor组件是独立的标记和代码单元，即使在其他项目中也可以嵌套和重用。它们在扩展名为.razor的文件中实现。"Razor组件是Blazor应用程序中的基本UI元素。"在推特上留言要向用户显示测试并让他们与之交互，您需要将一个特定的视图作为Razor co实现