如何在模型中的行集列表中添加行？

Question

为了简单起见,假设我有一个User具有List<Email>其属性之一的模型.

public class UserModel
{
    public string UserName { get; set; }
    public List<Email> Emails = new List<Email>();
}

public class Email
{
    public string Address { get; set; }
}

在我看来,我有一个电子邮件列表:

<table>
@foreach(Email email in Model.Emails)
{
    <tr>
        <td>@Html.EditorFor(modelItem => email.Address)</td>
    </tr>
}
</table>

现在假设我希望用户能够单击向表中添加新行的按钮,以便用户可以将新电子邮件添加到绑定到其用户的列表中.我该怎么做呢？我是否需要通过javascript以某种方式添加新行,以便在发布页面时绑定到模型？我不知道如何处理这个问题,因为我对来自WebForms的MVC相对较新.

Answer 1

经过一番研究,我发现这篇博文由Steven Anderson 撰写http://blog.stevensanderson.com/2010/01/28/editing-a-variable-length-list-aspnet-mvc-2-style/

它看起来正是我想要的(除了它是用MVC2编写的).

Answer 2

首先，您的模型定义需要一些调整：

public class UserModel
{
 public string UserName { get; set; }//not sure where to use this

 //for listing
 public List<Email> Emails { get; set; }

 //for adding
 public Email Email { get; set; }

 public UserModel()
 {
  this.Emails = new List<Email>();//remember to populate in the controller
 }
}

接下来，您可以做的是（不确定您的表实现）显示当前电子邮件的列表，然后有一个可以发布新电子邮件以添加的表单部分：

@model namespace.UserModel

@foreach(var email in Emails)
{
 <div>@email.Address</div>
}

<script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>

@using (Html.BeginForm()) {
@Html.ValidationSummary(true)
<fieldset>
    <legend>New Email Details</legend>

    <div class="editor-label">
        @Html.LabelFor(model => model.Email.Address)
    </div>
    <div class="editor-field">
        @Html.EditorFor(model => model.Email.Address)
        @Html.ValidationMessageFor(model => model.Email.Address)
    </div>

    <p>
        <input type="submit" value="Add Email" />
    </p>
</fieldset>
}