如何在 Blazor 中的同一页面上添加多个下拉列表

Question

我正在尝试在单个页面中多次插入相同的下拉列表。

我有一个物品X

我有一个 ProcessAreas 列表（a、b、c、d、e）

我有一份说明列表（1,2,3,4,5,6）

我需要创建一个表单来将每个 ProcessArea 的单个指令与 X 项关联（不是强制性的）

例如，对于项目 X1，我想将其保存到我的数据库中

(a,1),(b,3),(e,6)

表示对于项目X1，我有a区的说明1、b区的说明3和e区的说明6。其他区域没用过。

为此，我阅读了之前插入数据库的所有指令。

我在 ProcessAreas 上执行 foreach 并创建一个下拉列表。在此下拉列表中，我放置了可用说明的列表，如下所示

@foreach (var processArea in _availableProcessAreas)
{
    var label = "Select instructions for " + processArea.ProcessAreaName;
    var x = _model.ProcessAreaInstructions.FirstOrDefault(x => x.ProcessAreaId == processArea.ProcessAreaId)?.InstructionId;

    <MudSelect T="int?" Label=@label id="@processArea.ProcessAreaId" @bind-Value="x" For="@(() => x)">
        @foreach (var instruction in _instructions)
        {
            <MudSelectItem T="int?" Value="@instruction.Id">(@instruction.Name) @instruction.Description</MudSelectItem>
        }
    </MudSelect>
} 

我可以在页面上看到下拉菜单，但无法选择与显示值不同的值。

在这里您可以找到具有这种奇怪行为的完整示例

https://try.mudblazor.com/snippet/QYGxuWFEflpORBVt

你能帮我解决这个问题并将更新的数据保存到数据库吗？

预先感谢您的帮助。

Answer 1

通过查找您在 MudBlazor Playground 中添加的代码，我意识到您尝试将 MudSelect 的值绑定到本地

int t = 0

razor 变量。

所以我在你的

ProcessAreaInstructionResponse

中添加了一个字段，来存储MudSelect的值。

    public class ProcessAreaInstructionResponse
    {
        public Int64 Id { get; set; }
        public string Name { get; set; }
        public int BindedValue { get; set; } = 1; // new field
    }

/////

<MudSelect T="int" [email protected] id="@item.Id" @bind-Value="item.BindedValue">
   @foreach (var instruction in _instructions)
   {
      <MudSelectItem T="int" Value="@instruction.Id">@instruction.Description</MudSelectItem>
   }
</MudSelect>

现在它正在工作:)