你可能不知道的10个Blazor功能

古城微笑少年丶 2022-08-28 02:55 733阅读 0赞

**目录**

介绍

.NET 5和C\# 9

Markdown

gRPC

GraphQL

EF Core和Azure Cosmos DB

渐进式网络应用程序

CSS隔离

虚拟化

服务器端预渲染

热重载

--------------------

# 介绍 #

Blazor仍然是一项相对年轻的技术，但自2018年发布以来，它获得了令人难以置信的发展势头。Blazor最初是一个实验性项目，现在作为.NET 5的一部分发布，并被认为可以投入生产。

它对.NET开发人员的主要吸引力在于，他们可以使用自己喜欢的语言（如C\#）编写单页应用程序，重用现有的.NET库和框架。与大多数现代Web技术一样，Blazor正在迅速发展。每隔几个月，其开发人员就会发布包含新功能的预览版。

如果您在早期尝试过Blazor，您可能会遇到不再存在的障碍和限制。Blazor与ASP.NET Core紧密集成，支持不受浏览器安全沙箱限制的所有主要.NET API，并提供与JavaScript的双向集成。这些功能使其成为构建企业Web应用程序的可靠选择。

如果您对使用Blazor仍有疑问，请继续阅读。以下是您希望Blazor可以做的前十件事——它确实做到了！

# .NET 5和C\# 9 #

Blazor作为.NET的一部分提供并支持所有相关的API。由于访问本地文件系统的限制，某些API（例如文件I/O）在浏览器上下文中没有意义。

Blazor还支持最新的C\#语言版本9.0。使用最新的语言结构不仅可以提高代码的简洁性和可读性，而且实际上还可以提高性能！下面是一些可以在Blazor应用程序中使用的有用的C\# 9.0功能的快速浏览。

您是否知道可以通过简化的对象初始化来节省击键次数？创建新实例时不再需要重新声明类。这个冗余代码：

Person person = new Person();

简化为：

Person person = new ();

使用新的switch表达式来简化逻辑。看起来像这样：

public int DoMath(int a, int b, Operator op)
    {
       switch(op)
       {
          case Operator.Add:
             return a + b;
          case Operator.Sub:
             return a - b;
          case Operator.Mult:
             return a * b;
          default:
             return a / b;
       }
    }

你现在可以更简洁地表达：

public int DoBetterMath(int a, int b, Operator op) =>
       op switch
       {
          Operator.Add => a + b,
          Operator.Sub => a - b,
          Operator.Mult => a * b,
          _ => a / b
       };

不要忘记，您还可以使用快速的SpanT进行数组和string操作，以及新的[Range运算符][Range]。

# Markdown #

Markdown创建基于Web的文档作为HTML的流行且轻量级的替代品。其简单的语法使其易于编写，无需担心嵌套标签或特殊控件。

GitHub和大多数博客引擎和内容管理系统(CMS)等存储库都支持Markdown。浏览器缺乏原生的Markdown支持，并且只有在将其呈现为HTML后才能显示它。各种开源库格式化、解析、验证和转换降价。

在Blazor中构建Markdown编辑器非常简单，因为它支持现有的.NET库。下图演示了一个简单的Blazor Markdown WebAssembly编辑器，只需几分钟即可创建。

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5a-S5Yaw5bGL_size_20_color_FFFFFF_t_70_g_se_x_16][]

要亲自查看，请创建一个新的Blazor WebAssembly项目。如果您不确定如何操作，请查看[此学习模块][Link 1]。接下来，添加对[Markdig][]包的引用。更新索引页面以包含此行：

在[后面][Link 2]的[代码中][Link 2]，实现如下属性：

private string markdown;
    
    public string MarkdownText
    {
        get => markdown;
        set 
        {
            if (value != markdown)
            {
                markdown = value;
                OnMarkdownChanged();
            }
        }
    }
    
    public string Html { get; set; }

转换就这么简单：

private void OnMarkdownChanged() => Html = Markdown.ToHtml(markdown);

现在您有一个实时Markdown编辑器，可以在您键入时刷新HTML。

# gRPC #

流行的新gRPC框架提供端点之间的高性能通信。它使用较新的HTTP/2协议，该协议允许通过单个连接进行并行请求。有效负载是一种压缩的二进制格式，因此它的网络占用空间通常比传统的REST甚至基于WCF SOAP的实现小得多。

根据这份[gRPC架构文档][gRPC]，gRPC可以比JSON序列化快8倍，并且有效负载比等效的REST服务小60%到80%。gRPC内置于.NET Core中，并且是.NET Core (Kestrel)附带的默认轻量级Web服务器并支持HTTP/2。

浏览器限制使得无法实现标准的gRPC浏览器客户端，因为不存在控制HTTP/2通信的API。一个名为[gRPC-Web][]的开源项目提供了一个在浏览器中运行的扩展，并包含一个代理来处理来自两个实现的请求，从而可以从Blazor WebAssembly应用程序使用gRPC 。

安装和配置所需的包后，gRPC调用看起来与基于REST的请求几乎相同。这是一个示例调用：

forecasts = 
       await WeatherForecastsClient.GetWeatherAsync(new WeatherForecast()).Forecasts;

gRPC要求所有API都具有自定义输入和自定义输出。在上面的示例中，自定义输入WeatherForecast指示对预测的请求，并且响应包含Forecasts属性负载。

您可以在博客文章[How to use gRPC-Web with Blazor WebAssembly on App Service 中][How to use gRPC-Web with Blazor WebAssembly on App Service]查看完整的端到端示例。一个开源项目甚至可以从一组接口生成所有必需的gRPC基础设施。查看[gRPC生成器][gRPC 1]以查看“grWizard”的运行情况。

# GraphQL #

GraphQL是另一种流行的协议，它正在现代Web应用程序中迅速取代传统的REST。Facebook创建它是为了提高其用户界面性能，并专门设计它以简化来自前端客户端的通信。他们不打算将它用于像gRPC那样的进程间通信。

GraphQL因其强类型模式、易于发现以及单个请求聚合来自多个后端的响应的能力而广受欢迎。其最受欢迎的功能使客户端能够定义响应形状以仅接收特定需要的数据并避免过度获取。

考虑一个包含联系信息的数据集。要实现仅返回名称的自动完成搜索框，您可以发出如下请求：

{
       contact(filter: 'likness') {
          lastname,
          firstname
       }
    }

该请求仅返回名称。在不同的组件中，您可能希望显示更多数据并像这样调整请求：

{
       contact(filter: 'likness') {
          lastname,
          phone,
          address {
             street,
             zipCode
          }
       }
    }

.NET的流行GraphQL库包括[GraphQL.NET][]和[Hot Chocolate。][Hot Chocolate]要在Blazor WebAssembl应用程序中查看GraphQL的运行情况，请遵循[Strawberry Shake][]入门指南。作为HotChocolate（服务器上的GraphQL）的伴侣，Strawberry Shake创建了.NET GraphQL客户端代理以使用具有强类型有效负载的端点。

# EF Core和Azure Cosmos DB #

[Entity Framework Core][] (EF Core)是一个对象到数据库的映射器，使开发人员能够使用领域对象和一致的强类型数据访问API来管理数据持久性。它支持各种数据库，包括SQL Server、MySQL、PostgreSQL、SQLite和Azure Cosmos DB。EF Core是跨平台的，面向.NET 5，因此它与Blazor项目完全兼容。

需要注意的是浏览器的安全沙箱：大多数数据库在浏览器不支持的非标准端口上使用非标准协议。Azure Cosmos DB是一个例外，因为它提供了直接通过HTTPS访问API的选项。

该[EF Core Azure Cosmos DB提供][EF Core Azure Cosmos DB]可以直接在浏览器中运行的客户端访问数据库。然而，这有限制。在客户端上存储凭据，甚至是加密的凭据是不好的做法。您必须假设客户端具有访问权限，并且该信息可能会使您的数据库完全开放。

要保护访问，请使用[Azure Active Directory][]等提供程序保护用户的身份。然后，您可以请求具有安全限制的Azure Cosmos DB资源令牌，而不是使用您的密钥。

阅读[EF Core和Azure Cosmos DB与Blazor WebAssembly][EF Core_Azure Cosmos DB_Blazor WebAssembly]以了解更多信息。

# 渐进式网络应用程序 #

交付适用于所有设备并提供原生体验的应用程序通常具有挑战性。渐进式网络应用程序(PWA)提供了“世界最佳”的解决方案。

PWA使用一种基于浏览器的特殊功能，称为服务工作者，使Web应用程序能够在断开连接的情况下运行。像在手机、台式机或平板电脑上安装普通应用程序一样安装这些应用程序。当活动连接不可用时，他们的代码从本地存储传送页面。它们还支持推送通知，因此您的用户不会错过任何重要事件。

Blazor WebAssembly应用模板具有checkbox启用PWA的功能。在命令行中，只需使用\--pwa开关，如下所示：

dotnet new blazorwasm --pwa -o pwa

创建新项目后，您会注意到**wwwroot**下的特定文件**。**

*  该*manifest.json*是描述你的应用程序和各种图标的位置，安装时要使用的一个特殊的配置文件。
 *  模板附带了几个图标。
 *  该*service-worker.published.js*脚本包含特殊的代码，使离线模式。

当用户浏览网站时，基本的PWA应用程序将页面存储在本地存储中。它预先安装必要的页面并拦截浏览器的获取页面机制。拦截代码在用户离线时从缓存中加载页面，在线时刷新缓存。当您运行该应用程序时，现代浏览器提供了安装它的选项。

下图显示了Microsoft Edge中的图标和操作。

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5a-S5Yaw5bGL_size_20_color_FFFFFF_t_70_g_se_x_16 1][]

安装PWA应用程序会将其添加到您的应用程序列表中，放置一个图标来运行它，并在如下图所示的无边框窗口中启动它：

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5a-S5Yaw5bGL_size_20_color_FFFFFF_t_70_g_se_x_16 2][]

尽管该应用程序有自己的窗口，您可以移动和调整其大小，但它是专用于运行PWA的网络浏览器版本。

# CSS隔离 #

最新的Blazor版本具有CSS隔离功能。Angular和React等单页应用程序框架大量使用了这个强大的功能。

与被迫为整个应用程序管理单个大型CSS库不同，CSS隔离使您可以单独设置每个组件的样式。无需为每个组件类型提供唯一名称。如果您为“组件A”设置标题元素的样式，则它仅适用于该组件，不会与“组件B”冲突。

默认的Blazor项目模板生成CSS隔离的示例。要创建与组件隔离的样式表，只需创建一个与组件同名且扩展名为*.css**的文件*。在默认的Blazor模板中，请注意*MainLayout.razor*有一个名为*MainLayout.razor.css*的相关文件。该文件中定义的样式仅适用于MainLayout组件。

要查看它是如何工作的，请注意，当您运行您的应用程序时，它会引用一个约定为*appname.styles.css*的文件。下图显示了检查名为“pwa.”的应用程序的网络调用的结果。

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5a-S5Yaw5bGL_size_16_color_FFFFFF_t_70_g_se_x_16][]

打开文件会显示以下代码片段：

/* /Shared/MainLayout.razor.rz.scp.css */
    .page[b-o6yozaou6y] {
        position: relative;
        display: flex;
        flex-direction: column;
    }
    
    .main[b-o6yozaou6y] {
        flex: 1;
    }

请注意，样式现在具有唯一的后缀以避免与其他组件发生冲突。有关完整的CSS隔离详细信息，请阅读[ASP.NET Core Blazor CSS隔离][ASP.NET Core Blazor CSS]。

# 虚拟化 #

业务应用程序通常处理大型数据列表。分页并不总是一个选项或最佳解决方案，但由于呈现列表组件的开销，大列表会降低性能。另一方面，用户在任何给定时间只使用数据的一个子集。即使列表包含数十万个元素，应用程序也可能一次只显示几十个。

虚拟化利用这一点仅呈现可见组件。对于500,000个元素的列表，应用程序仅在视图中呈现50个元素。当用户滚动列表和其他元素进入视图时，应用程序会呈现它们。处理的总时间是相同的，但延迟渲染直到项目滚动到视图中让用户感觉性能有所提高。

在Blazor应用程序中，虚拟化非常容易实现。考虑一个FoodItem显示食物列表的组件。典型的列表可能会像这样呈现（注意使用该@key属性来帮助Blazor跟踪列表项）。

<div style="height:500px;overflow-y:scroll">
        @foreach (var foodItem in foods)
        {
            <FoodItem @key="foodItem.Id" Item="@foodItem" />
        }
    </div>

要虚拟化这个组件，让应用程序只呈现在视图中的项目，只需将列表包装在Virtualize组件中。

一些虚拟化指南与您如何调整组件大小有关。您还可以指定一个委托来为流提供项目。阅读[ASP.NET Core Blazor组件虚拟化][ASP.NET Core Blazor]以了解有关虚拟化的更多信息。

# 服务器端预渲染 #

一个常见的单页应用程序挑战是提供网页和呈现数据之间的延迟。页面模板必须首先加载，然后是异步操作以获取和呈现数据。这可能会导致糟糕的用户体验。

服务器端预渲染通过在服务器上的虚拟文档对象模型(DOM)中构建页面然后将其作为静态内容交付来解决此问题。然后客户端应用程序接管。这为最终用户创造了无缝体验。预渲染还可以通过为搜索引擎提供索引内容来改进您网站的搜索引擎优化(SEO)。

要进行预渲染，必须托管应用程序。静态网站不具备预渲染的服务器功能。ASP.NET Core托管应用程序可以托管Blazor WebAssembly以在第一次加载时呈现组件的第一页。文档[预渲染和集成ASP.NET Core Razor组件][ASP.NET Core Razor]详细介绍了配置步骤。

您不必满足于在运行时预渲染以响应HTTP请求。您的应用程序可以作为构建过程的一部分进行预渲染，并提供一组代表初始网站状态的静态资产。通过阅读[在构建时预渲染Blazor WebAssembly 以针对搜索引擎进行优化，][Blazor WebAssembly]了解有关此方法的更多信息。

# 热重载 #

最热门的Blazor新功能之一，并且在此列表中排名第一，是Hot Reload。Web开发可以是迭代的，生产力取决于尽快看到增量更改的结果。.NET团队不仅实现了此功能，而且使其速度极快。如果您在以前的版本中使用过重新加载，请放弃您的期望，因为您必须亲自查看更新的重新加载。

.NET 6预览版3中提供了新的热重载功能。请务必下载并安装该.NET版本以利用性能改进。

.NET 5中的功能需要重新编译和重新加载整个应用程序，这要慢得多。采用：

dotnet --version

当我们运行它时，我们看到：

6.0.100-preview.3.21202.5

让我们看看Hot Reload的实际效果。创建一个名为HotReload的新Blazor项目：

dotnet new blazorwasm -o HotReload

进入目录：

cd HotReload

在您喜欢的编辑器中打开项目，例如Visual Studio (VS)或Visual Studio Code（如果您使用Visual Studio，请确保使用v16.9或更高版本）。在属性下，找到并打开*launchSettings.json*文件。

在您选择的Web服务器下（默认为IIS Express或您的应用程序的名称），添加值为blazorwasm的属性hotReloadProfile**。**我们的看起来像这样：

{
      "iisSettings": {
        // cutting this out for brevity
      },
      "profiles": {
        "IIS Express": {
          // ignore this for now
        },
        "hotreload": {
          "hotReloadProfile" : "blazorwasm",
          "commandName": "Project",
          "dotnetRunMessages": "true",
          "launchBrowser": true,
          // etc. etc.
        }
      }
    }

保存您的更改。在命令行中，使用新的watch命令运行，然后是标准运行命令：

dotnet watch -- run

如果您设置正确，第一条消息应指出热重载处于活动状态。在应用程序运行时，在您喜欢的集成开发环境(IDE)中打开项目或使用记事本打开页面。

转到Pages，然后是*Index.razor*，将“Hello, world!”更改为“Hello, live refresh!”，然后保存。您应该会看到应用程序重新启动并提供新内容。第一次总是比较慢，所以接下来，通过在末尾添加“friend”来编辑文本“Welcome to your new app” 。保存它，您应该几乎立即看到类似于下图的结果：

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5a-S5Yaw5bGL_size_20_color_FFFFFF_t_70_g_se_x_16 3][]

您可以在[.NET 6 Preview 3 公告中][.NET 6 Preview 3]了解有关此功能的更多信息。

[https://www.codeproject.com/Articles/5305075/10-Blazor-Features-You-Probably-Didnt-Know][https_www.codeproject.com_Articles_5305075_10-Blazor-Features-You-Probably-Didnt-Know]

[Range]: https://docs.microsoft.com/en-us/dotnet/csharp/whats-new/tutorials/ranges-indexes
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5a-S5Yaw5bGL_size_20_color_FFFFFF_t_70_g_se_x_16]: /images/20220828/0e89841250a84550b9be57d2cbbbdaad.png
[Link 1]: https://docs.microsoft.com/en-us/learn/modules/build-blazor-webassembly-visual-studio-code/
[Markdig]: https://www.nuget.org/packages/Markdig/
[Link 2]: http://net-informations.com/faq/asp/inline.htm
[gRPC]: https://docs.microsoft.com/en-us/dotnet/architecture/cloud-native/grpc
[gRPC-Web]: https://github.com/grpc/grpc/blob/master/doc/PROTOCOL-WEB.md
[How to use gRPC-Web with Blazor WebAssembly on App Service]: https://azure.github.io/AppService/2021/03/15/How-to-use-gRPC-Web-with-Blazor-WebAssembly-on-App-Service.html
[gRPC 1]: https://github.com/carlfranklin/GrpcGenerator
[GraphQL.NET]: https://graphql-dotnet.github.io/docs/getting-started/introduction/
[Hot Chocolate]: https://github.com/ChilliCream/hotchocolate
[Strawberry Shake]: https://chillicream.com/docs/strawberryshake/get-started
[Entity Framework Core]: https://docs.microsoft.com/en-us/ef/core/
[EF Core Azure Cosmos DB]: https://docs.microsoft.com/en-us/ef/core/providers/cosmos/?tabs=dotnet-core-cli
[Azure Active Directory]: https://docs.microsoft.com/en-us/aspnet/core/blazor/security/webassembly/hosted-with-azure-active-directory?view=aspnetcore-5.0
[EF Core_Azure Cosmos DB_Blazor WebAssembly]: https://blog.jeremylikness.com/blog/ef-core-and-cosmosdb-with-blazor-webassembly/
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5a-S5Yaw5bGL_size_20_color_FFFFFF_t_70_g_se_x_16 1]: /images/20220828/6bcaf5e7950b4946a94278fb9cb98bf7.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5a-S5Yaw5bGL_size_20_color_FFFFFF_t_70_g_se_x_16 2]: /images/20220828/c9425d044f834db5af9fe14ac637dc26.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5a-S5Yaw5bGL_size_16_color_FFFFFF_t_70_g_se_x_16]: /images/20220828/27877630753740dc84ea6f2cb0ce7a83.png
[ASP.NET Core Blazor CSS]: https://docs.microsoft.com/en-us/aspnet/core/blazor/components/css-isolation?view=aspnetcore-5.0
[ASP.NET Core Blazor]: https://docs.microsoft.com/en-us/aspnet/core/blazor/components/virtualization?view=aspnetcore-5.0
[ASP.NET Core Razor]: https://docs.microsoft.com/en-us/aspnet/core/blazor/components/prerendering-and-integration?view=aspnetcore-5.0&pivots=webassembly
[Blazor WebAssembly]: https://swimburger.net/blog/dotnet/pre-render-blazor-webassembly-at-build-time-to-optimize-for-search-engines
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5a-S5Yaw5bGL_size_20_color_FFFFFF_t_70_g_se_x_16 3]: /images/20220828/6129c66e60174222b6657766d75c620a.png
[.NET 6 Preview 3]: https://devblogs.microsoft.com/aspnet/asp-net-core-updates-in-net-6-preview-3/#initial-net-hot-reload-support
[https_www.codeproject.com_Articles_5305075_10-Blazor-Features-You-Probably-Didnt-Know]: https://www.codeproject.com/Articles/5305075/10-Blazor-Features-You-Probably-Didnt-Know