零、前言
Blazor WebAssembly 是一个框架，建立在流行且健壮的 ASP.NET 框架之上，它允许您构建在客户端使用 C#而不是 JavaScript 的单页 web 应用。Blazor WebAssembly 不依赖插件或附加组件。它只要求浏览器支持 WebAssembly——所有现代浏览器都支持它。
在这本书里，你将完成实用的项目，这些项目将教会你 Blazor WebAssembly 框架的基础。每一章都包括一个独立的项目和详细的逐步说明。每个项目都旨在突出一个或多个与 Blazor WebAssembly 相关的重要概念。到本书结束时，您将会有使用 SQL Server 后端构建简单的独立 web 应用和托管 web 应用的经验。
这本书是给谁的
这本书是为经验丰富的网络开发人员编写的，他们厌倦了不断学习最新的新 JavaScript 框架，并希望利用他们的经验.NET 和 C#来构建可以在任何地方运行的 web 应用。
这本书是为任何想通过强调实践而不是理论来快速学习 Blazor WebAssembly 的人准备的。它使用完整的、易于遵循的分步示例项目来教您使用 Blazor WebAssembly 框架开发 web 应用所需的概念。
您不需要成为专业的开发人员就能从本书的项目中受益，但您确实需要一些 C#和 HTML 方面的经验。
这本书涵盖了什么
第 1 章【Blazor WebAssembly 简介】介绍了 Blazor web assembly 框架。它解释了使用 Blazor 框架的好处，并描述了两种托管模型之间的区别:Blazor 服务器和 Blazor WebAssembly。在强调了使用 Blazor WebAssembly 框架的优势之后，讨论了 WebAssembly 的目标和支持选项。最后，它将指导您完成设置计算机的过程，以完成本书中的项目。到本章结束时，您将能够继续阅读本书的任何其他章节。
第二章 【构建你的第一个 Blazor WebAssembly 应用】通过创建一个简单的项目来介绍 Razor 组件。本章分为三节。第一部分解释 Razor 组件、路由和 Razor 语法。第二部分通过使用微软提供的 Blazor WebAssembly App 项目模板，逐步引导您完成创建第一个 Blazor WebAssembly 应用的过程。最后一节将逐步引导您创建自己的自定义 Blazor WebAssembly 项目模板。第 3-7 章中的项目将使用该自定义项目模板。到本章结束时，您将能够创建一个空的 Blazor WebAssembly 项目。
第 3 章 【使用模板化组件构建模态对话框】通过创建模态对话框组件介绍了模板化组件。本章分为三节。第一节讲解RenderFragment参数、EventCallback参数、CSS 隔离。第二部分将逐步引导您完成创建模态对话框组件的过程。最后一节将逐步引导您创建自己的 Razor 类库，并将模态对话框组件移动到其中。到本章结束时，您将能够创建一个模态对话框组件，并通过 Razor 类库与多个项目共享它。
第 4 章 【使用 JavaScript 互用性(JS Interop) 构建本地存储服务】介绍了如何通过创建本地存储服务将 JavaScript 与 Blazor WebAssembly 结合使用。本章分为两节。第一部分解释了仍然需要偶尔使用 JavaScript 的原因，以及如何从. NET 调用 JavaScript 函数。为了完整起见，还介绍了如何从 JavaScript 调用. NET 方法。最后，介绍了项目使用的网络存储应用编程接口。在最后一节中，它将逐步引导您完成创建和测试服务的过程，该服务将读写浏览器的本地存储。到本章结束时，您将能够通过使用 JS Interop 从 Blazor WebAssembly 应用调用 JavaScript 函数来创建本地存储服务。
第五章 将天气应用构建为渐进式网络应用(PWA) ，通过创建一个简单的天气网络应用来介绍渐进式网络应用。本章分为两节。第一部分解释什么是 PWA 以及如何创建 PWA。它包括清单文件和服务人员。此外，它还描述了如何使用本章项目所需的缓存存储应用编程接口、地理定位应用编程接口和开放天气一次调用应用编程接口。第二部分通过添加徽标、清单文件和服务人员，逐步引导您完成创建 5 天天气预报应用并将其转换为 PWA 的过程。最后，它向您展示了如何安装和卸载 PWA。到本章结束时，您将能够通过添加徽标、清单文件和服务人员，将 Blazor WebAssembly 应用转换为 PWA。
第 6 章 ，使用应用状态构建购物车，通过创建购物车 web app 介绍应用状态。本章分为两节。第一部分解释应用状态和依赖注入。最后一部分将逐步引导您完成创建购物车应用的过程。为了维护应用中的状态，您将创建一个服务，该服务将在 DI 容器中注册并注入到您的组件中。到本章结束时，您将能够使用 DI 来维护 Blazor WebAssembly 应用中的应用状态。
第 7 章 【使用事件构建看板】通过创建看板 web 应用介绍了事件处理。本章分为两节。第一部分讨论事件处理、任意参数和属性规划。最后一部分将逐步引导您创建看板板应用，该应用使用DragEventArgs类使您能够在拖放区之间拖放任务。到本章结束时，您将能够在您的 Blazor WebAssembly 应用中处理事件，并且可以轻松使用属性拆分和任意参数。
第 8 章 【使用 ASP.NET Web API 构建任务管理器】通过创建任务管理器 Web 应用，介绍托管 Blazor WebAssembly 应用。这是使用 SQL Server 的第一章。它分为两个部分。第一部分描述了托管的 Blazor WebAssembly 应用的组件。它还解释了如何使用 HttpClient 服务和各种 JSON 助手方法来操作数据。最后一节将逐步引导您完成创建任务管理器应用的过程，该应用将其数据存储在 SQL Server 数据库中。您将使用实体框架创建一个带有动作的应用编程接口控制器。到本章结束时，您将能够创建一个托管的 Blazor WebAssembly 应用，该应用使用 ASP.NET Web API 来更新 SQL Server 数据库中的数据。
第 9 章 ，使用编辑表单组件构建费用跟踪器，通过创建费用跟踪器网络应用介绍了EditForm组件。本章使用的是 SQL Server。它分为两个部分。第一部分介绍EditForm组件、内置输入组件和内置验证组件。最后一部分将逐步引导您创建费用跟踪应用，该应用使用EditForm组件和一些内置组件来添加和编辑存储在 SQL Server 数据库中的费用。到本章结束时，您将能够结合内置组件使用EditForm组件来输入和验证存储在 SQL Server 数据库中的数据。
为了充分利用这本书
我们建议您阅读本书的前两章，了解如何设置您的计算机以及如何使用空的 Blazor WebAssembly 项目模板。之后，您可以按任何顺序完成其余章节。当你继续阅读这本书时，每一章中的项目会变得更加复杂。最后两章需要一个 SQL Server 数据库来完成项目。
如果您正在使用本书的数字版本，我们建议您自己键入代码或通过 GitHub 存储库访问代码(下一节中提供了链接)。这样做将帮助您避免任何与复制和粘贴代码相关的潜在错误。
这本书假设你是一个有经验的网络开发者。你应该对 C#和 HTML 有一些经验。此外，所有的项目都使用 Bootstrap 4 作为 CSS 框架。如果您从未使用过 Bootstrap 4，我们建议您在继续之前先熟悉一下，网址为https://getbootstrap . com/docs/4.6/入门/简介。
有一些项目使用了 JavaScript 和 CSS，还有两个项目使用了 Entity Framework，但是所有的代码都在书中提供了。
下载示例代码文件
可以从https://GitHub . com/packt publishing/Blazor-web assembly by Example下载本书的示例代码文件。如果代码有更新，它将在现有的 GitHub 存储库中更新。
我们还有来自 https://github.com/PacktPublishing/丰富的书籍和视频目录的其他代码包。看看他们！
行动中的代码
本书的《行动中的代码》视频可在(https://bit.ly/3f1rJ0R)观看。
下载彩色图片
我们还提供了一个 PDF 文件，其中包含本书中使用的截图/图表的彩色图像。可以在这里下载:https://static . packt-cdn . com/downloads/9781800567511 _ color images . pdf。
使用的约定
本书通篇使用了许多文本约定。
Code in text:表示文本中的码字、数据库表名、文件夹名、文件名、文件扩展名、路径名、虚拟网址、用户输入和推特句柄。这里有一个例子:“将DeleteProduct方法添加到@code块中。”
代码块设置如下:
private void DeleteProduct(Product product)
{
cart.Remove(product);
total -= product.Price;
}
当我们希望将您的注意力吸引到代码块的特定部分时，相关的行或项目以粗体显示:
public class CartService : ICartService
{
public IList<Product> Cart { get; private set; }
public int Total { get; set; }
public event Action OnChange;
}
任何命令行输入或输出都编写如下:
Add-Migration Init
Update-Database
粗体:表示一个新的术语、一个重要的单词或者你在屏幕上看到的单词。例如，菜单或对话框中的单词像这样出现在文本中。这里有一个例子:“从构建菜单中，选择构建解决方案选项。”
提示或重要注意事项
像这样出现。
取得联系
我们随时欢迎读者的反馈。
一般反馈:如果您对本书的任何方面有疑问，请在留言主题中提及书名，并通过customercare@packtpub.com发邮件给我们。
勘误表:虽然我们已经尽了最大的努力来保证内容的准确性，但是错误还是会发生。如果你在这本书里发现了一个错误，如果你能向我们报告，我们将不胜感激。请访问www.packtpub.com/support/errata，选择您的图书，点击勘误表提交链接，并输入详细信息。
盗版:如果您在互联网上遇到任何形式的我们作品的非法拷贝，如果您能提供我们的位置地址或网站名称，我们将不胜感激。请联系我们在copyright@packt.com与材料的链接。
如果你有兴趣成为一名作者:如果有一个你有专长的话题，你有兴趣写或者投稿一本书，请访问authors.packtpub.com。
评论
请留下评论。一旦你阅读并使用了这本书，为什么不在你购买它的网站上留下评论呢？然后，潜在的读者可以看到并使用您不带偏见的意见来做出购买决定，我们在 Packt 可以了解您对我们产品的看法，我们的作者可以看到您对他们的书的反馈。谢谢大家！
更多关于 Packt 的信息，请访问packt.com。
版权属于：月萌API www.moonapi.com，转载请注明出处
