讲师中心 微信公众号
AI工具推荐 视频效率加速

Blazor @bind 双向绑定使用方法

阿瑶酱_3336

阿瑶酱_3336

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

|

233人浏览过

|

来源于php中文网

原创

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

blazor @bind 双向绑定使用方法

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

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

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

  • @bind 实际是 @bind-value 的简写,只适用于有 value 属性的元素(比如 type="text"、type="number"、textarea、select)
  • 默认触发时机是 onchange 事件,即输入框失去焦点(blur)或选择项确认后才更新变量
  • 示例:<input type="text" @bind="name" /><p>你输入了:@name</p>,其中 private string name = ""; 在 @code 块中声明

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

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

Doc To HTML
Doc To HTML

使用 MinerU 文档处理引擎将 Word 文档(.doc、.docx)转换为保留结构和格式的干净 HTML。

下载
  • <input type="text" @bind="searchText" @bind:event="oninput" />
  • 注意:oninput 在大多数现代浏览器中都支持,但 onchange 更稳妥(尤其兼容旧场景)
  • 其他可用事件包括 onblur、onkeyup 等,按需选用

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

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

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

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

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

  • <input @bind="person.Name" />、<input type="number" @bind="person.Age" />
  • 确保 person 已初始化(如 private Person person = new();),否则运行时报空引用
  • 在 EditForm 中也可结合 @bind-Value 使用,但推荐统一用 @bind 保持简洁

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

热门AI工具

更多
豆包大模型

豆包大模型是一款由字节跳动推出的企业级大语言模型服务平台。

Loomy
Loomy Hot

一款AI工具,主要用于科大讯飞发布的桌面级 AI 助理,比 OpenClaw 更易用、更安全!,适合需要提升相关任务效率的用户。

墨刀AI
墨刀AI Hot

一款AI图像与设计工具,主要用于产品经理的专属智能体,适合需要提升相关任务效率的用户。

LibLibAI
LibLibAI Hot

一款AI视频创作工具,主要用于国内领先的AI创意平台,以海量模型、低门槛操作与“创作-分享-商业化”生态,让小白与专业创作者都能高效实现图文乃至视频创意表达,适合需要提升相关任务效率的用户。

讯飞智作

讯飞智作是一款AI视频创作工具,AI文本配音工具,数字人课程、营销视频制作。

立刻MV
立刻MV Hot

立刻MV是一款AI文本写作工具,AI 音乐视频(MV)创作工具。

蛙蛙写作

一款AI论文写作工具,主要用于超级AI智能写作助手,适合需要提升相关任务效率的用户。

DeepSeek

DeepSeek是一款面向对话、写作、编程和推理场景的AI大模型工具。

WorkBuddy

一款AI办公效率工具,主要用于腾讯云推出的AI原生桌面智能体工作台,适合需要提升相关任务效率的用户。

相关专题

更多
string转int
string转int

在编程中,我们经常会遇到需要将字符串(str)转换为整数(int)的情况。这可能是因为我们需要对字符串进行数值计算,或者需要将用户输入的字符串转换为整数进行处理。php中文网给大家带来了相关的教程以及文章,欢迎大家前来学习阅读。

5279

2023.08.02

点击input框没有光标怎么办
点击input框没有光标怎么办

点击input框没有光标的解决办法:1、确认输入框焦点;2、清除浏览器缓存;3、更新浏览器;4、使用JavaScript;5、检查硬件设备;6、检查输入框属性;7、调试JavaScript代码;8、检查页面其他元素;9、考虑浏览器兼容性。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

674

2023.11.24

Buffalo框架数据库开发全教程
Buffalo框架数据库开发全教程

本专题围绕Buffalo框架数据库开发,讲解database.yml多环境配置、soda与fizz迁移生成回滚、模型结构体标签、增删改查与条件查询、一对多与多对多关联、数据校验、回调钩子、事务处理及原生SQL执行能力。

120

2026.09.23

Buffalo框架路由与请求处理实操指南
Buffalo框架路由与请求处理实操指南

本专题讲解Buffalo框架路由与请求处理机制,涵盖路由注册与分组、资源路由、Handler编写规范、Context上下文方法、参数绑定、中间件编写挂载、Session与Cookie读写、Flash消息及错误页面定制方法。

40

2026.09.23

Buffalo框架零基础入门教程
Buffalo框架零基础入门教程

本专题整理Buffalo框架入门内容,涵盖Go环境准备、buffalo CLI安装、新项目生成、目录结构说明、dev热加载启动、数据库连接配置与常见报错排查,帮助新手按约定优于配置的思路跑通第一个Buffalo框架应用。

40

2026.09.23

Conan创建软件包配方指南
Conan创建软件包配方指南

本专题介绍通过conanfile.py创建软件包的方法,讲解包名、版本、依赖和构建设置等基础信息,以及source、build、package、package_info等常用方法的作用及编写思路。

20

2026.09.22

Conan二进制包配置指南
Conan二进制包配置指南

本专题介绍Conan根据操作系统、编译器、架构和构建类型生成二进制包的方法,讲解Profile、Settings、Options及Package ID的作用,帮助管理不同平台和编译环境下的包版本。

40

2026.09.22

Conan私有仓库搭建教程
Conan私有仓库搭建教程

本专题系统的讲解Conan私有仓库的搭建流程,涵盖仓库服务部署、存储目录配置、用户认证、权限划分和远程地址添加,并介绍内部C++依赖包的上传、下载及版本维护方法。

40

2026.09.22

loomy官网入口地址合集
loomy官网入口地址合集

本专题汇总了 Loomy 桌面 AI 助理的官方入口地址合集及使用指南。提供 macOS 与 Windows 客户端下载 。Loomy 是讯飞推出的桌面级 AI 工作搭子,支持文件整理、数据分析、网页操作及通过飞书/钉钉远程操控电脑,助你高效完成本地办公任务 。

40

2026.09.22

热门下载

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

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
GDB 17.2 官方文档集合
GDB 17.2 官方文档集合

共0课时 | 0人学习

Bootstrap 入门安装配置
Bootstrap 入门安装配置

共0课时 | 0人学习

38+ PhpStorm 提示和技巧
38+ PhpStorm 提示和技巧

共1课时 | 211人学习

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

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn