Blazor数据绑定用法
Blazor当中, 类似实现了WPF的基础绑定功能, 支持在HTML元素当中使用Razor语法进行绑定C#字段、属性或 Razor 表达式值。
绑定语法
在Html标签中,使用Razor的语法, 前缀使用@符号, 然后添加 @bind="xxxx" 即可实现最简单的绑定, 如下:
input @bind="Name" /> @code { private string Name{ get; set; } }
通过上面的操作, Input中的值与属性Name则进行了一个双向绑定, 无论是Name主动发生变更, 还是Input的值发生变化, 两者都会同时更新。
通过@bind的声明与 value="@xxx"的区别:
@xxx/@bind区别
value="@xxx": 只能做到属性呈现到UI元素当中, 无法与UI元素建立关系, 即: 元素发生变化并不会影响到属性变更。
绑定对象
下面示例演示了一个如何在html元素中的值如何绑定到一个对象的属性上。
<input @bind="Stu.Name"/> @code{ public Student Stu { get; set; } = new Student() { Name = "123" }; public class Student { public string Name { get; set; } } }
效果如下所示:
数据格式化
如果需要使用数据格式化显示, 可以通过Razor中的语法: @bind:format , 如下所示,展示了一个日期元素格式化样例:
<input @bind="StartDate" @bind:format="yyyy-MM-dd" /> @code { [Parameter] public DateTime StartDate { get; set; } = new DateTime(2020, 1, 1); }
绑定子组件属性
通常情况下, 对于父界面而言, 往往是由一个或者多个子组件组成 (用于提高程序的复用性), 所以父组件而言, 往往需要将父组件的参数绑定到子组件当中。
下面的例子,演示了一个子组件当中的字符串, 如何绑定到父组件的属性上。
声明子组件参数与回调函数
声明了组件参数Year, 还需要声明一个组件回调函数, 该回调函数主要用于子组件的数据发生变更。
回调函数的声明规则为, 参数类型与对应的属性一直, 名称以属性名开头
<p>Year: @Year</p> @code { [Parameter] public int Year { get; set; } [Parameter] public EventCallback<int> YearChanged { get; set; } }
父组件调用
<ChildComponent @bind-Year="ParentYear" /> @code { [Parameter] public int ParentYear { get; set; } = 1978; }
无法预估的值
当元素与属性建立了绑定关系, 但是受限于属性的类型, 如果UI元素中发生了类型不一致的变更,则在触发绑定事件时,无法分析的值会自动还原为以前的值。
例: 当绑定的属性为Int类型时, UI元素将内容修改为string字符, 当UI元素发生事件变更时, 该值无法进行int类型的转换,则回自动还原。
到此这篇关于Blazor数据绑定用法的文章就介绍到这了。希望对大家的学习有所帮助,也希望大家多多支持猪先飞。
原文出处:https://www.cnblogs.com/zh7791/p/12742466.html
相关文章
- 本文给大家分享C#连接SQL数据库和查询数据功能的操作技巧,本文通过图文并茂的形式给大家介绍的非常详细,需要的朋友参考下吧...2021-05-17
- 最基础的对数据的增加删除修改操作实例,菜鸟们收了吧...2013-09-26
- 这篇文章主要介绍了解决Mybatis 大数据量的批量insert问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2021-01-09
Antd-vue Table组件添加Click事件,实现点击某行数据教程
这篇文章主要介绍了Antd-vue Table组件添加Click事件,实现点击某行数据教程,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-11-17- 这篇文章主要介绍了详解如何清理redis集群的所有数据,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-02-18
- 这篇文章主要介绍了vue 获取到数据但却渲染不到页面上的解决方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2020-11-19
- 这篇文章主要介绍了mybatis-plus 处理大数据插入太慢的解决,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2020-12-18
- 在php中解析xml文档用专门的函数domdocument来处理,把json在php中也有相关的处理函数,我们要把数据xml 数据存到一个数据再用json_encode直接换成json数据就OK了。...2016-11-25
- 这篇文章主要介绍了postgresql数据添加两个字段联合唯一的操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2021-02-04
Vue生命周期activated之返回上一页不重新请求数据操作
这篇文章主要介绍了Vue生命周期activated之返回上一页不重新请求数据操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-07-26- 这篇文章主要介绍了c# socket网络编程,server端接收,client端发送数据,大家参考使用吧...2020-06-25
- 这篇文章主要介绍了vue 数据(data)赋值问题的解决方案,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2021-03-29
- 这篇文章主要介绍了Python3 常用数据标准化方法详解,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2021-03-24
- 这篇文章主要介绍了解决vue watch数据的方法被调用了两次的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-11-07
- 这篇文章主要介绍了jQuery事件绑定用法,结合实例形式较为详细的分析了jQuery事件绑定的实现原理与相关注意事项,并附带了相关绑定方法的使用说明,重点介绍了bind和live的区别,需要的朋友可以参考下...2016-01-21
- 这篇文章主要为大家详细介绍了node.js从数据库获取数据的具体代码,nodejs可以获取具体某张数据表信息,感兴趣的朋友可以参考一下...2016-05-09
- 这篇文章主要为大家详细介绍了C# TextBox数据绑定的方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2020-06-25
- 使用下以两种方法时必须把字段设为”主键(PRIMARY KEY”或”唯一约束(UNIQUE)”。1:使用REPLACE INTO (此种方法是利用替换的方法,有点似类于先删除再插入) 复制代码 代码如下:REPLACE INTO Syntax REPLACE [LOW_PRIO...2013-10-04
- 这篇文章主要介绍了JavaScript为事件句柄绑定监听函数的方法,结合实例详细分析了常见的事件句柄绑定监听函数的实现技巧,并实例讲解了跨浏览器的实现方法,需要的朋友可以参考下...2015-12-17
- 这篇文章主要介绍了PostgreSQL 恢复误删数据的操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2021-01-18