如何在asp.net mvc中重复表单控件并将它们作为列表传递给控制器

我在视图窗体中有3个控件（一个文本框，一个数字框和一个日期），这三个控件构成了Model对象。 有链接提供给用户，点击此链接所有3个控件在表单内重复5次。

我在控制器操作方法中有一个Model类列表作为参数类型。 如何克隆表单内容5次，以便它正确序列化到List？

Answer 1

一种更简单的方法。

型号：

 public class MyModel { public IList FormSet { get; set; } } public class OneSetOfElements { public string Name { get; set; } public int Age { get; set; } [DataType(DataType.Date)] public DateTime Dob { get; set; } } 

行动：

 public ActionResult MyAction(MyModel model) { foreach (var set in model.FormSet) { //read your data. } } 

查看：单击时显示ID“showMeOnUrlClick”

  @using (Html.BeginForm()) { //This would bind as first list element 
 @Html.EditorFor(m => m.FormSet[1].Name) @Html.EditorFor(m => m.FormSet[1].Age) @Html.EditorFor(m => m.FormSet[1].Dob, new { type = "date" }) 
 //Remaining list element 
 @for (int i = 1; i <= 6; i++) { @Html.EditorFor(m => m.FormSet[i].Name) @Html.EditorFor(m => m.FormSet[i].Age) @Html.EditorFor(m => m.FormSet[i].Dob, new {type = "date"}) } 
 Show } 

Answer 2

当用户单击“添加”按钮时，您应该使用jQuery动态创建包含所有3个输入字段的行。

因此，在您的剃刀视图（例如：创建）中，使用三个表单字段创建第一行。

 @using (Html.BeginForm()) { Add 
 
 Name  Age  CreateDate 
 
  } 

现在我们将添加一些客户端代码来监听Add链接上的click事件，创建容器div的克隆（使用css class itemRow ）并将其附加到外部容器div（带有id items ）。 当用户单击提交按钮时，我们将读取表单字段并构建一个对象数组，并使用jQuery ajax将其发布到服务器。

 @section Scripts {  } 

现在您需要一个HttpPost操作方法来处理表单发布。

 [HttpPost] public ActionResult Create(IEnumerable model) { foreach(var item in model) { // to do :Save } return Json( new { status ="success"}); } 

并且您的CreateUser视图模型将如下所示

 public class CreateUser { public string Name { set;get;} public int Age { set; get; } public DateTime CreateDate { set; get; } }