如何从项目列表中生成多个表单？

Question

在 MVC 应用程序中，我有一个试题列表，我想在同一页面上向用户展示其中的一小部分，但每个答案都可以单独提交。 所以我的页面看起来像这样......

查看代码是....

    @model List<QuestionResponseVM>
    @for (int i = 0; i < Model.Count(); i++)
    {
      using (Html.BeginForm("CheckQuestions", "Checks", FormMethod.Post, new {questResponses = Model[i] }))
      {
        @Html.AntiForgeryToken()
        @Html.HiddenFor(model => model[i].QuestionID)
        <tr>
          <td width="35%">
            @Html.Raw(Model[i].QuestionText)
            @Html.HiddenFor(model => model[i].QuestionText)
          </td>
          <td>
            @Html.TextAreaFor(model => model[i].Response, new { @name = "DisplayTextEdit", @id = "DisplayTextEdit", @rows = 1, @cols = 80 })
          </td>
          <td width="30%">
            <div class="form-group">
              <div class="col-md-offset-2 col-md-10">
                <input type="submit" value="Save" class="btn btn-primary" />
              </div>
            </div>

          </td>
        </tr>
      }
    }

我的问题是我只能将数据返回到问题 1 的 POST 方法。
这是控制器代码....

  public class ChecksController : Controller  
  {  
  
    public ActionResult CheckQuestions()
    {
      return View(LoadQuestions());
    }
  
    // POST: Checks
    [HttpPost]
    [ValidateAntiForgeryToken]
    public ActionResult CheckQuestions(List<QuestionResponseVM> questResponses)
    {
      List<QuestionResponseVM> testList = new List<QuestionResponseVM>();
  
      if (ModelState.IsValid)
      {
        testList = LoadQuestions(questResponses[0].QuestionID, questResponses[0].Response);
      }
  
      return View(testList);
  
    }
  
    private List<QuestionResponseVM> LoadQuestions (int _QuestionID = -1, string _Response = "")
    {
      List<QuestionResponseVM> thisList = new List<QuestionResponseVM>();
  
      thisList.Add(new QuestionResponseVM()
      {
        QuestionID = 1,
        QuestionText = "Question 1",
        Response = (_QuestionID == 1 ? _Response : "")
      });
      thisList.Add(new QuestionResponseVM()
      {
        QuestionID = 2,
        QuestionText = "Question 2",
        Response = (_QuestionID == 2 ? _Response : "")
      });
      thisList.Add(new QuestionResponseVM()
      {
        QuestionID = 3,
        QuestionText = "Question 3",
        Response = (_QuestionID == 3 ? _Response : "")
      });
  
      return thisList;
    }
  }

1. 如果控制器 POST 方法有一个 QuestionResponseVM questResponses 参数，这是我所期待（希望）的，那么无论单击哪个“保存”按钮，视图都会返回 null。 p>

2. 但是，如果我将参数更改为列表（即 List questResponses），则问题 1 的“保存”按钮会返回一个包含单个项目和正确数据的列表。但是，任何其他“保存”按钮（例如问题 2 或问题 3）都会返回一个空列表。

场景 1. 的行为对我来说似乎违反直觉，因为“开始表单”设置为返回单个模型项（模型的实例），即“模型 [i]”。
在场景 2 中，我只是不明白为什么它适用于第一个表单（“保存”按钮）但不适用于其他表单。

我认为我不需要使用 JScript 或 AJAX 来执行此操作。

但很明显，我不是在这里“连接一些点”。
有人可以解释一下我观察到的行为，或许可以推动我朝着正确的方向前进以满足这一要求。

如果有任何帮助，我将不胜感激。

Answer 1

在回答您的问题之前，我不明白 new {questResponses = Model[i] })) 在您的表单中做了什么：

using (Html.BeginForm("CheckQuestions", "Checks", FormMethod.Post, new {questResponses = Model[i] }))
{
    ...
}

Model[i] 是一个复杂对象。你得到的只是对象的名称：

Q1：如果 Controller POST 方法只有一个参数

由于您使用 for 循环来生成每个表单和表单中的输入，这些输入的名称将采用 [INDEX].NAME 的形式：

默认情况下，模型绑定会将这些输入（QuestionId、QuestionText 和 Response）绑定到匹配的对象。 QuestionResponseViewModel 确实匹配。问题是[INDEX]. 前缀。

为了使默认模型绑定起作用，您在 POST 方法中声明的参数名称必须称为 [INDEX]，即，[0] 用于第一种形式，[1] 用于第二种形式，依此类推：

[HttpPost]
[ValidateAntiForgeryToken]
public ActionResult CheckQuestions(QuestionResponseVM [0])
{
    ...
}

但你知道我们不能在 C# 中声明类似的东西。

第一季度的修复

您可以使用foreach 来生成每个表单，而不是使用常规的for 循环。这样一来，您就无需为每个表单命名一个正在更改的参数。

这里的另一个“GOTYOU”是控制器中的参数必须与您在for循环中为每个QuestionResponseViewModel声明的变量匹配：

@foreach (var qrVM in Model)
{
    using(Html.BeginForm("..."))
    {
        @Html.AntiForgeryToken()
        @Html.HiddenFor(x => qrVM.QuestionId)

        <tr>
            <td>
                @Html.DisplayFor(x => qrVM.QuestionId)
                @Html.HiddenFor(x => qrVM.QuestionId)
            </td>
            ...
        </tr>
    }
}

[HttpPost]
[ValidateAntiForgeryToken]
public ActionResult CheckQuestions(QuestionResponseVM qrVM)
{
    // If you name the parameter something else, it won't bind!
    ...
}

如果您考虑一下，这是有道理的，因为您知道表单会将带有 qrVM.QuestionId、qrVM.QuestionText 等键的数据发送回服务器。默认模型绑定将搜索具有这些属性并命名为 qrVM 的模型。

Q2：将参数更改为列表

当第一个表单回传到服务器时，请求正文中的表单数据将如下所示：

[0].RequestionId: 1
[0].RequestionText: Question 1
[0].Response: xxx

MVC 模型绑定仍然足够聪明，并认为您正在发布您声明的列表的第一项。因此，您将看到 List<QuestionResponseVM> questResponses 捕获第一个表单的正确数据。

那么第二种和第三种形式呢？例如，如果您在第二个表单上提交数据，请求正文中的表单数据将如下所示：

[1].RequestionId: 2
[1].RequestionText: Question 2
[1].Response: xxx

MVC 模型绑定将其视为列表的第 2 项，但第 1 项在哪里？而且它很困惑，因此无法将数据绑定到参数。因此，您将在参数List<QuestionResponseVM> questResponses 中看到 NULL。

我的 2 美分

1. 您实际上不能像这样将表格放在表格内或表格行之间。它被认为是无效的 HTML 结构。无论如何，使用表格作为结构来在页面上显示数据从来都不是一个好主意。相反，您可以使用 Bootstrap 的行和列。

2. 我不知道为什么或者是什么让你认为你不应该需要 AJAX。您的案例就像使用 AJAX 方法的最佳方案！例如，使用 AJAX，用户可以单独保存每个问题的响应。页面不必刷新。

Answer 2

您在问题 1 上的保存按钮正在将表单提交给控制器。您将需要在一组问题的末尾有一个保存/提交按钮并使用 FormCollection 对象，或者花时间为每个按钮上的单击事件设置 JQuery/Ajax 并删除表单元素。如果底部的按钮变成“下一步”，然后提交给控制器以获取下一组相关问题，则您可以两者兼得。