Blazor Server嵌套组件双向绑定失效问题求助

问题根源 #

Blazor组件参数默认是单向传递，子组件内部修改参数值不会自动同步回父组件的绑定对象。你的SpecialInstructions组件只定义了单向接收的Instructions参数，没有提供通知父组件更新值的回调机制，导致编辑后的内容无法同步到CreateBillViewModel中。

修复步骤 #

1. 修改子组件SpecialInstructions.razor，添加双向绑定所需的回调事件

按照Blazor双向绑定约定，添加与参数名匹配的EventCallback（命名规则：参数名 + Changed）：

<div class="col-12">
    <div class="card">
        <div class="card-body">
            <h4 class="header-title">Special Instructions <span class="text-danger">*</span></h4>
            <p class="sub-header">
                Special instructions for the driver and consignee.
            </p>

            <div class="mb-3">
                <textarea 
                class="form-control" 
                id="special-instructions" 
                rows="3" 
                placeholder="Please enter any special instructions for the driver" 
                @bind-value=Instructions @bind-value:event="oninput"></textarea>
            </div>
        </div>
    </div>
</div>

@code {
    [Parameter]
    public string? Instructions { get; set; }

    // 添加双向绑定所需的回调事件
    [Parameter]
    public EventCallback<string?> InstructionsChanged { get; set; }
}

注：Blazor的@bind-value会自动关联Instructions和InstructionsChanged，当文本框内容变化时，会通过InstructionsChanged通知父组件更新绑定值。

2. 修改父组件CreateBill.razor，使用双向绑定语法

将子组件的参数传递从单向改为双向绑定（使用@bind-前缀）：

<EditForm Model="@Model" OnSubmit="CreateBillOnSubmit">
    <!-- 使用@bind-Instructions实现双向绑定 -->
    <SpecialInstructions @bind-Instructions="@Model.SpecialInstructions" />
</EditForm>

@code {
    private CreateBillViewModel? Model { get;set; }

    protected override void OnInitialized() => Model = new CreateBillViewModel()
    {
        BillDate = DateTime.Today,
        SpecialInstructions = "Default Instructions",
    };

    private async Task CreateBillOnSubmit(EditContext arg)
    {
        await Task.Delay(5);
        // 此时Model.SpecialInstructions已经同步了UI中的修改
        Console.WriteLine($"Submitted: {Model?.SpecialInstructions}");
    }
}

3. 确保ViewModel属性的正确性

CreateBillViewModel中的SpecialInstructions属性需要确保初始化时不为null，避免空引用问题：

public class CreateBillViewModel
{
    public DateTime BillDate { get; set; }
    // 初始化默认值，或者在构造函数中赋值
    public string SpecialInstructions { get; set; } = string.Empty;
}

验证效果 #

修改完成后，编辑文本框内容并提交，Model.SpecialInstructions会正确同步UI中的输入值，提交时可以看到更新后的内容。

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