上一篇

下一步

Blazor

已完成

生成 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。 可使用括号 @(...) 明确 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 在请求“/”地址处的默认页面时响应此文件的内容。

继续