添加一个 javascript 数组到 Asp.Net MVC 表单的提交（替换模型列表）

Question

假设我有以下情况：

我有一个问题表单，我想向其中添加答案选项（应该允许我的用户添加任意数量的选项）。

所以我有这个 ViewModel（被发送到视图）。

public class QuestionEdit
{
    public int Id { get; set; }

    [Required]
    [StringLength(200)]
    public string Question { get; set; }

    public List<Choice> Choices { get; set; }
}

public class Choice
{
    public int Id { get; set; }

    [Required]
    [StringLength(200)]
    public string Choice { get; set; }

    public bool Correct {get; set;^}
}

我的控制器的编辑 Post 看起来像这样：

    [HttpPost]
    [ValidateAntiForgeryToken]
    public ActionResult Edit([Bind(Include = "Id,Question,Choices")] QuestionEdit vm)
    {
        if (ModelState.IsValid)
        {
            /*Removed for clarity*/
        }

        return View(vm)
    }

有什么方法可以让我从 Choices 获取内容并将其转换为 javascript 列表，当我的用户仅通过使用 javascript/ajax 来添加或删除项目时更改它提交表单时，是否可以将其添加回去，就好像它是我的控制器能够读取的 Choices 一样？

我知道我可以为此列表使用自定义 EditorFor，但每次有人添加新的 Choice 时，我都必须 post 整个表单才能添加它，然后他们会取回它，所以我只想通过 javascript 更改它，因为它只需要简单的验证（不需要任何 server/database 验证）。

非常感谢。

Answer 1

您可以根据需要使用任意多的 JavaScript 和 ajax，只要您的表单中的输入以模型绑定器期望的方式命名即可。

我的意思是，您可以创建具有以下形式的名称属性的表单输入：

<input type="text" name="Choices[0].Id" />
<input type="text" name="Choices[0].Choice" />
<input type="hidden" name="Choices[0].Correct" />
<input type="text" name="Choices[1].Id" />
<input type="text" name="Choices[1].Choice" />
<input type="hidden" name="Choices[1].Correct" />

等等。当您 post 您的表单时，模型联编程序将尝试获取附加的任何值，并根据名称将它们设置在您的 QuestionEdit 对象上。因此在上述情况下，您的操作方法中的 vm.Choices 将包含 2 个项目。

这个 link 给出了一些很好的例子，可以为您指明正确的方向：

http://www.codeproject.com/Articles/551576/ASP-NET-MVC-Model-Binding-and-Data-Annotation

从那里开始，由您 JavaScript 相应地创建输入元素并将它们附加到您的表单。

希望对您有所帮助。

添加一个 javascript 数组到 Asp.Net MVC 表单的提交（替换模型列表）

Add a javascript array to Asp.Net MVC form's submit (replacing model List)

c#

asp.net

asp.net-mvc

asp.net-mvc-5