avatar

目錄
微软Blazor框架学习笔记(一)

微软Blazor框架学习笔记(一)

一、概述

Blazor是一个用于使用 .NET生成交互式客户端 Web UI 的框架:

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

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

  • 使用C#代替JavaScript来编写代码;
  • 利用现有的.NET的性能、可靠性和安全性;
  • 始终高效支持Windows、Linux、macOS上的Visual Studio;
  • 以一组稳定、功能丰富且易用的通用语言、框架和工具为基础来生成。

二、托管模型

Blazor WebAssembly

  • 是一个单页面应用框架,用于使用 .NET 生成交互式客户端 Web 应用。 Blazor WebAssembly 使用开放的 Web 标准(没有插件或代码转换),并且适用于所有新式 Web 浏览器(包括移动浏览器)
  • Blazor 的主体托管模型在 WebAssembly 上的浏览器中运行客户端Blazor WebAssembly 托管模型具有以下几个优点:
    • 没有 .NET 服务器端依赖项。 应用在下载到客户端之后完全正常运行。
    • 完全利用客户端资源和功能。
    • 工作从服务器卸载到客户端。
    • 不需要 ASP.NET Core web 服务器来托管应用程序。 无服务器部署方案可能(例如,通过 CDN 提供应用)。
  • Blazor WebAssembly 托管的缺点:
    • 应用程序限制为浏览器的功能。
    • 需要支持的客户端硬件和软件(例如,WebAssembly 支持)。
    • 下载大小较大,应用需要较长时间才能加载。
    • .NET 运行时和工具支持不太成熟。 例如, .NET Standard支持和调试中存在限制。

Blazor 服务器

  • 使用 Blazor 服务器托管模型,可在服务器上从 ASP.NET Core 应用中执行应用。 UI 更新、事件处理和 JavaScript 调用是通过 SignalR 连接进行处理。
  • Blazor 服务器托管模型具有以下几个优点:
    • 下载大小明显小于 Blazor WebAssembly 应用,且应用加载速度快得多。
    • 应用充分利用服务器功能,包括使用任何与 .NET Core 兼容的 Api。
    • 服务器上的 .NET Core 用于运行应用程序,因此现有的 .NET 工具(如调试)可按预期方式工作。
    • 支持瘦客户端。 例如,Blazor 服务器应用程序适用于不支持 WebAssembly 的浏览器以及资源受限设备上的浏览器。
    • 应用程序的 .NET/C#代码库(包括应用程序的组件代码)不会提供给客户端。
  • Blazor 服务器托管的缺点:
    • 通常存在较高的延迟。 每个用户交互都涉及网络跃点。
    • 无脱机支持。 如果客户端连接失败,应用将停止工作。
    • 对于包含多个用户的应用而言,可伸缩性非常困难。 服务器必须管理多个客户端连接并处理客户端状态。
    • 为应用提供服务需要 ASP.NET Core 服务器。 不可能的无服务器部署方案(例如,通过 CDN 为应用提供服务)。

三、Razor Components

Blazor 应用基于组件

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

组件类

  • 在razor组件文件中,使用HTML和C#的组合实现了组件
  • Blazor中的组件成为Razor组件组件名称必须以大写字符开头
  • 组件是普通的C#类,可以放在项目中任何位置
  • 若要从页面和视图呈现组件:使用RenderComponentAsync HTML方法
  • 若要在组件中通过分部视图使用逻辑,请将分部视图逻辑分解为一个组件。

生成组件

  • 在网页中添加计数器通常使用JavaScript,但是用Blazor时,可以使用C#

  • 浏览器对各组建的请求(由顶部的@page指令指定)导致该组件呈现其内容

  • @code块中定义组件状态(属性、字段)和方法用于处理事件或定义其他逻辑

使用组件

  • 使用HTML语法可以将组件添加到其他组件中
  • 使用特性或子内容来指定组件参数,这些参数允许你设置子组件的属性

组件参数

  • 由具有[Parameter]的组件类上的公共属性定义

子内容

  • 组件可以设置另一个组件的内容;分配组件提供用于指定组件标记之间的内容

路由到组件

  • 由@page指令指定该组件为路由终结点

  • 如果没有@page指令,组件将无法处理路由的请求,但该组件仍可以被其他组件使用

依赖关系注入

  • Blzor Server应用程序,在 Startup.ConfigureServices 中注册为单一实例
    • @inject指令用于将服务实例注入到所需组件中
    • 组件使用注入的服务来检索对象中的数组
  • blazor WebAssembly应用,则注入了HttpClient

数据绑定

  • 对组件和DOM元素都是通过@bind属性来完成的
  • 通过使用@bind:formatDateTime格式字符串,现在还不能使用其他格式的表达式,如货币或数字格式

事件处理

  • @on{event}格式:onclick、onsubmit、onchange
  • image.png
  • Lambda表达式
  • image2.png

链式绑定

捕获对组件的引用

组件引用提供了一种方法来引用组件实例,以便可以向该实例发出命令。捕获组件引用:

  • 向子组件添加@ref属性
  • 定义与子组件类型相同的字段

在外部调用组件方法以更新状态

  • Blazor 使用 SynchronizationContext 来强制执行单个逻辑线程。此 SynchronizationContext 上将执行 Blazor 引发的组件生命周期方法和任何事件回调。 如果必须根据外部事件(如计时器或其他通知)更新组件,请使用 InvokeAsync 方法,该方法将调度到 Blazor 的 SynchronizationContext。

持续更新中…

文章作者: Dylan
文章鏈接: https://www.faithlch.com/%E5%BE%AE%E8%BD%AFBlazor%E6%A1%86%E6%9E%B6%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0-%E4%B8%80.html
版權聲明: 本博客所有文章除特別聲明外,均採用 CC BY-NC-SA 4.0 許可協議。轉載請註明來自 Dylan He
打賞
  • 微信
    微信
  • 支付寶
    支付寶

評論