在动态大小的“2D 数组布局”中选择 Html.DropDownListFor 中的值

Question

我有一个包含很多 select 元素的视图（以 @Html.DropDownList 或 @Html.DropDownListFor 的形式）。问题是它们以类似 table 的方式排列并且是双索引的（行数和列数根据数据而变化）。

只能使用单索引 properties/fields 绑定到 DropDownListFor 助手的选定值，我需要的属性数量各不相同，所以我想知道：

是否有 ASP.NET MVC 方法来获取控制器中的选定值？

也就是说，我现在会使用 jQuery 构建一些（也许 JSON）数据以手动发送到控制器。但首先我想知道是否还有其他我可以尝试的东西:)

示例项目：查看：

@model DropDownMatrixTest.Models.MatrixViewModel

@using (Html.BeginForm("Foo", "Home", FormMethod.Post))
{
  <table>
    <tbody>
      @for (int i = 0; i < 10; i++)
      {
        <tr>
          <td>@i-th row:</td>
          @for (int j = 0; j < 4; j++)
          {
            <td>
              @Html.DropDownListFor(m => m.SelectedValues[@i, @j],
                Model.Foos.Select(x => new SelectListItem
                {
                  Text = x.Text,
                  Value = x.Id.ToString()
                }))
            </td>
          }
        </tr>
      }
    </tbody>
  </table>
  <button type="submit">Submit</button>
}

视图模型：

public class MatrixViewModel
{
  public IEnumerable<Foo> Foos { get; set; }
  public int[,] SelectedValues { get; set; } // I know this wouldn't work
}

控制器方法：

public ActionResult Index()
{
  MatrixViewModel vm = new MatrixViewModel
  {
    Foos = Enumerable.Range(1, 10).Select(x => new Foo { Id = x, Text = "Foo " + x })
  };
  return View(vm);
}

[HttpPost]
public ActionResult Foo(MatrixViewModel vm)
{
  // Here is where I'd like to get the selected data in some form
  return View("Index", vm);
}

Answer 1

创建视图模型来代表您table/matrix结构

public class CellVM
{
  public int SelectedValue { get; set; }
}
public class RowVM
{
    public RowVM()
    {
        Columns = new List<CellVM>();
    }   
    public RowVM(int columns)
    {
        Columns = new List<CellVM>();
        for(int i = 0; i < columns; i++)
        {
            Columns.Add(new CellVM());
        }
    }
    public List<CellVM> Columns { get; set; }
}
public class MatrixVM
{
    public MatrixVM()
    {
        Rows = new List<RowVM>();
    }
    public MatrixVM(int columns, int rows)
    {
        Rows = new List<RowVM>();
        for(int i = 0; i < rows; i++)
        {
            Rows.Add(new RowVM(columns));
        }
        // initialize collection with the required number of rows
    }
    public List<RowVM> Rows { get; set; }
    public IEnumerable<SelectListItem> Foos { get; set; }
}

在 GET 方法中，初始化 MatrixVM 的新实例并填充 SelectList

MatrixVM model = new MatrixVM(4, 4)
{
  Foos = Enumerable.Range(1, 10).Select(x => new SelectListItem(){ Value = x.ToString(), Text = "Foo " + x })
};
return View(model);

并在视图中

@model MatrixVM
@using (Html.BeginForm())
{
  <table>
    <tbody>
      @for(int r = 0; r < Model.Rows.Count; r++)
      {
        <tr>
          @for(int c = 0; c < Model.Rows[r].Columns.Count; c++)
          {
            <td>
              @Html.DropDownListFor(m => m.Rows[r].Columns[c].SelectedValue, Model.Foos)
            </td>
          }
        </tr>
      }
    <tbody>
  </table>
  <input type="submit" />
}

旁注：该示例在控制器中创建了一个 SelectList，它非常高效且适合创建视图，但如果您编辑现有值，则需要生成一个新的 SelectList并在每次迭代中设置 Selected 属性由于在循环

中使用时 DropDownListFor() 的限制

在动态大小的“2D 数组布局”中选择 Html.DropDownListFor 中的值

Selected values in Html.DropDownListFor in a dynamically-sized "2D array layout"

c#

asp.net-mvc

model-binding

asp.net-mvc-helpers