MudBlazor 下拉列表不默认为数据库中的值答案

【问题标题】：MudBlazor dropdown not defaulting to value from databaseMudBlazor 下拉列表不默认为数据库中的值
【发布时间】：2021-12-18 00:55:47
【问题描述】：

我正在使用带有 MudBlazor 的 Blazor，并且我在编辑页面上有以下表单：

<EditForm Model="BookRequestVM" OnInvalidSubmit="InvalidBookRequest" OnValidSubmit="@ValidBookRequest">
    ...
    <MudItem xs="12" sm="4">
        <MudSelect T="BookType" Label="Book Type" @bind-Value="@BookRequestVM.BookType" @bind-SelectedValues="hashBookTypes" Required="true">
            @foreach (var selectItem in BookTypes)
            {
                <MudSelectItem Value="@selectItem">@selectItem.TypeTitle</MudSelectItem>
            }
        </MudSelect>
    </MudItem>
</EditForm>

...

@code {
    public class BookType
    {
        public int BookTypeId { get; set; }
        public string TypeTitle { get; set; }
    }
    
    public HashSet<BookType> hashBookTypes = new HashSet<BookType>();
    
    ...

    protected override async Task OnInitializedAsync()
    {
        BookRequestVM = await _bookService.GetBookRequest(Id);  // Fetch info from database
        
        BookTypes = _bookService.GetBookTypes().ToList();    // Get all valid dropdown values
        
        hashBookTypes = new HashSet<BookType>(BookTypes);
    }
}

因为我正在提取现有数据（创建图书请求时需要此图书类型字段），所以总会有一个图书类型与此图书请求相关联。我看到 BookTypeVM 能够在服务调用中从数据库中提取 Book Type，并且在有效的提交方法上，它被绑定并正确保存。只是在加载时，它不会默认为保存到数据库中的值——只有下拉列表中的第一个值。关于这里发生了什么的任何想法？

【问题讨论】：

这是多选吗？如果不是，那你为什么要设置@bind-SelectedValues="hashBookTypes"。 hashBookTypes 来自BookTypes，这是所有书籍类型的列表。我不是 MudBlazor 方面的专家，但您似乎将所选值设置为完整的值列表。如果没有`MultiSelection="true"`，那么我猜它会将当前值设置为列表中的第一个值。
你需要在OnInitializedAsnyc方法中设置值后调用StateHasChanged()来指示DOM已经更新。
@MrCakaShaunCurtis 这确实是问题的原因。在我仔细查看代码之前，我根本不记得在我的末尾添加了该绑定属性，但删除它显示了正确的行为。
太好了，我添加了我的评论作为答案供您打勾。

标签： drop-down-menu blazor mudblazor

【解决方案1】：

这是多选吗？如果不是，那你为什么要设置@bind-SelectedValues="hashBookTypes"。 hashBookTypes 来自 BookTypes，它是所有书籍类型的列表。我不是 MudBlazor 方面的专家，但您似乎将所选值设置为完整的值列表。如果没有 MultiSelection="true"，我猜它会将当前值设置为列表中的第一个值。

【讨论】：

【解决方案2】：

@bind-SelectedValues="hashBookTypes" 是罪魁祸首。这用于多选。不幸的是，我不记得添加此代码，但删除此代码解决了此问题。

【讨论】：

【解决方案3】：

您的代码比 MrC 发现的问题更多。在不覆盖Equals() 和GetHashCode() 的情况下，在选择中使用 POCO 类时需要非常小心，因为选择在内部使用 HashSet 来找出选择了哪个项目。此外，如果您希望它将选定的 BookType 转换为字符串，则应覆盖 ToString()。

您的 BookType 类应如下所示：

    public class BookType
    {
        public string Title { get; set; }

        public override bool Equals(object other) {
            return (other as BookType)?.Title == Title;
        }

        public override int GetHashCode()
        {
            return this.Title.GetHashCode();
        }

        public override string ToString() => Title;
    }

这是与之配套的选择：

    <MudSelect T="BookType" Label="Book Type" @bind-Value="@RequestedBookType" Required="true">
        @foreach (var selectItem in BookTypes)
        {
            <MudSelectItem Value="@selectItem">@selectItem.Title</MudSelectItem>
        }
    </MudSelect>

这是一个小提琴，它演示了您的代码进行了上述更改以使其工作：https://try.mudblazor.com/snippet/mOwvPvbhHYHFBoiV

【讨论】：