插入视图，集合属性(Insert view with collection property)

我有一个Person类和联系类。 一个人可以有很多接触。

public class Person
{
    [Required]
    public string FirstName { get; set; }

    public string LastName { get; set; }

    public string Notes { get; set; }

    [Required]
    public List<Contact> Contacts { get; set; }


    public Person()
    {
        Contacts = new List<Contact>();
    }
}


public class Contact
{
    [Required]
    public string Title { get; set; }

    [Required]
    public string Value { get; set; }

    public Contact() { Title = ""; Value = ""; }

    public Contact(string title, string value)
    {
        Title = title;
        Value = value;
    }
}

控制器 ：

public class PersonController : Controller
{

    public ActionResult Create()
    {
        return View(new PersonCreateModel());
    }


    // POST: /Person/Create
    [HttpPost]
    public ActionResult Create(string btnSubmit, PersonCreateModel personModel)
    {
        try
        {
            switch (btnSubmit)
            {
                case "AddContact":
                    personModel.Person.Contacts.Add(new Contact(personModel.NewContact_Title, personModel.NewContact_Value));
                    personModel.NewContact_Title = personModel.NewContact_Value = "";
                    return View(personModel);

                case "CreatePerson"://Add To Database
                    //blabla
                    break;
            }

            return RedirectToAction("Index");
        }
        catch
        {
            return View(personModel);
        }
    }
}

PersonCreateModel：

public class PersonCreateModel
{

    public Person Person { get; set; }

    public string NewContact_Title { get; set; }
    public string NewContact_Value { get; set; }

    public PersonCreateModel()
    {
        Person = new Person();
    }
}

查看 ：

@model MvcApplication1.Models.PersonCreateModel

@{
    ViewBag.Title = "Create";

    var contactsGrid = new WebGrid(Model.Person.Contacts); 
}

<h2>Create</h2>

@using (Html.BeginForm())
{
    @Html.ValidationSummary(true)

    <fieldset>
        <legend>Person</legend>

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

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

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

        <br />
        <div>
            <h4>Contacts:</h4>

            <table>
                <tr>
                    <td>Title: @Html.EditorFor(model => model.NewContact_Title)</td>
                    <td>Value: @Html.EditorFor(model => model.NewContact_Value)</td>
                    <td>
                        <input type="submit" name="btnSubmit" value="AddContact" /></td>
                </tr>
            </table>

            <div>
                @contactsGrid.GetHtml()
            </div>
        </div>

        <p>
            <input type="submit" name="btnSubmit" value="CreatePerson" />
        </p>
    </fieldset>
}

<div>
    @Html.ActionLink("Back to List", "Index")
</div>

@section Scripts {
    @Scripts.Render("~/bundles/jqueryval")
}

我试图做到的是，用户终于可以点击创建前的人添加多个联系人。

我有两个问题：

1 - 这是最好的方法？是不是有这样喜欢使用JavaScript或jQuery的一个更简单/短呢？

2 - 当我点击的addContact第一次它的工作Person.Contacts是空很大，第二次，也是我无法清除的addContact文本框。

我已经搜索所有网站上，并在这里＃2，但我没有找到任何答案，有一个悬而未决的问题在这里

PS：我是新来的MVC，从ASP.NET Web表单的到来。

Answer 1:

在我个人的观点，我认为更好的办法是处理“并称”在客户端，如果你没有做任何与联系人的数据在服务器端“有用”的接触（如保存到数据库或别的东西）。

随着使用jQuery JavaScript的小行，你可以动态地添加新的文本输入，为每一个新的接触，而当用户完成，他也可以点击提交，并在短短一个呼叫发送到服务器的所有信息。

这种方法将有两个原因会更好，首先就没有页面清爽分散的用户，和第二，你会避免用户的多个服务器调用，这可能意味着根据您的流量保存的数百或数千个电话。

编辑：

这是一个非常简单的例子是什么莫非，你当然应该增加更多的功能和样式。

您的视图模型应该是这个样子，为了这个工作：

public class PersonCreateModel
{
    public Person Person { get; set; }
    public List<Contact> Contacts { get; set; }
}

这是一个常见的问题，所以必须有很多其他的解决方案，来看看这种方法过于它是一种“老”，但概念仍然适用的。

文章来源: Insert view with collection property