pb 更改dropdwonlistbox绑定数据_Blazor 修仙之旅 组件与数据绑定
一.前言
在第一篇文章初尝 Blazor WebAssembly中,有提到过组件(Component)这个概念。组件在 Blazor 中是必不可少的,UI 全靠它组装起来,和前端的 JS 组件是一个意思,比如:vue component、react component 等等。借用官方文档的描述:
Blazor 应用是使用组件构建的。组件是自包含的用户界面 (UI) 块,例如页、对话框或窗体。组件包含插入数据或响应 UI 事件所需的 HTML Tag和处理逻辑。组件非常灵活且轻量。可在项目之间嵌套、重复使用和共享。
二.组件
组件一般以 .razor 为文件名后缀,且组件名必须以大写字母开头(猜测可能是和VUE里的命名限制一样,表面和Html标签名重复)。
我们新建的项目,Shared 文件夹中就有三个组件:
左侧导航菜单组件:
在主布局组件中应用了导航菜单组件:
更多关于组件的资料请查阅官方文档:创建和使用 ASP.NET Core Razor 组件
三.数据绑定
1.介绍
Razor 组件通过名为 @bind
的HTML元素属性提供数据绑定功能,这个绑定是双向的。
@bind
是区分大小写的,例如:@BIND
、@Bind
都是错误的,下面写了一个例子,将 CurrentValue
绑定到两个文本框中。
变 更
@code
{
public int CurrentValue { get; set; } = 0;
private void ChangeValue()
{
CurrentValue ++;
}
}
需要注意的是在文本框的绑定中,仅当呈现组件时,UI才会更新文本框,而不响应于更改属性的值。由于组件是在事件处理程序代码执行后呈现的,因此属性更新通常在触发事件处理程序后立即反映在UI中。
@bind="CurrentValue"
等同于以下代码:
@onchange="@((ChangeEventArgs __e) => CurrentValue = __e.Value.ToString())" />
@code { public int CurrentValue { get; set; } = 0;}
点击按钮,变更了值,也会应用到文本框中:
2.变更绑定事件
上面小节中,默认绑定了 onchange
事件,只有文本框失去焦点才会触发,体验不是很好,那么可不可以在输入的时候就同步更新值呢,当然是可以的,解决方案就是变更绑定事件为 oninput
,通过设置@bind:event
属性来变更绑定事件:
3.输入错误的值
我们设置的 CurrentValue 的类型是 int ,如果我们输入字母,那么字母将不会被接受,同时值会恢复到输入前的正确值。
4.子父组件数据传递
在 vue、react 等 js 中,都有子父组件传值概念,Blazor 也不例外。
(1)父传子
新建一个子组件命名为 ChildComponent
子组件
Year:
@code {
[Parameter]
public int Year { get; set; }
[Parameter]
public EventCallback YearChanged { get; set; }
}
定义一个 Year
属性和 EventCallback
类型的属性 YearChanged
新建一个父组件命名为ParentComponent
父组件
ParentYear:
@code {
[Parameter]
public int ParentYear { get; set; } = 1978;
}
在页面中引用父组件:
YearChanged
是一个约定命名,不能更改,更改将会报错:
EventCallback 用于子父组件嵌套时公开事件,比如 YearChanged 就公开了子组件 Year 属性的 changed 事件。父组件里,通过 @bind-Year
来绑定 Year
的 changed 事件,然后将父组件 ParentYear
的值传递过去,达成父级组件向子级组件传递值。
等同于 ,如果使用后者,那么事件命名将不会受约定命名限制。
运行效果:
(2)子传父(链式绑定)
子传父,无法直接通过 @bind
来实现,需要单独指定事件处理程序和值,我们更改上面的子组件,定义一个 OnYearChanged
事件,并将其绑定到文本框的 oninput
事件,在事件里手动更新了 Year的值,并调用 YearChanged 来进行传递。
子组件
Year:
@code {
[Parameter]
public int Year { get; set; }
[Parameter]
public EventCallback YearChanged { get; set; }
private Task OnYearChanged(ChangeEventArgs e)
{
Year = int.Parse(e.Value.ToString());
return YearChanged.InvokeAsync(Year);
}
}
运行:
四.资料
本文Demo:https://github.com/stulzq/BlogDemos/tree/master/Blazor/Component%20and%20Data%20Binding
pb 更改dropdwonlistbox绑定数据_Blazor 修仙之旅 组件与数据绑定相关推荐
- 更新 绑定数据_Blazor 修仙之旅 组件与数据绑定
一.前言 在第一篇文章初尝 Blazor WebAssembly中,有提到过组件(Component)这个概念.组件在 Blazor 中是必不可少的,UI 全靠它组装起来,和前端的 JS 组件是一个意 ...
- 大数据生态系统 修仙之道 Hadoop Blog
大数据生态系统 修仙之道 Hadoop Blog @(2019-01-22)[Docs Language:简体中文 & English|Programing Language:Hadoop|W ...
- 大数据生态系统 修仙之道 Linux Blog
大数据生态系统 修仙之道 Linux Blog @(2019-01-03)[Docs Language:简体中文 & English|Programing Language:Linux|Web ...
- 补鞋匠(cobbler)的修仙之旅
一.筑基期---cobbler简介 Cobbler是一个开源的系统部署软件,基于PXE的二次封装,并集成了DNS,DHCP,软件包更新,电源管理以及配置管理编排等功能:实现快速网络安装操作系统. 二. ...
- 漫谈架构师之路的修仙之法
从小有一个武侠梦,长大从事了IT,空闲时间看了很多修仙小说.就萌生了一个想法:把IT之路和修仙之路联系到一起. 于是参照<凡人修仙传>的各个修仙阶段,对比IT之路进行了对照,才有了这篇文章 ...
- c语言修仙角色,C语言修仙手游-C语言修仙手游安卓版V7.4.0预约_第一手游网
<C语言修仙>是一款非常受玩家欢迎的仙侠冒险角色扮演手游,精致唯美的游戏画面风格,栩栩如生的人物形象,炫酷华丽的技能特效释放,上古的神兽坐骑,最完美的情缘系统,还有完善的社交系统,自由的进 ...
- c语言修仙一十四洲简介,《C语言修仙·下》编辑推荐、内容简介及作者一十四洲简介...
<C语言修仙·下>编辑推荐.内容简介及作者一十四洲简介 <C语言修仙·下>编辑推荐 ● <C语言修仙>是晋江超人气作者一十四洲未来幻想力作,也是晋江完结金榜作品,截 ...
- C语言修仙1,C语言修仙官方版
C语言修仙是一款在线受到很多玩家追捧的角色冒险游戏,栩栩如生的一些人物造型,各种炫酷的特效展现,最完美的一些情缘系统,完善自己的社交体验,自由的打造自己的神器,和自己的仙友遨游在这个世界中,神秘的bo ...
- 《遇见尊上》4.1上线链游玩家|不甘天命、恋爱修仙
导语:<遇见尊上>带你感受真正的古风游戏,剧情向风格进行体验内容丰富多样玩的不亦乐乎,多个角色可以选择极具个性化都拥有自己的专属剧情故事,超级好看的古风游戏背景满足玩家的视觉体验玩的不亦乐 ...
最新文章
- windows如何清理无效注册表?如何重装python,如何彻底清理python
- Handlebars模板库浅析
- 远程桌面连接数超过最大限制解决方法
- 编写python程序、计算账户余额_小明有20w存款存在余额宝中,按余额宝年收益为3.35%计算,用Python编写程序计算,多少年后小明的存款达到30w?...
- mysql binlog日志定时删除---计划任务
- iDesktop点数据集构建DEM时三种插值方式的选择
- 更换已存在项目的svn的地址
- 开关电源测试系统用哪个软件,开关电源测试系统
- 佳能hdr_佳能发布Cinema EOS系统首款RF卡口 4K数字电影摄影机EOS C70
- Stream流简单使用之List集合排序
- (Java笔记)CGLib动态代理
- 【U8+】去掉填制凭证界面金额中的网格
- ios 判断打开相机权限_ios 判断是否有权限访问相机,相册,定位
- foobar2000界面自定义详解
- Excel函数IF的多条件通配使用方法
- SQL基础系列(七)——CASE表达式
- 使用OneDNS完美解决办公网络优化问题
- 多媒体 || GIF压缩与JPEG压缩的对比
- 如何将已下载音乐导入到iPhone的网易云音乐中
- 北京燃油车指标转成新能源指标怎么转?