如何在动态生成的表中绑定下拉列表中的选定值？ ASP.NET 核心MVC

Question

赏金将在 7 天后到期。 此问题的答案有资格获得+100声望赏金。 user1179071想引起更多关注这个问题：

答案表示赞赏。 谢谢

在我的 ASP.NET Core MVC 项目中，有一个包含两列下拉列表的表，用户应该在其中选择费率值，然后单击保存以更新表中每一行的值。 总共有几十个动态生成的行，这导致具有要跟踪值的下拉列表的数量增加了一倍。

同样，目标是使用在该行的两个下拉列表中选择的值更新每一行。

我能够创建表格并显示值。 有一个循环生成表中的每一行。 我遇到的问题是不知道如何将所有下拉列表中的所有值连同行号一起传递回 controller，因此我可以编写逻辑来更新数据库中的值。 我可以从第一行传递一个下拉组合，但我不知道如何对所有这些做同样的事情或指出它们来自哪一行。 下拉列表处于循环中的事实使这变得困难。

这是我显示表格的视图部分：

      <tbody>
      @foreach (var item in Model.WorksheetRates)
      {
      var recordNumber = PagedContext.Page * PagedContext.PageSize + Model.WorksheetRates.IndexOf(item) + 1;
      <tr>
           <td>@recordNumber</td>
           <td>
               @item.Program
           </td>
           <td>
               @item.Area
           </td>
            <td>
                @Html.DropDownListFor(x => x.GARateID, gaRatesList, new { @style = "width:280px;" })
            </td>
             <td>
                 @Html.DropDownListFor(x => x.OverheadRateID, overheadRatesList, new { @style = "width:280px;" })
             </td>
         </tr>
      }
                        </tbody>

这是 model：

public class BudgetPrepViewModel
{
    public List<WorksheetRate> WorksheetRates { get; set; }

    public int GARateID { get; set; }
    public int OverheadRateID { get; set; }

    public IEnumerable<SelectListItem> GARateList { get; set; }
    public IEnumerable<SelectListItem> OverheadRateList { get; set; }
}

如您所见，我添加了IEnumerable<SelectListItem> object，因为我认为它们需要在 controller 中使用和迭代。 这是一个猜测，我不知道如何绑定它们。 重要的是我将它们与正确的行相关联。

这是我在 header 的 controller 中提出的，里面的实际代码与问题无关：

[HttpPost, ActionName("SelectRates")]
public IActionResult SelectRates([Bind("GARateID, OverheadRateID")] BudgetPrepViewModel data)
{
        BPViewModel model = new BPViewModel
        {
            MonthNameList = MonthSelectList(),
            PrepStep = 8
        };

       return View("Index", model);
}

任何帮助，将不胜感激。 如果有不清楚的地方请告诉我，我已尽力描述这个问题。 谢谢！

Answer 1

首先，我假设WorksheetRate具有GARateID和OverheadRateID作为属性，因为它们位于同一表行内。 其次，我向WorksheetRate添加了一个属性Id ，以便在提交表单时可以识别所选选项。 也就是说，现在的课程是这样的：

public class WorksheetRate
{
    public int Id { get; set; }
    public string Program { get; set; }
    public string Area { get; set; }
    public int GARateID { get; set; }
    public int OverheadRateID { get; set; }
}
public class BudgetPrepViewModel
{
    public List<WorksheetRate> WorksheetRates { get; set; }

    public IEnumerable<SelectListItem> GARateList { get; set; }
    public IEnumerable<SelectListItem> OverheadRateList { get; set; }
}

这里的关键方面是选择和输入的名称必须遵循一个模式，以便 ASP.NET 将其绑定到 model。 对于这种情况，要将值绑定到BudgetPrepViewModel.WorksheetRates中的属性GARateID ，选择和输入的名称必须是：

• 选择：
  • <select name="WorksheetRates[0].GARateID">
  • <select name="WorksheetRates[1].GARateID">
• 输入
  • <input hidden name="WorksheetRates[0].Id" />
  • <input hidden name="WorksheetRates[1].Id" />

因此，解决方案是：

@for (var i=0; i<Model.WorksheetRates.Count(); i++)
{
    <tr>
        <td>
            @Model.WorksheetRates[i].Id
            <input hidden asp-for="WorksheetRates[i].Id" /> 
        </td>
        <td>
            @Model.WorksheetRates[i].Program
        </td>
        <td>
            @Model.WorksheetRates[i].Area
        </td>
        <td>
            @Html.DropDownListFor(x => x.WorksheetRates[i].GARateID, Model.GARateList, new { @style = "width:280px;" })
        </td>
        <td>
            @Html.DropDownListFor(x => x.WorksheetRates[i].OverheadRateID, Model.OverheadRateList, new { @style = "width:280px;" })
        </td>
    </tr>
}

我创建了一个包含完整工作解决方案的存储库。