Blazor WASM中EditForm重复表单项可复用RenderFragment的bind-Value绑定问题

问题原因 #

你报错的核心是对Blazor双向绑定的语法糖逻辑理解有误：@bind-Value 本质是编译器语法糖，会同时为组件绑定 Value（当前值）、ValueChanged（值变更回调）、ValueExpression（属性表达式，用于校验关联）三个属性，你直接把 EventCallback 传给期望string类型的@bind-Value，自然类型不匹配。
你不需要使用反射，完全可以通过手动拆分绑定属性、或者封装为独立组件两种方案解决，都是编译时类型安全，无额外性能开销。

方案1：修改现有RenderFragment实现 #

第一步：调整RenderFragment参数定义 #

将原来的单一EventCallback拆分为当前值、变更回调两个参数，保留原有其他参数：

RenderFragment<(
    string CurrentValue,
    EventCallback<string> ValueChanged,
    Expression<Func<string>> ValueExpression,
    string Id,
    string Label,
    string Placeholder
)> RenderFieldSection = (item) => __builder =>
{
    <div class="row mb-3 align-items-center">
        <div class="col-sm-2">
            <label for="@item.Id">@item.Label</label>
        </div>
        <div class="col-sm-6 p-0">
            <!-- 手动拆分绑定三个属性，替代@bind语法糖 -->
            <InputText 
                Value="@item.CurrentValue"
                ValueChanged="@item.ValueChanged"
                ValueExpression="@item.ValueExpression"
                type="text" 
                placeholder="@item.Placeholder"
                class="rounded-input form-control"
                id="@item.Id"
                autocomplete="off"
            />
        </div>
        <div class="col-sm-4">
            <ValidationMessage For="@item.ValueExpression" />
        </div>
    </div>
};

第二步：调整调用代码 #

直接传入属性当前值、原有回调即可：

@RenderFieldSection((
    CurrentValue: registerModel.Company,
    ValueChanged: EventCallback.Factory.Create<string>(this, s => registerModel.Company = s),
    ValueExpression: () => registerModel.Company,
    Id: "Company",
    Label: Translate("CompanyNameLabel"),
    Placeholder: Translate("CompanyNamePlaceholder")
))

方案2（更推荐）：封装为独立Blazor组件 #

相比RenderFragment，独立组件可复用性更强、调用更简洁，也符合Blazor的开发惯用法：

第一步：新建FormTextField.razor组件 #

@typeparam TValue
<div class="row mb-3 align-items-center">
    <div class="col-sm-2">
        <label for="@Id">@Label</label>
    </div>
    <div class="col-sm-6 p-0">
        <InputText 
            @bind-Value="Value"
            type="text" 
            placeholder="@Placeholder"
            class="rounded-input form-control"
            id="@Id"
            autocomplete="off"
        />
    </div>
    <div class="col-sm-4">
        <ValidationMessage For="@ValueExpression" />
    </div>
</div>

@code {
    [Parameter] public string Id { get; set; }
    [Parameter] public string Label { get; set; }
    [Parameter] public string Placeholder { get; set; }
    [Parameter] public TValue Value { get; set; }
    [Parameter] public EventCallback<TValue> ValueChanged { get; set; }
    [Parameter] public Expression<Func<TValue>> ValueExpression { get; set; }
}

这里用了泛型TValue，后续如果要支持数字、日期等其他类型的输入组件也可以直接复用。

第二步：调用组件 #

直接用标准的@bind-Value语法即可，编译器会自动补全所有绑定参数：

<FormTextField 
    TValue="string"
    @bind-Value="registerModel.Company"
    Id="Company"
    Label="@Translate("CompanyNameLabel")"
    Placeholder="@Translate("CompanyNamePlaceholder")"
/>

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