MudBlazor MudSelectExtended绑定复杂对象无法设置选中项求助

核心原因 #

MudSelectExtended默认通过对象引用相等判断选中项，编辑场景下，已存储的QuestionDto对象大概率和ItemCollection（_questions）中的对象不是同一个引用，导致组件无法识别已选项。

解决方案 #

1. 重写复杂类型的相等判断逻辑

在QuestionDto类中重写Equals和GetHashCode方法，让组件通过唯一标识（比如Id）判断对象相等，而非引用：

public class QuestionDto
{
    public int Id { get; set; }
    public string Text { get; set; }
    public QuestionType QuestionType { get; set; }

    public override bool Equals(object obj)
    {
        if (obj is not QuestionDto other) return false;
        return Id == other.Id;
    }

    public override int GetHashCode()
    {
        return Id.GetHashCode();
    }
}

2. 匹配绑定模式与属性类型

• 单选场景：关闭MultiSelection，使用@bind-Value绑定单个QuestionDto对象：

  <EditTemplate>
      <MudSelectExtended T="QuestionDto"
                         Label="Question"
                         Variant="Variant.Text"
                         @bind-Value="FormSectionQuestionsContext.Item.Question"
                         MultiSelection="false"
                         ItemCollection="_questions"
                         SearchBox="true"
                         SearchBoxAutoFocus="true"
                         SearchFunc="@(new Func<QuestionDto, string, bool>(SearchQuestions))"
                         NoWrap="true"
                         ValuePresenter="ValuePresenter.ItemContent">
          <ItemTemplate Context="fsqc2">
              <MudStack Class="mud-width-full" Justify="Justify.SpaceBetween">
                  <MudStack Row="true" Spacing="1">
                      <MudIcon Size="Size.Small"
                               Icon="@GridService.GetQuestionTypeStatusIcon(fsqc2!.Value!.QuestionType)"
                               Color="@GridService.GetQuestionTypeBadgeColor(fsqc2!.Value!.QuestionType)" />
                      <MudText>@($"{fsqc2.Value.Id} {fsqc2.Value.Text}")</MudText>
                  </MudStack>
              </MudStack>
          </ItemTemplate>
      </MudSelectExtended> 
  </EditTemplate>
  

• 多选场景：开启MultiSelection，使用@bind-SelectedValues绑定List<QuestionDto>类型的集合：

  <EditTemplate>
      <MudSelectExtended T="QuestionDto"
                         Label="Question"
                         Variant="Variant.Text"
                         @bind-SelectedValues="FormSectionQuestionsContext.Item.Questions"
                         MultiSelection="true"
                         ItemCollection="_questions"
                         SearchBox="true"
                         SearchBoxAutoFocus="true"
                         SearchFunc="@(new Func<QuestionDto, string, bool>(SearchQuestions))"
                         ChipCloseable="true"
                         ChipSize="Size.Small"
                         ChipVariant="Variant.Outlined"
                         NoWrap="true"
                         ValuePresenter="ValuePresenter.ItemContent">
          <ItemTemplate Context="fsqc2">
              <MudStack Class="mud-width-full" Justify="Justify.SpaceBetween">
                  <MudStack Row="true" Spacing="1">
                      <MudIcon Size="Size.Small"
                               Icon="@GridService.GetQuestionTypeStatusIcon(fsqc2!.Value!.QuestionType)"
                               Color="@GridService.GetQuestionTypeBadgeColor(fsqc2!.Value!.QuestionType)" />
                      <MudText>@($"{fsqc2.Value.Id} {fsqc2.Value.Text}")</MudText>
                  </MudStack>
              </MudStack>
          </ItemTemplate>
      </MudSelectExtended> 
  </EditTemplate>
  

3. 确保已选对象存在于选项集合中

检查_questions集合是否包含编辑时的已选对象（通过Id匹配），若未包含，需在加载数据时将已选对象加入选项集合，或确保选项集合覆盖所有可能的可选值。

4. 尝试升级组件版本

当前使用的CodeBeam.MudBlazor.Extensions v8.0.0可能存在已知绑定问题，升级到最新稳定版本可尝试修复此类兼容性问题。

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