MudBrazor选择带有数据库值的多选

Question

我的目标是拥有一个多选下拉列表，用于管理Pieces和Parts之间的1对多关系。Pieces和Parts的表中有"int ID"one_answers"string Name"。还有一个名为PieceParts的联接表，它具有"int pieceId"one_answers"int partId"。

我正在想象以下所有需要发生的过程。

1. 使用PartsService中的所有零件填充选择
2. 所选零件是PieceParts表中的零件，其中pieceId=所选零件的Id
3. 如果选中了一个新零件，则添加一个新的PiecePart，其中包含所选零件的pieceID和选中零件的partID
4. 如果某个零件未选中，则删除具有选定零件的pieceID和未选中零件的partID的PiecePart

我只是不确定如何实现这一切。我在Select下拉列表中填充了所有Part，但我不确定应该为@bind value和@bind SelectedValues设置什么值。然后，我不知道如何为选中或未选中的操作运行Add或Delete方法。我正试图使用此链接使其工作。

https://mudblazor.com/components/select#multiselect

以下是我迄今为止的代码。非常感谢您的帮助！

@page "/piece"
@page "/piece/{id:int}"
@inject IPieceService PieceService
@inject IPartService PartService
<MudSelect T="Part" Label="Parts" MultiSelection="true" @bind-Value="partsValue" @bind-SelectedValues="partsOptions">
@foreach (var part in PartService.Parts)
{
<MudSelectItem T="Part" Value="@part">@part.Name</MudSelectItem>
}
</MudSelect>
@code {
private string partsValue { get; set; } = "Nothing selected";
private IEnumerable<Part> partsOptions { get; set; } = new HashSet<Part>();
protected override async Task OnInitializedAsync()
{
await PartService.GetParts();
}
}

谢谢！

--编辑3/27/22--事实上，我完成了以下工作。正如我所希望的那样，它正在从DB中获取值，但我不确定如何让它选择已经与工件相关联的值。

关联的部分通过Piece api调用进行查询，这里有一个数据示例。

{
"data": {
"id": 1,
"title": "Piece 1",
"parts": [
{
"id": 1,
"name": "Tenor",
},
{
"id": 3,
"name": "Clarinet",
}
]
},
"success": true,
"message": ""
}
<MudSelect T="Part" Label="Part(s)" MultiSelection="true" @bind-Value="partValue" @bind-SelectedValues="partSelectedValues">
@foreach (var part in PartService.Parts)
{
<MudSelectItem T="Part" Value="@part">@part.Name</MudSelectItem>
}
</MudSelect>
private Part partValue { get; set; } = new Part();
private IEnumerable<Part> partSelectedValues { get; set; } = new HashSet<Part>();

你有什么想法吗？谢谢

Answer 1

1-MudSelect当前不支持服务器端数据。检查我在这里写的答案，用这种方式加载数据(如果你有大的数据集(。

2-为下一级别的数据重新渲染MudSelect。

示例：在页面初始化时显示第一级数据，用户选择一些数据后，从服务器获取数据并渲染第二个MudSelect。

如果要在父级处理数据更改，只需重新渲染子级MudSelect即可。我建议您根据MudSelect创建剃刀组件，以实现干净的代码结果。