跟进 .NET 8 Blazor 之 ReuseTabs 支持 Query 属性绑定
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 属性绑定的更多相关文章
- IE6-8支持css3属性
方法一.让IE6-8支持css3属性 <!--[if lt IE 9]> <script src="https://oss.maxcdn.com/libs/html5shi ...
- 让IE6/IE7/IE8浏览器支持CSS3属性
让IE6/IE7/IE8浏览器支持CSS3属性 一.下载 您可以狠狠地点击这里:ie-css3.htc,这个玩意儿是让IE浏览器支持CSS3表现的关键东东. 二.上面的是什么东西 首先说说.htc文件 ...
- 解决ie6下不支持fix属性,模拟固定定位
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content ...
- PowerDesigner 16.5对SQL Server 2012 生成数据库时"不支持扩展属性"问题
团队合作设计一套系统数据模型,创建了PDM后,Table.View.Store Procedure等都创建好了,且创建了多个Schema方便管理这些数据库对象,但Table.view.Column等对 ...
- 在IE8等不支持placeholder属性的浏览器中模拟placeholder效果
placeholder是一个很有用的属性,可以提示用户在input框中输入正确的内容,但是IE8以及IE8一下的浏览器不支持该属性,我们可以使用js来模拟相似的效果.下面直接上代码: <!doc ...
- apache支持中文域名绑定,apache支持中文域名绑定,教你怎样让apache支持中文域名绑定
摘要:apache支持中文域名绑定,apache支持中文域名绑定,教你怎样让apache支持中文域名绑定,根据本人实际经验,叫你如何让apache支持中文域名绑定,绝对管用的让apache支持中文域名 ...
- 让IE6IE7IE8支持CSS3属性的8种方法介绍
我们都知道,IE浏览器暂不支持CSS3的一些属性.国外的工程师们,不安于此现状,他们总是尽量使用一些手段使IE浏览器也能支持CSS3属性,我觉得这些都是很有意义,很有价值的工作,可以推动整个技术领域的 ...
- IE浏览器部分版本不支持background-siza属性问题
background-size是CSS3新增的属性,但是IE8以下还是不支持,可以通过滤镜来实现这样的一个效果 background-size:contain; // 缩小图片来适应元素的尺寸(保持像 ...
- js错误:对象不支持此属性或方法
对象不支持此属性或方法 错误原因: 可能是js的文件名和另外一个文件重复. 也有可能是js里的function和另外一个function名字重复. 也有可能是js里的function和页面的某一元素重 ...
- 对象不支持“attachEvent”属性或方法的解决办法
有些脚本在IE11下执行会报错误: 对象不支持“attachEvent”属性或方法 解决办法 解决办法:把attachEvent改为addEventListener即可
随机推荐
- ping功能实现(ICMP)
简单记录下项目中ping功能实现 笔记:ping功能实现 void Handler::handlePingDepot(const char *ip) { int mSize=50*1024; bzer ...
- YOLO3论文中文版
文章目录 YOLO3论文中文版 摘要 1.引言 2. 解决方案 2.1 边界框预测 2.2 类预测 2.3 多尺度预测 2.4 特征提取器 2.5 训练 3.我们的做法 4. 失败的尝试 5.这一切意 ...
- 记一次nginx配置不当引发的499与failover 机制失效
背景 nginx 499在服务端推送流量高峰期长期以来都是存在的,间或还能达到告警阈值触发一小波告警,但主观上一直认为499是客户端主动断开,可能和推送高峰期的用户打开推送后很快杀死app有关,没有进 ...
- std::cin 和 std::getline 混用的问题
如果存在如下的输入, 11 is a prime 考虑如下的程序, std::cin>>number; std::getline(std::cin,input) std::cin 在读取数 ...
- 将音频格式从flac转到wav的两种方法
最近在智能语音中用到了数据集cn-celeb.这个数据集的音频格式是flac,而在做数据增强(augmentation)以及模型训练时用的数据格式是wav,因此需要把音频格式从flac转到wav.我在 ...
- 基于python爬虫技术对于淘宝的数据分析的设计与实现
本篇仅在于交流学习 本文主要介绍通过 selenium 模块和 requests 模块,同时让机器模拟人在浏览器上的行为,登录指定的网站,通过网站内部的搜索引擎来搜索自己相应的信息,从而获取相应关键字 ...
- 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 ...
- vue全家桶进阶之路20:ECMAScript脚本语言规范
ECMAScript(简称 ES)是一种由 Ecma 国际组织定义的脚本语言标准,它定义了 JavaScript 语言的基本规范和特性.JavaScript 是一种基于 ECMAScript 标准的编 ...
- Solon 用 throw 抛出数据
此文主要是想在观念上有所拓展.在日常的接口开发时,数据的输出可以有两种方式: 返回(常见) 抛出(可以理解为越级的.越类型的返回) 我们经常会看到类似这样的案例.为了同时支持正常的数据和错误状态,选择 ...
- MongoDB + SpringBoot 的基础CRUD、聚合查询
1.数据准备 1.1.springboot导包 springboot版本:2.7.10 点击查看代码 <!--mongodb的包--> <dependency> <gro ...