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数据绑定用法的文章就介绍到这了。希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
这篇文章介绍了ASP.NET Core Razor页面的用法，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2022-02-02
这篇文章介绍了WPF框架Prism中导航Navigation的用法，文中通过示例代码介绍的非常详细。对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2022-02-02
这篇文章介绍了IIS部署ASP.NET Core项目的方法及常见问题总结，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2022-01-01
ASP.NET在VS2022中使用Dispose释放资源实例
这篇文章介绍了ASP.NET在VS2022中使用Dispose释放资源实例，文中通过示例代码介绍的非常详细。对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2021-11-11
本文详细讲解了asp.net MVC的处理流程，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2022-07-07
这篇文章介绍了WPF的控件结构及各种控件类型，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2022-01-01
这篇文章主要讲述了析构函数的概念、原理、功能以及定义格式,析构函数是C#程序设计中比较重要的概念,需要的朋友可以参考一下2007-12-12
这篇文章介绍了Asp.net core前端框架Blazor，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2022-06-06
在ASP.NET中Control都有一个FindControl方法，其作用是根据ID（注意既不是UniqueID也不是ClientID）在Control所在的命名容器中寻找相应控件，但实际使用中存在很多误区和陷阱，下面谈谈个人对此的理解2012-01-01
Asp.Net 不同的OnClick事件区别小结(onserverclick,onclientclick)
下面以 HTML的按钮（ system.web.ui.htmlcontrols ） 和 ASP.NET服务端按钮 （ system.web.ui.webcontrols ) 为例2012-05-05
最新评论