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

Question

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

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

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

这是我显示 table:

的视图部分

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

这是我在header的控制器中想出的，里面的实际代码与问题无关：

[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 作为属性，因为它们位于同一 table 行内。其次，我在 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>
}

我已经创建了一个 repository 完整的工作解决方案。

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

How to bind selected values from dropdownlists in a dynamically generated table? ASP.NET Core MVC

c#

binding

asp.net-core-mvc

html.dropdownlistfor