Blazor封装InputSelect组件绑定异常：值无法回传问题排查

问题核心是自定义组件未正确传递绑定表达式，导致生成的name属性为Value而非Input.LanguageIsoCode，进而表单提交时模型绑定失败。以下是两种可靠的解决方式：

方法1：继承InputBase（推荐） #

直接复用Blazor原生输入组件的基类，自动处理表达式解析、name生成和绑定逻辑：

@inherits InputBase<string>

<select @attributes="AdditionalAttributes" 
        value="@CurrentValueAsString" 
        @onchange="HandleSelectChange">
    <option value="en">English</option>
    <option value="zh">中文</option>
    <!-- 添加更多语言选项 -->
</select>

@code {
    private void HandleSelectChange(ChangeEventArgs e)
    {
        CurrentValueAsString = e.Value?.ToString() ?? string.Empty;
    }

    protected override bool TryParseValueFromString(string value, out string result, out string validationErrorMessage)
    {
        // 简单类型直接返回，无需额外验证
        result = value;
        validationErrorMessage = null;
        return true;
    }
}

使用时和原生InputSelect完全一致：

<LanguageSelect @bind-Value="Input.LanguageIsoCode" />

为什么有效？ #

InputBase基类内部通过ValueExpression获取绑定的原始表达式（比如Input.LanguageIsoCode），自动生成对应的name属性，同时处理值的双向绑定和验证逻辑，和原生组件行为完全一致。

方法2：手动传递绑定表达式（不继承基类） #

如果不想依赖InputBase，可以手动接收ValueExpression参数，解析生成正确的name属性：

@typeparam TValue

<select name="@FieldIdentifier.FieldName" 
        value="@Value" 
        @onchange="HandleChange">
    <option value="en">English</option>
    <option value="zh">中文</option>
</select>

@code {
    [Parameter]
    public TValue Value { get; set; }

    [Parameter]
    public EventCallback<TValue> ValueChanged { get; set; }

    // 必须接收绑定表达式，用于解析字段名
    [Parameter]
    public Expression<Func<TValue>> ValueExpression { get; set; }

    private FieldIdentifier FieldIdentifier => FieldIdentifier.Create(ValueExpression);

    private async Task HandleChange(ChangeEventArgs e)
    {
        if (e.Value is string selectedValue)
        {
            var convertedValue = (TValue)Convert.ChangeType(selectedValue, typeof(TValue));
            await ValueChanged.InvokeAsync(convertedValue);
        }
    }
}

使用时同样用@bind-Value，Blazor会自动传递ValueExpression参数：

<LanguageSelect @bind-Value="Input.LanguageIsoCode" />

原理说明 #

通过ValueExpression可以获取绑定的目标字段路径，FieldIdentifier.FieldName会解析出Input.LanguageIsoCode作为select的name属性，确保表单提交时模型绑定能正确识别该字段。

两种方式都能解决name属性错误的问题，推荐第一种，因为它还能原生支持Blazor的表单验证等功能，减少自定义代码量。

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