MudBlazor MudSelect封装组件：绑定值与泛型参数报错排查

需求说明 #

需要封装MudBlazor的MudSelect组件为自定义组件DictMudSelectComponent，实现根据TableName参数动态渲染下拉选项。

原始MudSelect示例：

<MudSelect T="int" @bind-Value="@model.dict1" For="@(() => @model.dict1)" AnchorOrigin="Origin.BottomCenter">                
    <MudSelectItem T="int" Value="1">1</MudSelectItem>
    <MudSelectItem T="int" Value="2">2</MudSelectItem>
</MudSelect>

期望的自定义组件用法：

<DictMudSelectComponent T="int" @bind-Value="@model.dict1" For="@(() => model.dict1)" TableName="test" AnchorOrigin="Origin.BottomCenter"></DictMudSelectComponent>

当前实现代码 #

DictMudSelectComponent.razor：

@typeparam T
<MudSelect T="@T" @bind-Value="@Value" For="()=>For()" @attributes=AllOtherAttributes>
    <MudSelectItem T="int"  Value="1">1</MudSelectItem>
    <MudSelectItem T="int"  Value="2">2</MudSelectItem>
    <MudSelectItem T="int"  Value="3">3</MudSelectItem>
</MudSelect>

@code {
 private Func<T> _for ;

[Parameter]
public Func<T> For
{
    get => _for;
    set
    {
        if (_for == value)
            return;
        _for = value;
    }
}

private T _value ;

[Parameter]
public T Value
{
    get => _value;
    set => _value = value;
}

[Parameter]
public string TableName { get; set; } = "";


[Parameter(CaptureUnmatchedValues = true)]
public Dictionary<string, object> AllOtherAttributes { get; set; } = new();
}

报错信息 #

Unhandled exception rendering component: Unable to set property 'AnchorOrigin' on object of type 'MudBlazor.MudSelect`1[[System.Int32, System.Private.CoreLib, Version=6.0.0.0, Culture=neutral, PublicKeyToken=7cec85d7bea7798e]]'. The error was: Specified cast is not valid.
System.InvalidOperationException: Unable to set property 'AnchorOrigin' on object of type 'MudBlazor.MudSelect`1[[System.Int32, System.Private.CoreLib, Version=6.0.0.0, Culture=neutral, PublicKeyToken=7cec85d7bea7798e]]'. The error was: Specified cast is not valid.
 ---> System.InvalidCastException: Specified cast is not valid.
   at Microsoft.AspNetCore.Components.Reflection.PropertySetter.CallPropertySetter[MudSelect`1,Origin](Action`2 setter, Object target, Object value)
   at Microsoft.AspNetCore.Components.Reflection.PropertySetter.SetValue(Object target, Object value)
   at Microsoft.AspNetCore.Components.Reflection.ComponentProperties.<SetProperties>g__SetProperty|3_0(Object target, PropertySetter writer, String parameterName, Object value)
   --- End of inner exception stack trace ---
   at Microsoft.AspNetCore.Components.Reflection.ComponentProperties.<SetProperties>g__SetProperty|3_0(Object target, PropertySetter writer, String parameterName, Object value)
   at Microsoft.AspNetCore.Components.Reflection.ComponentProperties.SetProperties(ParameterView& parameters, Object target)
   at Microsoft.AspNetCore.Components.ParameterView.SetParameterProperties(Object target)
   at Microsoft.AspNetCore.Components.ComponentBase.SetParametersAsync(ParameterView parameters)
   at MudBlazor.MudBaseInput`1[[System.Int32, System.Private.CoreLib, Version=6.0.0.0, Culture=neutral, PublicKeyToken=7cec85d7bea7798e]].<>n__1(ParameterView parameters)
   at MudBlazor.MudBaseInput`1.<SetParametersAsync>d__177[[System.Int32, System.Private.CoreLib, Version=6.0.0.0, Culture=neutral, PublicKeyToken=7cec85d7bea7798e]].MoveNext()

问题原因及修复方案 #

核心问题 #

1. 枚举类型通过@attributes传递的类型转换问题：AnchorOrigin是MudBlazor的Origin枚举类型，当通过@attributes传递时，枚举值会被包装为object类型，Blazor无法自动将其转换为目标枚举类型，导致类型转换异常。
2. For参数类型不匹配：MudSelect的For属性要求是Expression<Func<T>>（用于表单验证），当前代码定义为Func<T>，类型不兼容。
3. 双向绑定不完整：仅定义了Value参数，缺少ValueChanged和ValueExpression，导致@bind-Value无法正常工作。
4. MudSelectItem硬编码类型：固定为T="int"，不符合泛型组件的通用性要求。

修正后的完整代码 #

DictMudSelectComponent.razor：

@typeparam T
@using MudBlazor

<MudSelect T="@T" 
           @bind-Value="@Value" 
           For="@For"
           AnchorOrigin="@AnchorOrigin"
           @attributes="AllOtherAttributes">
    @* 后续可根据TableName动态加载选项，此处保留示例 *@
    <MudSelectItem T="@T" Value="@((T)Convert.ChangeType(1, typeof(T)))">1</MudSelectItem>
    <MudSelectItem T="@T" Value="@((T)Convert.ChangeType(2, typeof(T)))">2</MudSelectItem>
    <MudSelectItem T="@T" Value="@((T)Convert.ChangeType(3, typeof(T)))">3</MudSelectItem>
</MudSelect>

@code {
    // 修正For参数类型，匹配MudSelect的要求
    [Parameter]
    public Expression<Func<T>> For { get; set; }

    // 实现完整的双向绑定
    private T _value;
    [Parameter]
    public T Value
    {
        get => _value;
        set
        {
            if (!EqualityComparer<T>.Default.Equals(_value, value))
            {
                _value = value;
                ValueChanged.InvokeAsync(value);
            }
        }
    }

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

    [Parameter]
    public Expression<Func<T>> ValueExpression { get; set; }

    [Parameter]
    public string TableName { get; set; } = "";

    // 显式声明AnchorOrigin参数，避免类型转换异常
    [Parameter]
    public Origin AnchorOrigin { get; set; } = Origin.BottomCenter;

    [Parameter(CaptureUnmatchedValues = true)]
    public Dictionary<string, object> AllOtherAttributes { get; set; } = new();
}

修复点说明 #

• 显式声明枚举参数：将AnchorOrigin从@attributes中剥离，直接声明为Origin类型参数，Blazor会正确处理枚举类型的参数传递，避免转换异常。
• 修正For参数类型：改为Expression<Func<T>>，与MudSelect的For属性类型一致，确保表单验证等功能正常。
• 完善双向绑定：添加ValueChanged和ValueExpression，满足Blazor双向绑定的标准要求，使@bind-Value能正确触发值变更。
• 泛化MudSelectItem：使用T="@T"替代硬编码的int，并通过Convert.ChangeType将示例值转换为泛型类型，保证组件通用性。

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