Blazor .NET 8 Server端双向绑定失效、ValueChange事件未触发问题

核心问题 #

你的TextBoxBase组件未正确关联Syncfusion SfTextBox的ValueChange事件，导致输入内容变化时无法触发内部的ValueChanged回调，进而无法同步更新父组件绑定的SignInView属性，最终出现绑定值始终为null的情况。

修复步骤 #

1. 为SfTextBox绑定ValueChange事件

修改TextBoxBase的Razor代码，添加ValueChange事件绑定到自定义的OnValueChanged方法，并修正双向绑定的大小写（保持与参数名一致）：

<SfTextBox @bind-Value=@Value
           Placeholder=@Placeholder
           Enabled=@IsEnabled
           FloatLabelType=@FloatLabelType.Never
           CssClass="@CssClass"
           ValueChange="@OnValueChanged" />

2. 完善OnValueChanged方法逻辑

更新TextBoxBase中的OnValueChanged方法，增加空值检查并确保组件状态更新：

private async Task OnValueChanged(ChangeEventArgs changeEventArgs)
{
    if (changeEventArgs.Value == null) return;
    
    this.Value = changeEventArgs.Value.ToString();
    await ValueChanged.InvokeAsync(this.Value);
    await InvokeAsync(StateHasChanged);
}

3. 确保SignInView的属性为可绑定类型

检查SignInView类，确保属性具备get和set访问器（字段无法支持双向绑定）：

public class SignInView
{
    public string UsernameOrEmail { get; set; } = string.Empty;
    public string Password { get; set; } = string.Empty;
}

4. 初始化SignInView的属性值

在SignInComponent的OnInitialized中，为SignInView的属性设置初始空值，避免初始状态为null：

protected override void OnInitialized()
{
    SignInView = new SignInView
    {
        UsernameOrEmail = string.Empty,
        Password = string.Empty
    };
    State = ComponentState.Content;
}

验证修复 #

完成上述修改后，输入内容时SfTextBox的ValueChange事件会触发TextBoxBase的OnValueChanged方法，进而通过ValueChanged回调同步更新父组件的SignInView.UsernameOrEmail和SignInView.Password属性，绑定值将正常更新。

内容的提问来源于stack exchange，提问作者Ahmad Salim