Blazor数据绑定分单向(@)和双向(@bind):单向仅代码驱动UI更新,适合只读展示;双向自动同步UI与变量,支持onchange/oninput事件定制、EditForm表单验证及自定义组件@bind-Value+EventCallback传值。

Blazor 的数据绑定核心就两条路:单向显示用 @,双向同步用 @bind。关键不是记语法,而是分清“谁驱动谁”——是代码改 UI,还是 UI 改代码,或者两边都要动。
单向绑定:只让代码值影响 UI
用 @变量名 直接把 C# 值插入 HTML,UI 不会反过来改这个变量。适合展示状态、标题、时间这类只读内容。
- 比如
,即使用户在页面上点按钮调用了当前计数:@count
count++,页面才会更新;但你手动改了页面上的数字,count变量完全不受影响 - 注意:它不监听输入事件,也不触发重渲染 —— 渲染只发生在组件逻辑执行完之后(比如点击事件处理完)
双向绑定:@bind 让 UI 和变量自动同步
@bind 是最常用的数据绑定方式,本质是 @bind-value + @bind-value:event 的语法糖,适用于 、、 等表单控件。
易和阳光购物商城原为伴江行购物商城,只是根据互联网的发展对网站程序进行改进! 修改了50%以上的代码部分,暂时没有对数据库修改! 易和阳光购物商城 v1.6功能简介 增加了会员卡功能 绑定了会员卡的会员可以使用会员卡及用户名双登陆 会员卡自带积分充值功能
- 默认绑定到
onchange事件:比如文本框中输完按失焦或回车,才更新变量 - 想实时响应(每敲一个字就更新),改成
@bind-value:event="oninput" - 复选框(
)自动绑定checked属性,不用额外写@bind-value
绑定到复杂对象或表单:用 EditForm
处理多字段表单时,推荐用 组件,它配合模型类和验证系统更可靠。
- 给
EditForm指定Model(比如一个TodoItem实例),内部所有、都能用@bind-Value绑定到对应属性 - 支持级联的验证上下文(
EditContext),错误提示、脏检查、提交拦截都内置好了 - 别直接对
Model字段做@bind="Model.Title",应使用,否则验证和变更跟踪会失效
自定义组件间传值:靠 @bind + EventCallback
父组件想把值传给子组件,又希望子组件改值时父组件也同步,就得用 @bind 的扩展写法。
- 子组件声明两个参数:
[Parameter] public string Value { get; set; }和[Parameter] public EventCallbackValueChanged { get; set; } - 父组件调用时写成
,Blazor 会自动把userName当作Value,同时把赋值回调注入ValueChanged - 子组件内部修改值时,必须调用
ValueChanged.InvokeAsync(newVal),否则父组件收不到更新
基本上就这些。不复杂但容易忽略的是事件时机(onchange vs oninput)、EditForm 的绑定粒度、以及自定义组件里 ValueChanged 必须显式调用 —— 这三点踩坑最多。









