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

Question

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

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

我能够创建表格并显示值。有一个循环生成表中的每一行。我遇到的问题是不知道如何将所有下拉列表中的所有值与行号一起传递回控制器，以便我可以编写逻辑来更新数据库中的值。我可以从第一行传递一个下拉组合，但我不知道如何对所有这些组合执行相同的操作或指示它们来自哪一行。事实上，下拉列表是循环的，这使得这变得很困难。

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

      <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>

这是模型：

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>对象，因为我认为它们需要在控制器中使用和迭代。这是一个猜测，我不知道如何绑定它们。将它们与正确的行关联起来很重要。

这是我在标题控制器中提出的内容，里面的实际代码与问题无关：

[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 将其绑定到模型。对于这种情况，要将值绑定到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>
}

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