从MVC </model>中的表单发布列表<model>

时间:2014-03-18 19:34:52

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

我需要能够发回一个未知数量的这个模型类:

public class UserRegisterModel
{
    public string UserName { get; set; }

    public string Password { get; set; }

    public string ConfirmPassword { get; set; }

    public string RepName { get; set; }

    public string ContactNumber { get; set; }
}

List<UserRegisterModel>到控制器。

我需要我的视图才能有一个可以将模型的多个实例发送回控制器的表单,例如,如果我的用户想要添加3个Reps,他可以进行3次重复并为他们提供每个细节,用户名和密码,并在列表中立即将它们全部发回。

我的观点代码有这个起点:

@model List<PicsWebApp.Models.UserRegisterModel>

@{
    ViewBag.Title = "NewRep";
}

<h2>NewRep</h2>

@using (Html.BeginForm("NewRep", "Admin", FormMethod.Post, new { id = "fieldform", @class = "form" }))
{
}

有人能告诉我正确的方法吗?我知道如果用户点击“添加新代表”,我需要javascript来动态添加更多表单元素,所以这主要是关于C#。

1 个答案:

答案 0 :(得分:2)

你需要确保属性&#39; ID符合标准集(当我这样做时,我使用了Felipe的评论链接)。我之前做过这个,当用户单击按钮时会添加一个表行。我发现最好的方法是在页面呈现之前添加一个条目,然后为此获取HTML,并在jquery中使用它。

这是我使用的功能:

$("#nameAdd").click(function (e) {
   var index = $("#nameTable tr").length - 1;
   e.preventDefault();
   var newItem = $("<tr> \
                  <td> \
                    <span id='Names_" + index + "__FullName' /> \
                  </td> \
                  <td> \
                    <input class='table-editor-small update-name' id='Names_" + index + "__FirstName' name='Names[" + index + "].FirstName' type='text' value='' /> \
                  </td> \
                  <td> \
                    <input class='table-editor-small update-name' id='Names_" + index + "__MiddleName' name='Names[" + index + "].MiddleName' type='text' value='' /> \
                  </td> \
                  <td> \
                    <input class='table-editor-small update-name' data-val='true' data-val-required='Person Last Name Required' id='Names_" + index + "__LastName' name='Names[" + index + "].LastName' type='text' value='' /> \
                  </td> \
                  <td class='center'> \
                    <input data-group='nameRadios' id='Names_" + index + "__IsPrimary' name='Names[" + index + "].IsPrimary' type='radio' value='True' /> \
                  </td> \
                  <td class='center'> \
                    <input data-val='true' data-val-required='The Delete? field is required.' id='Names_" + index + "__ToDelete' name='Names[" + index + "].ToDelete' type='checkbox' value='true' /> \
                    <input name='Names[" + index + "].ToDelete' type='hidden' value='false' /> \
                  </td> \
                </tr>");
    $("#nameTable").append(newItem);
}

再次,要添加的HTML是直接来自视图呈现的项目,我只是交换了index