首页 星云 工具 资源 星选 资讯 热门工具
:

PDF转图片 完全免费 小红书视频下载 无水印 抖音视频下载 无水印 数字星空

.NET8 Blazor 从入门到精通:(一)关键概念

编程知识
2024年08月02日 09:31

目录

最近在学习 Blazor ,在B站上找了一个国外的课程边看边学习。嗯,原价¥1503的课程,大概200多美元,课程链接如下:

B站(大章节分P-适合初学):.NET 8 Blazor 从入门到精通

B站(小章节分P-适合复习):Blazor从入门到精通(中文字幕)

官网课程:Blazor From Start to Finish

image

Blazor 的关键概念

本文主要介绍Blazor 的关键概念,每个知识点都附上了学习过程中查到的参考资料。文中删除了一些常识性或表述不清的内容,如热重载、组件与页面等。

项目模板

项目开发的常用模板配置项如下,其它配置也可以都试一下,观察一下区别:
image

Auto 交互方式:最初使用 Blazor Server,并在随后访问时使用 WebAssembly 自动进行交互式客户端呈现,详细内容参考.NET8 Blazor的Auto渲染模式的初体验

Razor 语法

参考 ASP.NET Core 的 Razor 语法参考,前期主要理解下面几个重点语法即可:

  • 隐式 Razor 表达式:以 @ 开头,后跟 C# 代码
<p>@DateTime.Now</p>
<p>@DateTime.IsLeapYear(2016)</p>
  • 显式 Razor 表达式:由 @ 符号和圆括号组成
<p>Last week this time: @(DateTime.Now - TimeSpan.FromDays(7))</p>
  • @code 块:允许 Razor 组件将 C# 成员(字段、属性和方法)添加到组件
@code {
    // C# members (fields, properties, and methods)
}
  • 循环语句和条件语句:如 @for@if 等,直接写在页面中
@for (var i = 0; i < people.Length; i++)
{
    var person = people[i];
    <p>Name: @person.Name</p>
    <p>Age: @person.Age</p>
}

@if (value % 2 == 0)
{
    <p>The value was even.</p>
}

依赖注入

参考 将依赖项注入 Blazor 组件Program.cs(项目引导程序) 中注册依赖项:

builder.Services.AddSingleton<DemoDependency>();
//用于注册依赖项的其他模式...

对于 Blazor 组件,有两种方法可以指示我们的组件使用哪些依赖项:

//1.在 Razor 标记中
@inject IToDoApi ToDoApi
@inject ISomeServiceType AnotherService

//2.在 C# 代码中
@code
{
  [Inject]
  private IYetAnotherServiceType PropertyInjectedDependency { get; set; }
}

注入配置

参考 ASP.NET Core Blazor 配置 ,其中配置的优先级别:用户机密 > appsettings.{Environment}.json > appsettings.json

在 appsettings.json 中配置连接字符串:

{
  "Logging": {
    "LogLevel": {
      "Default": "Information",
      "Microsoft.AspNetCore": "Warning"
    }
  },
  "AllowedHosts": "*",
  "ConnectionStrings": {
    "Default": "连接字符串来自appsettings.json"
  }
}

在组件中引入配置依赖:

@page "/"
@inject IConfiguration config

<PageTitle>Home</PageTitle>

<h1>Hello, world!</h1>
<h2>@config.GetConnectionString("Default")</h2>

IConfiguration 是默认注册的,不需要另外写代码注册,可以直接使用。

HeadOutlet 组件

切换页面时不是整个页面被重新加载,实际上只有根组件 App.razor<Routes /> 被重新渲染。这种渲染方式不利于SEO,可以使用 HeadOutlet 组件来控制 <head> 元素的内容来进行优化。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <base href="/" />
    <link rel="stylesheet" href="bootstrap/bootstrap.min.css" />
    <link rel="stylesheet" href="app.css" />
    <link rel="stylesheet" href="KeyConcepts.styles.css" />
    <link rel="icon" type="image/png" href="favicon.png" />
    <HeadOutlet />
</head>

<body>
    <Routes />
    <script src="_framework/blazor.web.js"></script>
</body>

</html>

参考 在 ASP.NET Core Blazor 应用中控制 <head> 内容,指定一个页面的标题和描述:

@page "/control-head-content"

<PageTitle>@title</PageTitle>
<p>Title: @title</p>
<p>Description: @description</p>

<HeadContent>
    <meta name="description" content="@description">
</HeadContent>

@code {
    private string description = "This description is set by the component.";
    private string title = "Control <head> Content";
}
  • 使用 PageTitle 组件指定页面标题,这样可以将 HTML <title> 元素呈现给 HeadOutlet 组件。
  • 使用 HeadContent 组件指定 <head> 元素内容,该组件为 HeadOutlet 组件提供内容。

需要注意,如果在A页面用了B页面,那么B页面的 PageTitle 会覆盖掉A页面的 PageTitle。所以,组件不需要作为页面使用时就不要放 PageTitle 了。

@code 分离

Blazor可以支持在razor文件里面添加cs代码,但是代码一旦复杂了之后就会变得特别的麻烦。其实,这部分代码在编译时实际是被分离出来的,我们也可以在编译前手动将它们分离出来。

右键 code ,选择 快速操作和重构 ,然后如下图所示选择 将块提取到代码隐藏中
image

结果如下,其中①只是②的一个快捷方式:
image

上面是使用VS的自动分离功能,也可以使用手动的方式进行分离。参考 C# Blazor 学习笔记(4):blazor代码分离,注意以下几点:

  • 直接右键razor组件的上级目录,添加一个partial局部类
  • 新建类的类名是xxx.razor.cs,这样才能挂到组件上面
xxx.razor
xxx.razor.cs:代码
xxx.razor.css:css样式

代码分离后,依赖项也需要改成属性注入:

using Microsoft.AspNetCore.Components;

namespace KeyConcepts.Client.Pages;

public partial class Demo
{
    // 在razor组件中是这样的 @inject IConfiguration config
    [Inject]
    protected IConfiguration config { get; set; }=default!;

    private string? GetConnectionString()
    {
        return config.GetConnectionString("Default");
    }
}

Blazor 调试

调试没什么好说的,就在VS中正常打断点、单步运行、监控变量值就行了,具体参考 调试 ASP.NET Core 应用

CSS 隔离

CSS 隔离可以将 CSS 范围限定到 Razor 组件,以简化 CSS 并避免与其他组件或库发生冲突,但过多的使用也会导致 CSS 追踪困难。

参考 ASP.NET Core Blazor CSS 隔离 ,在与组件相同文件夹中创建一个 .razor.css 文件,该文件与组件的 .razor 文件的名称相匹配。例如为 Counter.razor 组件创建一个 Counter.razor.css 文件:

h1 {
    color:red;
}

生成时 Blazor 会重写 CSS 选择器以匹配组件呈现的标记, 重写的 CSS 样式被作为静态资产捆绑和生成, 默认情况下在 <head> 标记中引用表样式:

<!-- {ASSEMBLY NAME} 占位符是项目的程序集名称 !-->
<link href="{ASSEMBLY NAME}.styles.css" rel="stylesheet">

在捆绑的文件中,每个组件都与范围标识符关联。 对于每个具有样式的组件,HTML 属性追加有格式 b-{STRING},其中 {STRING} 占位符是框架生成的十个字符的字符串。 标识符对每个应用都是唯一的。

在呈现的 Counter 组件中,Blazor 将范围标识符追加到 h1 元素:

<h1 b-zdeg3nv67a="">Counter</h1>

image

注:如果CSS不生效,需要清理一下浏览器的缓存。

调用JavaScript

js文件可以放到wwwroot目录下,也可以关联到特定组件,参考
从与组件并置的外部 JavaScript 文件 (.js) 加载脚本 为 Counter 组件添加并置js文件:

//Counter.razor.js
export function displayCount(count) {
    alert('The count is' + count);
}

export function createMessage(count) {
    return 'The count is' + count;
}

Blazor 应用的 Razor 组件使用 .razor.js 扩展名并置 JS 文件(参考 CSS 隔离部分),并且可通过项目中文件的路径公开寻址 {PATH}/{COMPONENT}.razor.js

  • 占位符 {PATH} 是指向组件的路径
  • 占位符 {COMPONENT} 是组件

修改 Counter 组件的代码,调用js函数:

@page "/counter"
@rendermode InteractiveAuto
@inject IJSRuntime JSRuntime

<PageTitle>Counter</PageTitle>

<h1>Counter</h1>
<h2>@subMessage</h2>
<p role="status">Current count: @currentCount</p>

<button  @onclick="IncrementCount">Click me</button>

@code {
    private int currentCount = 0;
    private string subMessage = "";
    private IJSObjectReference? jsModule;

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            jsModule = await JSRuntime.InvokeAsync<IJSObjectReference>("import", "./Pages/Counter.razor.js");
        }    
    }
    private async Task IncrementCount()
    {
        currentCount++;
        await jsModule.InvokeVoidAsync("displayCount", currentCount);
        subMessage = await jsModule.InvokeAsync<string>("createMessage", currentCount);
    }
}
  • @inject IJSRuntime JSRuntime:注入 IJSRuntime 接口,用于与客户端 JavaScript 交互
  • IJSObjectReference? jsModule:保存对 JavaScript 模块的引用
  • JSRuntime.InvokeAsync
    <IJSObjectReference>
    :加载 JavaScript 模块并保存其引用

实际项目中,尽量不要使用js控制DOM,而是使用Blazor组件,因为两者可能起冲突。

From:https://www.cnblogs.com/timefiles/p/18338176
本文地址: http://www.shuzixingkong.net/article/690
0评论
提交 加载更多评论
其他文章 浅析前端数据埋点监控:用户行为与性能分析的桥梁
总的来说,前端埋点技术不仅是提升用户体验和产品运行效率的利器,更是实现数据驱动决策的重要工具。随着各类专业工具的出现,如腾讯有数、百度统计和微软Clarity,企业可以根据需求选择最适合的工具进行数据分析和优化,从而在竞争激烈的市场中保持领先地位。通过深入理解用户行为和性能数据,企业能够做出更明智的
浅析前端数据埋点监控:用户行为与性能分析的桥梁 浅析前端数据埋点监控:用户行为与性能分析的桥梁 浅析前端数据埋点监控:用户行为与性能分析的桥梁
数据库系列: 主流分库分表中间件介绍(图文总结)
相关文章 数据库系列:MySQL慢查询分析和性能优化 数据库系列:MySQL索引优化总结(综合版) 数据库系列:高并发下的数据字段变更 数据库系列:覆盖索引和规避回表 数据库系列:数据库高可用及无损扩容 数据库系列:使用高区分度索引列提升性能 数据库系列:前缀索引和索引长度的取舍 数据库系列:MyS
数据库系列: 主流分库分表中间件介绍(图文总结) 数据库系列: 主流分库分表中间件介绍(图文总结)
jpa+querydsl的平替国产easy-query最好用的orm
jpa+querydsl的平替国产easy-query最好用的orm 一款国产最强java orm,完美支持可控强类型dsl,外加完美支持对象模型筛选拉取的orm,拥有非常智能的include(s)一对多、一对一、多对多、多对一实现的orm 地址github: https://github.com/
用了组合式 (Composition) API 后代码变得更乱了,怎么办?
组合式 (Composition) API 的一大特点是“非常灵活”,但也因为非常灵活,也可能导致我们的代码变得愈发混乱,最终到达无法维护的地步。
用了组合式 (Composition) API 后代码变得更乱了,怎么办? 用了组合式 (Composition) API 后代码变得更乱了,怎么办? 用了组合式 (Composition) API 后代码变得更乱了,怎么办?
Netty的源码分析和业务场景
Netty 是一个高性能、异步事件驱动的网络应用框架,它基于 Java NIO 构建,广泛应用于互联网、大数据、游戏开发、通信行业等多个领域。以下是对 Netty 的源码分析、业务场景的详细介绍: 源码概述 Netty 的核心组件:Netty 的架构设计围绕着事件驱动的核心思想,主要包括 Chann
SourceGenerator 生成db to class代码优化结果记录
优化 上一次实验 代码写的较为随意,本次穷尽所学,优化了一把, 不过果然还是没 比过 Dapper aot, 虽然没使用 Interceptor, 但理论上其优化不该有这么大差距 知识差距不少呀,都看不懂 Dapper aot 利用了什么姿势领先, 有大神们能教教吗? 优化点 减少类型判断 提前 做
Megacity Unity Demo工程学习
1.前言 Megacity Demo发布于2019年春,本博文撰写于2024年,ECS也早已Release并发布了1.2.3版本。 不过好在核心变化不大,多数接口也只是换了调用名称, 该Demo相较于之前的Book of the Dead(2018年发布),体量要小一些,主要演示DOTS相关内容。
Megacity Unity Demo工程学习 Megacity Unity Demo工程学习 Megacity Unity Demo工程学习
不止于面向对象的SOLID原则
SOLID原则是由人称”鲍勃大叔“的Rober C. Martin所提出来的。他用五个面向对象设计原则的首字母组成了SOLID,并使其得到了广泛传播。这五个原则罗列如下: 单一指责原则(Single Responsibility Principle):类的职责应该是单一的。所谓单一,是从变化的维度衡
不止于面向对象的SOLID原则 不止于面向对象的SOLID原则 不止于面向对象的SOLID原则