7. ASP.NET Core Blazor 官网文档

官方文档地址:https://learn.microsoft.com/zh-cn/aspnet/core/blazor/?view=aspnetcore-8.0

Blazor 是一种 .NET 前端 Web 框架,在单个编程模型中同时支持服务器端呈现和客户端交互性:

  • 使用 C# 创建丰富的交互式 UI。
  • 共享使用 .NET 编写的服务器端和客户端应用逻辑。
  • 将 UI 呈现为 HTML 和 CSS,以支持众多浏览器,其中包括移动浏览器。
  • 使用 .NET 和 Blazor 生成混合桌面和移动应用。

使用 .NET 进行客户端 Web 开发可提供以下优势:

  • 使用 C# 编写代码,这可提高应用开发和维护的效率。
  • 利用现有的 .NET 库生态系统。
  • 受益于 .NET 的性能、可靠性和安全性。
  • 使用开发环境(例如 Visual StudioVisual Studio Code)保持 Windows、Linux 或 macOS 上的工作效率。 与新式托管平台(如 Docker)集成。
  • 以一组稳定、功能丰富且易用的通用语言、框架和工具为基础来进行生成。

组件

Blazor应用基于组件。 Blazor 中的组件是指 UI 元素,例如页面、对话框或数据输入窗体。

组件是内置到 .NET 程序集的 .NET C# 类,它们用于:

  • 定义灵活的 UI 呈现逻辑。
  • 处理用户事件。
  • 可以嵌套和重用。
  • 可作为 Razor 类库NuGet 包共享和分发。

组件类通常以 Razor 标记页(文件扩展名为 .razor)的形式编写。 Blazor 中的组件正式称为 Razor 组件,非正式地称为 Blazor 组件。 Razor 是一种语法,用于将 HTML 标记与专为提高开发人员工作效率而设计的 C# 代码结合在一起。 借助 Razor,可使用 Visual Studio 中的 IntelliSense 编程支持在同一文件中的 HTML 标记与 C# 之间切换。

Blazor 使用 UI 构成的自然 HTML 标记。 以下 Razor 标记演示了当用户选择按钮时递增计数器的组件。

cs 复制代码
<PageTitle>Counter</PageTitle>

<h1>Counter</h1>

<p role="status">Current count: @currentCount</p>

<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>

@code {
    private int currentCount = 0;

    private void IncrementCount()
    {
        currentCount++;
    }
}

组件呈现为浏览器文档对象模型 (DOM) 的内存中表现形式,它被称为"呈现树",用于以灵活高效的方式更新 UI。

使用 Blazor 构建全堆栈 Web 应用

Blazor Web 应用提供一个基于组件的体系结构,它在单个解决方案中具有服务器端呈现和完整的客户端交互性;在该体系结构中,你可在服务器端和客户端呈现模式之间进行切换,甚至可在同一页面中混用这两种模式。

Blazor Web 应用可通过静态呈现来自服务器的 HTML 内容来响应请求,从而将 UI 快速传送到浏览器。 页面加载速度很快,因为 UI 呈现在服务器上快速执行,无需下载大型 JavaScript 捆绑包。 Blazor 还可凭借对服务器呈现的各种渐进式增强来进一步改善用户体验,例如使用表单帖子的增强导航,以及对异步生成的内容的流式呈现。

Blazor 支持交互式服务器端呈现(交互式 SSR),其中 UI 交互是通过与浏览器的实时连接从服务器处理的。 交互式 SSR 可实现丰富的用户体验,就像期待客户端应用提供的那样,但无需创建 API 终结点即可访问服务器资源。 交互式页面的页面内容是预呈现的,其中服务器上的内容最初生成并发送到客户端,而无需为呈现的控件启用事件处理程序。 服务器会尽快输出页面的 HTML UI 来响应初始请求,这使得应用对用户的响应更灵敏。

Blazor Web 应用支持通过客户端呈现 (CSR) 来实现交互,它依赖于使用可随应用一起下载的 WebAssembly 构建的 .NET 运行时。 在 WebAssembly 上运行 Blazor 时,.NET 代码可访问浏览器的完整功能,并可与 JavaScript 互操作。 .NET 代码在浏览器的安全性沙盒中运行,沙盒提供的保护可防御客户端计算机上的恶意操作。

Blazor 应用可在浏览器中完全瞄准在 WebAssembly 上运行,无需服务器参与。 对于独立 Blazor WebAssembly 应用,资产作为静态文件部署到可为客户端提供静态内容的 Web 服务器或服务中。 下载后,可将独立 Blazor WebAssembly 应用作为渐进式 Web 应用 (PWA) 进行缓存并脱机执行。

使用 Blazor Hybrid 构建本机客户端应用

Blazor Hybrid 支持将本机客户端应用中的 Razor 组件与适合 Web、移动和桌面平台的本机和 Web 技术混合使用。 代码在 .NET 进程中本机运行,并使用本地互操作通道将 Web UI 呈现到嵌入式 Web View 控件。 WebAssembly 不用于混合应用。 混合应用使用 .NET Multi-platform App UI (.NET MAUI) 来构建,后者是一个跨平台框架,用于使用 C# 和 XAML 创建本机移动应用和桌面应用。

Blazor Hybrid 支持 Windows Presentation Foundation (WPF)Windows 窗体将应用从早期技术过渡到 .NET MAUI。

相关推荐
m0_7482517224 分钟前
前端入门之VUE--ajax、vuex、router,最后的前端总结
前端·vue.js·ajax
上等猿27 分钟前
Ajax笔记
前端·笔记·ajax
Amo 672929 分钟前
css 编写注意-1-命名约定
前端·css
GraduationDesign38 分钟前
基于SpringBoot的蜗牛兼职网的设计与实现
java·spring boot·后端
颜淡慕潇1 小时前
【K8S问题系列 | 20 】K8S如何删除异常对象(Pod、Namespace、PV、PVC)
后端·云原生·容器·kubernetes
customer081 小时前
【开源免费】基于SpringBoot+Vue.JS安康旅游网站(JAVA毕业设计)
java·vue.js·spring boot·后端·kafka·开源·旅游
程序猿online1 小时前
nvm安装使用,控制node版本
开发语言·前端·学习
web Rookie1 小时前
React 中 createContext 和 useContext 的深度应用与优化实战
前端·javascript·react.js
男孩121 小时前
react高阶组件及hooks
前端·javascript·react.js
m0_748251722 小时前
DataOps驱动数据集成创新:Apache DolphinScheduler & SeaTunnel on Amazon Web Services
前端·apache