MudBlazor 下拉列表不默认为数据库中的值
Posted
技术标签:
【中文标题】MudBlazor 下拉列表不默认为数据库中的值【英文标题】:MudBlazor dropdown not defaulting to value from database 【发布时间】: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 这确实是问题的原因。在我仔细查看代码之前,我根本不记得在我的末尾添加了该绑定属性,但删除它显示了正确的行为。
太好了,我添加了我的评论作为答案供您打勾。
【参考方案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
【讨论】:
以上是关于MudBlazor 下拉列表不默认为数据库中的值的主要内容,如果未能解决你的问题,请参考以下文章