0

0

Blazor @bind 双向绑定使用方法

煙雲

煙雲

发布时间:2026-01-05 10:13:13

|

193人浏览过

|

来源于php中文网

原创

@bind 是 Blazor 实现双向绑定的核心机制,用于同步输入控件与 C# 变量:支持 @bind="val" 简写、@bind:event 指定触发时机(如 oninput)、@bind-参数名 实现组件间绑定,且可链式绑定对象属性。

blazor @bind 双向绑定使用方法

@bind 是 Blazor 中实现双向绑定最常用、最直接的方式,核心作用是让输入控件(如 inputselecttextarea)的值与 C# 变量实时同步:用户改输入框,变量自动更新;变量在代码中被修改,输入框也立刻反映变化。

基础用法:@bind="变量名"

只需在支持 value 属性的 HTML 表单元素上添加 @bind="xxx" 即可。Blazor 会自动处理“读取值”和“写入值”两个方向。

  • @bind 实际是 @bind-value 的简写,只适用于有 value 属性的元素(比如 type="text"type="number"textareaselect
  • 默认触发时机是 onchange 事件,即输入框失去焦点(blur)或选择项确认后才更新变量
  • 示例:

    你输入了:@name

    ,其中 private string name = "";@code 块中声明

实时响应:用 @bind:event 控制更新时机

如果希望变量随每次按键/输入立即更新(比如做实时搜索、字数统计),需显式指定事件为 oninput

BgSub
BgSub

免费的AI图片背景去除工具

下载
  • 注意:oninput 在大多数现代浏览器中都支持,但 onchange 更稳妥(尤其兼容旧场景)
  • 其他可用事件包括 onbluronkeyup 等,按需选用

组件间双向绑定:@bind-参数名

父组件想把某个变量“可读可写”地传给子组件,不能只用 Parameter,而要配合命名约定使用 @bind-XXX

  • 子组件必须声明两个配套成员:
    [Parameter] public string MyValue { get; set; }
    [Parameter] public EventCallback MyValueChanged { get; set; }
  • 在子组件内部,当值改变时主动调用:MyValueChanged.InvokeAsync(newVal);
  • 父组件使用:,Blazor 自动完成双向连接
  • 关键点:事件名必须是 参数名 + "Changed",否则会报 InvalidOperationException

绑定复杂对象属性或表单字段

@bind 支持链式访问,可直接绑定到模型对象的属性,适合表单场景:

  • 确保 person 已初始化(如 private Person person = new();),否则运行时报空引用
  • EditForm 中也可结合 @bind-Value 使用,但推荐统一用 @bind 保持简洁

基本上就这些。不复杂但容易忽略细节,比如事件命名规则、默认触发时机、以及只支持 value 属性的限制。用对了,数据流就清晰可控。

相关专题

更多
html版权符号
html版权符号

html版权符号是“©”,可以在html源文件中直接输入或者从word中复制粘贴过来,php中文网还为大家带来html的相关下载资源、相关课程以及相关文章等内容,供大家免费下载使用。

601

2023.06.14

html在线编辑器
html在线编辑器

html在线编辑器是用于在线编辑的工具,编辑的内容是基于HTML的文档。它经常被应用于留言板留言、论坛发贴、Blog编写日志或等需要用户输入普通HTML的地方,是Web应用的常用模块之一。php中文网为大家带来了html在线编辑器的相关教程、以及相关文章等内容,供大家免费下载使用。

643

2023.06.21

html网页制作
html网页制作

html网页制作是指使用超文本标记语言来设计和创建网页的过程,html是一种标记语言,它使用标记来描述文档结构和语义,并定义了网页中的各种元素和内容的呈现方式。本专题为大家提供html网页制作的相关的文章、下载、课程内容,供大家免费下载体验。

463

2023.07.31

html空格
html空格

html空格是一种用于在网页中添加间隔和对齐文本的特殊字符,被用于在网页中插入额外的空间,以改变元素之间的排列和对齐方式。本专题为大家提供html空格的相关的文章、下载、课程内容,供大家免费下载体验。

243

2023.08.01

html是什么
html是什么

HTML是一种标准标记语言,用于创建和呈现网页的结构和内容,是互联网发展的基石,为网页开发提供了丰富的功能和灵活性。本专题为大家提供html相关的各种文章、以及下载和课程。

2871

2023.08.11

html字体大小怎么设置
html字体大小怎么设置

在网页设计中,字体大小的选择是至关重要的。合理的字体大小不仅可以提升网页的可读性,还能够影响用户对网页整体布局的感知。php中文网将介绍一些常用的方法和技巧,帮助您在HTML中设置合适的字体大小。

502

2023.08.11

html转txt
html转txt

html转txt的方法有使用文本编辑器、使用在线转换工具和使用Python编程。本专题为大家提供html转txt相关的文章、下载、课程内容,供大家免费下载体验。

308

2023.08.31

html文本框代码怎么写
html文本框代码怎么写

html文本框代码:1、单行文本框【<input type="text" style="height:..;width:..;" />】;2、多行文本框【textarea style=";height:;"></textare】。

421

2023.09.01

python设置中文版教程合集
python设置中文版教程合集

本专题整合了python改成中文版相关教程,阅读专题下面的文章了解更多详细内容。

1

2026.01.05

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
Bootstrap 5教程
Bootstrap 5教程

共46课时 | 2.8万人学习

AngularJS教程
AngularJS教程

共24课时 | 2.3万人学习

CSS教程
CSS教程

共754课时 | 17.8万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号