ASP.NET 团队和社区在 .NET 8 继续全力投入 Blazor,为它带来了非常多的新特性,特别是在服务端渲染(SSR)方面,一定程度解决之前 WASM 加载慢,Server 性能不理想等局限性,也跟原来的 MVC,Razor Pages 框架在底层完成了统一。

AntDesign Blazor 作为 Blazor 最受欢迎的开源组件库之一,自然也会继续佛系跟进。本篇主要介绍第一个在 AntDesign Blazor 上应用的 .NET 8 新特性—— CascadingModelBinder,我利用它实现了 ReuseTabs 自 2021 年发布两年后,一直未支持的 Query String 属性绑定。

ReuseTabs 是 AntDesign Blazor 在 2021 年 7 月增加的组件,也是 Blazor 目前唯一真正实现路由复用的组件。它只需在 App.razor 增加 RouteData 级联值,就可以在任何 Blazor 项目中独立使用(其文档上的例子就是在官方模板上使用的),不依赖菜单配置就能够主动识别路由,渲染页面组件,并保持每个 Tab 页面的状态切换不会丢失。不像其他组件库的实现,只能在他们指定的配套模板上才能使用…

它的实现原理也很简单,是通过级联的 RouteData 值,获取需要展示的组件类型以及要绑定页面组件的属性值,再动态渲染组件的。但是因为在 .NET 6 加入的 Query string 属性值绑定实现是在 RouteView 内部利用一个内部静态方法来解析 QueryString 并传给页面组件的,ReuseTabs 想要支持得把代码都抄一份。当时就觉得这样的设计很有局限(后来就懒得了)。

直到在前段时间 .NET 官方博客中发布的文章 ASP.NET Core 在 .NET 8 Preview 6 中的更新,里面提到了一个特性,级联 query string 值到 Blazor 组件,意思是不再让Query string 值绑定局限于页面组件了,我就像这下 ReuseTabs 缺失了两年的功能,有希望填补了。

于是就有了今天要介绍的内容。

为了寻找官方是怎么实现的,把 aspnetcore 仓库源码切换到 .NET 6 Preivew 6 的 tag 上,找到 RouteView 的源码在RouteView.cs 中的 RenderPageWithParameters 方法,就是用于渲染页面组件的。

于是追溯这个文件的历史记录,找到在这个支持服务端静态渲染表单的 PR#47716 加入了 CascadingModelBinder,这样就可以从 Http 请求中获取提交的 FormData 绑定到组件中标记了 SupplyParameterFromForm 特性的模型上。

接着,在PR #48554 中使 SupplyParameterFromQuery 也能够通过 CascadingModelBinder 传递了,然后把上文提到的 RouteView 中的内部类 QueryParameterValueSupplier 相关代码删掉了。

这简直正中眉心,马上我就把 RouteView 中的这段代码复制到 ReuseTabs 中了,PRhttps://github.com/ant-design-blazor/ant-design-blazor/pull/3377,完美!

最终效果:

开心之余,我寻思着就算是抄,也不能抄的不明不白吧,于是就顺便调查了一下 CascadingModelBinder 是怎么传递级联值的。简单一句就是 Blazor 创建了 CascadingModelBinder 组件和 CascadingModelBindingProvider 提供者来抽象和统一了级联传值方法。没想到官方博客中平淡的两句话介绍背后有这么大的改动。详情请关注我后面文章,另作介绍。

跟进 .NET 8 Blazor 之 ReuseTabs 支持 Query 属性绑定的更多相关文章

  1. IE6-8支持css3属性

    方法一.让IE6-8支持css3属性 <!--[if lt IE 9]> <script src="https://oss.maxcdn.com/libs/html5shi ...

  2. 让IE6/IE7/IE8浏览器支持CSS3属性

    让IE6/IE7/IE8浏览器支持CSS3属性 一.下载 您可以狠狠地点击这里:ie-css3.htc,这个玩意儿是让IE浏览器支持CSS3表现的关键东东. 二.上面的是什么东西 首先说说.htc文件 ...

  3. 解决ie6下不支持fix属性,模拟固定定位

    <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content ...

  4. PowerDesigner 16.5对SQL Server 2012 生成数据库时"不支持扩展属性"问题

    团队合作设计一套系统数据模型,创建了PDM后,Table.View.Store Procedure等都创建好了,且创建了多个Schema方便管理这些数据库对象,但Table.view.Column等对 ...

  5. 在IE8等不支持placeholder属性的浏览器中模拟placeholder效果

    placeholder是一个很有用的属性,可以提示用户在input框中输入正确的内容,但是IE8以及IE8一下的浏览器不支持该属性,我们可以使用js来模拟相似的效果.下面直接上代码: <!doc ...

  6. apache支持中文域名绑定,apache支持中文域名绑定,教你怎样让apache支持中文域名绑定

    摘要:apache支持中文域名绑定,apache支持中文域名绑定,教你怎样让apache支持中文域名绑定,根据本人实际经验,叫你如何让apache支持中文域名绑定,绝对管用的让apache支持中文域名 ...

  7. 让IE6IE7IE8支持CSS3属性的8种方法介绍

    我们都知道,IE浏览器暂不支持CSS3的一些属性.国外的工程师们,不安于此现状,他们总是尽量使用一些手段使IE浏览器也能支持CSS3属性,我觉得这些都是很有意义,很有价值的工作,可以推动整个技术领域的 ...

  8. IE浏览器部分版本不支持background-siza属性问题

    background-size是CSS3新增的属性,但是IE8以下还是不支持,可以通过滤镜来实现这样的一个效果 background-size:contain; // 缩小图片来适应元素的尺寸(保持像 ...

  9. js错误:对象不支持此属性或方法

    对象不支持此属性或方法 错误原因: 可能是js的文件名和另外一个文件重复. 也有可能是js里的function和另外一个function名字重复. 也有可能是js里的function和页面的某一元素重 ...

  10. 对象不支持“attachEvent”属性或方法的解决办法

    有些脚本在IE11下执行会报错误: 对象不支持“attachEvent”属性或方法 解决办法 解决办法:把attachEvent改为addEventListener即可

随机推荐

  1. ping功能实现(ICMP)

    简单记录下项目中ping功能实现 笔记:ping功能实现 void Handler::handlePingDepot(const char *ip) { int mSize=50*1024; bzer ...

  2. YOLO3论文中文版

    文章目录 YOLO3论文中文版 摘要 1.引言 2. 解决方案 2.1 边界框预测 2.2 类预测 2.3 多尺度预测 2.4 特征提取器 2.5 训练 3.我们的做法 4. 失败的尝试 5.这一切意 ...

  3. 记一次nginx配置不当引发的499与failover 机制失效

    背景 nginx 499在服务端推送流量高峰期长期以来都是存在的,间或还能达到告警阈值触发一小波告警,但主观上一直认为499是客户端主动断开,可能和推送高峰期的用户打开推送后很快杀死app有关,没有进 ...

  4. std::cin 和 std::getline 混用的问题

    如果存在如下的输入, 11 is a prime 考虑如下的程序, std::cin>>number; std::getline(std::cin,input) std::cin 在读取数 ...

  5. 将音频格式从flac转到wav的两种方法

    最近在智能语音中用到了数据集cn-celeb.这个数据集的音频格式是flac,而在做数据增强(augmentation)以及模型训练时用的数据格式是wav,因此需要把音频格式从flac转到wav.我在 ...

  6. 基于python爬虫技术对于淘宝的数据分析的设计与实现

    本篇仅在于交流学习 本文主要介绍通过 selenium 模块和 requests 模块,同时让机器模拟人在浏览器上的行为,登录指定的网站,通过网站内部的搜索引擎来搜索自己相应的信息,从而获取相应关键字 ...

  7. 2021-10-14:被围绕的区域。给你一个 m x n 的矩阵 board ,由若干字符 ‘X‘ 和 ‘O‘ ,找到所有被 ‘X‘ 围绕的区域,并将这些区域里所有的 ‘O‘ 用 ‘X‘ 填充。力扣1

    2021-10-14:被围绕的区域.给你一个 m x n 的矩阵 board ,由若干字符 'X' 和 'O' ,找到所有被 'X' 围绕的区域,并将这些区域里所有的 'O' 用 'X' 填充.力扣1 ...

  8. vue全家桶进阶之路20:ECMAScript脚本语言规范

    ECMAScript(简称 ES)是一种由 Ecma 国际组织定义的脚本语言标准,它定义了 JavaScript 语言的基本规范和特性.JavaScript 是一种基于 ECMAScript 标准的编 ...

  9. Solon 用 throw 抛出数据

    此文主要是想在观念上有所拓展.在日常的接口开发时,数据的输出可以有两种方式: 返回(常见) 抛出(可以理解为越级的.越类型的返回) 我们经常会看到类似这样的案例.为了同时支持正常的数据和错误状态,选择 ...

  10. MongoDB + SpringBoot 的基础CRUD、聚合查询

    1.数据准备 1.1.springboot导包 springboot版本:2.7.10 点击查看代码 <!--mongodb的包--> <dependency> <gro ...