技术文章

Blazor 是 Microsoft 针对其庞大的 .NET 开发人员社区构建现代单页应用程序 (SPA) 应用程序的回应 - 就像用 Angular 和 React 等框架编写的应用程序一样。在 Blazor 之前，Microsoft 推出了世界上最流行的 Web 框架 ASP.NET Web Forms。微软早已退休，.NET 开发人员唯一的选择是 Razor Pages 和 ASP.NET MVC 应用程序。虽然很流行，但它们从未真正与“其他”现代 Web 开发人员在单页应用程序框架中使用的框架竞争。借助 Blazor，Microsoft/.NET 社区拥有了一个框架，可以为他们提供所需的一切 - 访问 .NET Framework、使用 C# 的能力，同时无需学习 JavaScript 来编写现代 Web 应用程序。 

在本文中您将了解到：

• 为什么选择布拉佐尔？

• 什么是 Blazor 代码生成？

• 如何使用 App Builder 生成 Blazor 代码？

• 如何通过 Visual Studio 使用 App Builder 中的 Blazor 应用程序？

为什么选择布拉佐尔？

Blazor 是一个免费的开源 Web 框架，使开发人员能够使用纯 C# 技能、HTML 代码和 Razor 语法而不是 JavaScript 创建交互式 Web UI。早在 2021 年 5 月，微软发布了 Blazor 3.2 和 Blazor WebAssembly，匹配了 React 和 Angular 等平台所遵循的用于编写应用程序的 SPA（单页应用程序）模式，极大地激发了人们对该框架的兴趣。通过使用 C# 编写的客户端和服务器代码，用户可以轻松共享 Blazor 代码和 .NET 库。另外，顺便提一下，Blazor 代码针对更少的样板代码进行了优化，并且非常容易上手。 

我们的博客包含 3 篇详细文章，探讨Blazor 和 Angular、Blazor 和 React以及Blazor Server 与 Web Assembly之间的差异。如果好奇，您可以查看它们以获取更多信息。 

什么是 Blazor 代码生成？ 

代码生成（尤其是 Blazor 代码生成）是编译器自动生成应用程序的工作代码的过程，从而减少手动编码所导致的时间、精力和错误。此类编译器将源代码作为输入并将其转换为机器代码。在我们的例子中，代码生成器是 App Builder™ 。 

注意：您可以在下面的应用程序生成器产品概述和教程中了解有关 Blazor（和 Angular）的所见即所得低代码应用程序开发工具的所有信息。

如何使用 App Builder 生成 Blazor 代码？

对于那些第一次接触 App Builder 的人来说，这是一个全面的所见即所得的拖放式应用程序制作工具，可以处理从设计到代码生成的每个过程。以下是该产品的一些主要亮点： 

• 一个可视化 应用程序构建器 和一个面向产品经理、设计师、利益相关者和开发人员的统一平台。 

• 基于云的低代码应用程序开发工具，可帮助公司设计和构建完整的业务应用程序速度提高 80%。 

• 生成生产就绪的 Blazor WASM 和 Blazor 服务器代码，以及 Angular 和 Web 组件代码。它还能够从 Sketch 和 Figma 设计工具导入您的设计。 

• 适用于 Windows、MacOS 和 Linux 的 App Builder 桌面应用程序。 

• 消除会减慢应用程序构建速度的孤岛和交接。 

• 节省时间、精力和金钱，因为您不必在 Blazor 中手动编写 UI 的每个方面。 

• 确保更轻松地对正在运行的 Blazor、Angular 和 Web 组件应用程序进行原型设计、测试和实时预览。 

• 允许您引入第三方服务、额外数据源以及额外的安全性和合规性等。 

• 提供丰富的学习资源来帮助您创建 Blazor 应用。 

在 .NET 6 中，我们正式开始支持 App Builder，并将 Blazor作为代码生成选项。这意味着您现在可以通过简单的拖放操作创建任何 Blazor UI，并通过单击以下受支持的组件获取所有可用于生产的 Razor、C# 和 CSS 代码： 

• 带有数据绑定的网格和树形网格 

• 徽章 

• 图标 

• 复选框、开关 

• 阿凡达 

• 输入组 

• 容器 - 绝对、行、列 

• 超链接、图像、文本和标题 

• 列表 

• 按钮、链接按钮 

• 卡片 

• 导航栏 

• 无线电集团 

此处提供了受支持组件的完整列表。

生成 Blazor 代码的 5 个步骤 

第 1 步：启动App Builder或通过Indigo.Design登录 

继续，要使用 App Builder 生成 Blazor 代码，您首先必须通过直接登录您的 App Builder 个人资料或使用 Indigo.Design 登录来启动我们的平台。如果您选择第二个选项，您将被重定向到主屏幕，您可以从中访问三个核心 Indigo.Design 产品中的每一个 - 应用程序选项卡下的原型、可用性测试、应用程序生成器。 

启动和使用 App Builder 的所有方式包括： 

• 通过 Indigo.Cloud 

• 自己的url地址 

• 桌面应用程序（适用于Windows、iOS、Linux 下载）

• App Builder 的本地版本 

步骤 2：启动 Blazor 应用程序 - 在示例应用程序、默认布局或导入设计之间进行选择 

从应用程序生成器主屏幕，您可以启动新应用程序、预览或编辑现有应用程序。通过上下文菜单，每个现有应用程序也可以重命名、复制或存档。 

有四种方法可以启动新的 Blazor 应用： 

• 从现有 Sketch 或 Figma 设计创建 

• 使用易于修改的示例应用程序 

• 使用基本默认布局启动新应用程序 

• 使用空白选项从头开始 

进入应用程序生成器后，您可以在设计时轻松地在活动应用程序之间切换或从应用程序内侧面菜单返回工作区，而无需离开平台。 

步骤 3：选择 Blazor WASM 或 Blazor 服务器  

在完成 Blazor 应用程序的设计并预览其代码之前，请注意“平台选择器”下拉列表，该下拉列表位于“发布到 GitHub”和“预览”操作按钮旁边的导航栏中。选择 Blazor WASM 或服务器选项来为 Blazor 生成代码。选择器会记住您的选择，下次您进入应用程序生成器时，将为您预先选择所需的框架。 

步骤 4：预览您的 Blazor 代码 

如何预览将要生成的 Blazor 应用代码？只需打开代码视图即可将其与设计并排查看。它处于只读模式，但可以帮助您检查生成的代码的质量。接下来，单击预览，您将看到代码预览，您可以在其中看到这是一个 Razor 页面。您将看到所有控件定义、div 等，当然还有 Blazor 代码标记、您正在查看的特定页面布局的 CSS。 

第 5 步：发布到 GitHub 或另存为 Zip 文件 

如果返回“编辑”，您可以选择将其发布到 GitHub 上或将其下载为 zip 文件。  

代码视图允许您分别查看 HTML、CSS 和 TS。这样您就无需编写标记和 CSS 来创建像素完美的内容，从而节省了时间。您可以查看我们全面的开发人员文档以了解更多详细信息。 

App Builder 在设计图面和预览窗口中显示实时运行的 Web 应用程序。这意味着当您在设计界面中对应用程序应用更改时，底层 Blazor 代码和 applicationb 模型将实时更新。您可以随时在预览窗口中查看生成的 Blazor 应用程序代码。此外，您还可以随时下载生成的应用程序作为完整的应用程序代码存储库，然后可以在您选择的代码编辑器中打开它。然后，您可以在计算机上本地使用 App Builder 构建并运行您设计的应用程序，并且可以对生成的代码进行其他修改。但是，请记住，下载 Blazor 应用程序的代码后，本地所做的更改将不会反映在您的 App Builder 用户空间中。 

然而，我们知道很多人都喜欢 Angular。如果这是您的框架，您还可以使用我们的 App Builder在 Angular 中生成可用于生产的代码。

如何在 Visual Studio 中使用 App Builder 中的 Blazor 应用程序？

下载应用程序后，继续打开 .csproj 文件。您会注意到的第一件事是我们正在生成 Blazor WebAssembly/服务器应用程序。WASM 应用程序将直接在基于 WebAssembly 的 .NET 运行时的浏览器中执行。Blazor WebAssembly 应用程序的功能与 Angular 或 React 等前端 JavaScript 框架类似。 

注意：.NET 运行时与应用程序以及应用程序集和任何所需的依赖项一起下载。不需要浏览器插件或扩展。 

现在您只需按 F5 即可。您正在本地运行您的应用程序。继续添加您使用 App Builder 设计的内容。