MudBlazor 下拉菜单未默认为数据库中的值
MudBlazor dropdown not defaulting to value from database
我将 Blazor 与 MudBlazor 一起使用,我在编辑页面上有以下表单:
<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 能够在服务调用中从数据库中提取书籍类型,并且在有效的提交方法上,它被绑定并正确保存。只是在加载时,它不会默认为保存到数据库中的值——只有下拉列表中的第一个值。对这里发生的事情有什么想法吗?
@bind-SelectedValues="hashBookTypes"
是罪魁祸首。这用于多选。不幸的是,我不记得添加了这段代码,但删除它解决了这个问题。
这是多select吗?如果不是,那你为什么要设置@bind-SelectedValues="hashBookTypes"。 hashBookTypes 来自 BookTypes,它是所有书籍类型的列表。我不是 MudBlazor 方面的专家,但您似乎将 selected 值设置为完整的值列表。如果没有 MultiSelection="true"
那么我猜它会将当前值设置为列表中的第一个值。
您的代码比 MrC 发现的问题更多。您需要非常小心地在 select 中使用 POCO class 而不要覆盖 Equals()
和 GetHashCode()
因为 select 在内部使用 HashSet 来找出哪个项目已 selected。此外,如果您希望它将 selected BookType 转换为字符串,它应该覆盖 ToString()
.
您的 BookType class 应该如下所示:
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;
}
这里是 Select 与之配套的:
<MudSelect T="BookType" Label="Book Type" @bind-Value="@RequestedBookType" Required="true">
@foreach (var selectItem in BookTypes)
{
<MudSelectItem Value="@selectItem">@selectItem.Title</MudSelectItem>
}
</MudSelect>
这里有一个 fiddle 演示了您的代码经过上述更改以使其工作:https://try.mudblazor.com/snippet/mOwvPvbhHYHFBoiV
我将 Blazor 与 MudBlazor 一起使用,我在编辑页面上有以下表单:
<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 能够在服务调用中从数据库中提取书籍类型,并且在有效的提交方法上,它被绑定并正确保存。只是在加载时,它不会默认为保存到数据库中的值——只有下拉列表中的第一个值。对这里发生的事情有什么想法吗?
@bind-SelectedValues="hashBookTypes"
是罪魁祸首。这用于多选。不幸的是,我不记得添加了这段代码,但删除它解决了这个问题。
这是多select吗?如果不是,那你为什么要设置@bind-SelectedValues="hashBookTypes"。 hashBookTypes 来自 BookTypes,它是所有书籍类型的列表。我不是 MudBlazor 方面的专家,但您似乎将 selected 值设置为完整的值列表。如果没有 MultiSelection="true"
那么我猜它会将当前值设置为列表中的第一个值。
您的代码比 MrC 发现的问题更多。您需要非常小心地在 select 中使用 POCO class 而不要覆盖 Equals()
和 GetHashCode()
因为 select 在内部使用 HashSet 来找出哪个项目已 selected。此外,如果您希望它将 selected BookType 转换为字符串,它应该覆盖 ToString()
.
您的 BookType class 应该如下所示:
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;
}
这里是 Select 与之配套的:
<MudSelect T="BookType" Label="Book Type" @bind-Value="@RequestedBookType" Required="true">
@foreach (var selectItem in BookTypes)
{
<MudSelectItem Value="@selectItem">@selectItem.Title</MudSelectItem>
}
</MudSelect>
这里有一个 fiddle 演示了您的代码经过上述更改以使其工作:https://try.mudblazor.com/snippet/mOwvPvbhHYHFBoiV