为具有 List 对象属性的模型生成创建视图答案

【问题标题】：Generate create view for model which have List object property为具有 List 对象属性的模型生成创建视图
【发布时间】：2014-01-09 05:33:12
【问题描述】：

我是 MVC 的新手。我有一个模型类，它具有另一个类的 List 属性。

public class CustomerModel
{
    [Required]
    [Display(Name = "Customer Name")]
    public string CustomerName { get; set; }

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

    [Required]
    [Display(Name="Contact Details")]
    public List<ContactModel> Contacts { get; set; }
}

public class ContactModel
{
    [Required]
    [Display(Name = "Contact Name")]
    public string ContactName { get; set; }

    [Required]
    [Display(Name = "Contact Number")]
    public string ContactNo { get; set; }
}

当我为创建操作创建视图时，Visual Studio 只为 ContactName 和 ContactNo 创建标记。

目前的用户界面是这样的。

但我需要这样的用户界面。

有没有办法为联系人属性插入生成标记。或者我是否需要使用 jquery 和自定义 json 调用来做这种事情。

【问题讨论】：

看起来你的添加联系人有一个单独的提交范围，所以你可以使用'contactmodel'为此创建一个部分视图。

标签： c# asp.net-mvc entity-framework asp.net-mvc-4 razor

【解决方案1】：

有一种方法可以实现这种 UI。我会告诉你怎么做。为此，我们必须使用局部视图和 ajax 调用。

首先您必须对 CustomerModel 进行一些更改。

    public class CustomerModel
    {
        [Required]
        [Display(Name = "Customer Name")]
        public string CustomerName { get; set; }

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

        [Required]
        public ContactModel ContactModel {get;set;}

        [Required]
        [Display(Name="Contact Details")]
        public List<ContactModel> Contacts { get; set; }
    }

现在您必须添加一个部分视图来生成您的联系人列表。这里我添加了一个名为 _Contacts.cshtml

的局部视图

@model CustomerModel


@for (int i = 0; i < Model.Contacts.Count; i++)
{
    <tr>
        @Model.Contacts.Count
        <td class="editor-field">
            @Html.EditorFor(model => model.Contacts[i].ContactName)
        </td>


        <td class="editor-field">
            @Html.EditorFor(model => model.Contacts[i].ContactNo)
            @Html.ValidationMessageFor(model => model.Contacts[i].ContactNo)
        </td>

    </tr>
}

现在您必须添加另一个返回局部视图的 ActionResult 方法。

    [HttpPost]
    public ActionResult GenerateContacts(CustomerModel customer)
    {
        // Check whether this request is comming with javascript, if so, we know that we are going to add contact details.
        if (Request.IsAjaxRequest())
        {
            ContactModel contact = new ContactModel();
            contact.ContactName = customer.ContactMode.ContactName;
            contact.ContactNo = customer.ContactMode.ContactNo;

            if (customer.Contacts == null)
            {
                customer.Contacts = new List<ContactModel>();
            }

            customer.Contacts.Add(contact);

            return PartialView("_Contact", customer);
        }            
    }

现在我们为“添加联系人”按钮编写一个 onclick 事件。在那里，我们将 ViewModel 数据传递给上述操作方法并检索生成的联系人视图。

我假设“添加联系人”按钮的 ID 是 addContact。在这里，我将生成的 html 或联系方式添加到表格中。

 $(function () {
        $("#addContact").click(function () {           

            $.ajax({
                type: "POST",
                url: 'Customer/GenerateContacts', // get the link to the controller's action method
                data: form.serialize()
            })
            .success(function (html) {
                // this function will automatically called when response of the called ajax call is success
                var tableBody = $("#tblContactBody");
                tableBody.text(html);
            })
            .error(function (msg) {
                console.log(msg);
            });

        });
    });

希望你能得到这个。

【讨论】：