Blazor

4 分钟

有许多方法可用于生成 Web 应用。若要生成具有高度交互性和快速性的 Web 应用，通常使用大量 JavaScript。

另一种方法是通过 Microsoft 使用 Blazor 框架，这样就可以使用 C# 和 .NET 来处理所有 Web 开发问题。

什么是 Blazor？

Blazor 是一个框架，用于使用 HTML、CSS 和 C# 生成网页。可以使用标准 HTML 和 CSS 定义网站的布局和设计。然后，可以使用 C# 代码管理网页的交互式组件，这些代码使用名为 WebAssembly 的 Web 标准技术在服务器上或浏览器中运行。 Blazor 允许我们使用 Razor 语法定义网页和组件，这是 HTML 和 C# 的便捷混合体。可以轻松重用其他页面和组件内的 Blazor 组件。此功能意味着可以轻松生成和重用应用的各个部分。

什么是 WebAssembly？

WebAssembly 是每个新式浏览器中提供的标准技术，允许代码在浏览器中运行（类似于 JavaScript）。我们可以使用工具准备 C# 代码，以便在浏览器中用作 WebAssembly 应用，这些工具包含在 .NET SDK 中。

使用热重载功能立即更新您的应用程序

开发应用时，需要确保开发人员流快速，以便查看更改对应用的影响。进行更改、保存、重新生成所有资源并在浏览器中重新部署应用可能非常耗时。

可以使用热重载改进此工作流。使用热重载，你可以在不重启它的情况下对正在运行的应用做出更改。

Blazor 组件

使用 Blazor 创建应用时，应用由多个组件组成，每个组件都由自己的责任区域组成。若要创建组件，请使用带有 .razor 扩展名的 Razor 文件。那么，什么是 Razor？

Razor 是一种编程语法，将 HTML 语法与 C# 代码混合使用。下面是一个示例：

<div>@product.Name</div>

@code {
  Product product = new Product{ Name = "Blazor" }
}

在此示例中， @product.Name 解析为字符串“Blazor”，然后呈现在 div 标记内部。呈现的输出如下所示：

<div>Blazor</div>

Razor 示例的顶部部分由组件在执行时呈现的 HTML 标记组成。可以使用字符呈现 C# 表达式 @ 的值。 Razor 将继续解释 @ 之后的 C# 代码，直到识别到标记，然后恢复呈现 HTML。可以使用 parens @(...)显式了解 C# 表达式何时开始和结束。

其中 @code {} 的所有内容都包含用于定义所生成组件类的成员的 C# 代码。可以将 Razor 文件视为定义 HTML 呈现逻辑的 C# 类的便捷方法。使用 @code 块为组件类型定义 C# 成员，例如字段、属性和方法。

设置 Blazor 组件的样式

Blazor 组件呈现 HTML，因此可以使用普通 CSS 样式表设置 Blazor 组件样式。或者，Blazor 组件具有名为 CSS 隔离的功能，可用于创建仅适用于该组件内容的样式规则。通过创建名称与组件相同的文件并添加.css文件扩展名，Blazor 会将此命名识别为仅应用于相应组件中的 HTML 内容的样式。

Blazor 组件还可以使用特殊 HeadContent 标记定义要添加到页面 HTML 头的内容：

<HeadContent>
    <style>
        ...my styles here
    </style>
</HeadContent>

此 style 标记和内容呈现在页面的 head 标记内。

可路由组件

Home.razor 文件是可从 Web 浏览器导航到的组件。它包含 HTML、C# 和对其他 Blazor 组件的引用。由于第一行存在 @page "/" 指令，我们可以将此文件识别为一个页面。此指令将“/”路由分配给组件，并指示 Blazor 在请求“/”地址的默认页面时响应此文件的内容。