c# - 将 javascript 数组添加到 Asp.Net MVC 表单的提交(替换模型列表)

Question

假设我有以下情况:

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

所以我有这个 ViewModel(被发送到 View )。

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;^}
}

我的 Controller 的编辑帖子看起来像这样:

    [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 添加或删除项目时更改它，并在提交表单时，这是否是我将其添加回来的一种方式，就好像它是我的 Controller 能够读取的 Choices 一样？

我知道我可以为这个列表使用自定义的 EditorFor，但是每次有人添加一个新的 Choice 时，我都必须发布整个表单来添加它，然后他们会取回它，所以我只想通过javascript，因为它只需要简单的验证(不需要任何服务器/数据库验证)。

非常感谢。

Answer 1

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

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

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

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

此链接提供了一些很好的示例，可以为您指明正确的方向:

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

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

希望这对您有所帮助。