ASP.NET MVC4动态表单生成

时间:2013-07-03 14:29:32

标签: c# asp.net-mvc-4 razor

我是ASP.NET MVC的新手,需要一些帮助。我需要创建一个动态创建表单的表单。例如,让我说我有一个名为Person的模型。该人有名字和姓氏。在表单中,我希望允许用户输入此人的姓名。我知道如何做到这一点,但我不知道该怎么做是允许用户添加多个人并将其作为单个表单提交。

在页面(视图)的初始加载时,它默认显示两个空文本框(对于名字和姓氏)。我还有一个添加按钮,允许用户在表单中添加另一行,并为第二个人显示相同的2个文本框。现在,如果用户提交它,它将有2个文本框用于第一个名称,2个用于姓氏。

我不知道是否有办法在没有回复的情况下做到这一点。或者回复我唯一的选择?

编辑:忘记提及我正在使用Razor引擎。

由于

3 个答案:

答案 0 :(得分:3)

不需要多个POST。您希望表单向您的操作发送数组。行动将类似于

[HttpPost]
public ActionResult AddPeople(Person[] people){ ... }

要实现这一点,您必须枚举视图中的输入字段。必须将它们编入索引,从0开始并相应地递增,如:

@using(Html.BeginForm("AddPeople","TheController", FormMethod.Post))
{
  <input type="text" name="people[0].FirstName" />
  <input type="text" name="people[0].LastName" />
  ...
  <input type="text" name="people[1].FirstName" />
  <input type="text" name="people[1].LastName" />
  ...
  <input type="text" name="people[n].FirstName" />
  <input type="text" name="people[n].LastName" />
}

您必须使用javascript添加新字段,并使用简单的DOM操作。请记住按顺序保留索引。

答案 1 :(得分:3)

史蒂文桑德森在他的博客中有一篇非常好的关于这个问题的文章...当你在中间删除一个时,它不依赖于每个人的数字索引来避免“漏洞”。

请参阅此处的文章:http://blog.stevensanderson.com/2010/01/28/editing-a-variable-length-list-aspnet-mvc-2-style/

然后,您需要验证: http://blog.stevensanderson.com/2010/01/28/validating-a-variable-length-list-aspnet-mvc-2-style/

我在MVC 3和4中使用这个代码......它就像一个魅力。

答案 2 :(得分:1)

Phil Haack wrote an article关于你想做什么。要使它具有动态性(意味着它们可以列出1到多个人),您必须通过将单击事件附加到添加按钮来复制输入字段的新行来进行一些JavaScript操作。我首先建议首先阅读该文章,了解如何构建输入字段,以便在回发时填充列表。