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 在请求“/”地址处的默认页面时响应此文件的内容。