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

Question

我是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; }
}

当我为create action创建视图时,Visual Studio只为ContactName和ContactNo创建标记.

当前用户界面就像这样.

但我需要这样的UI.

有没有办法为Contacts属性插入生成标记.或者我应该使用jquery和自定义json调用来做这种事情.

Answer 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);
            });

        });
    });

希望你明白这一点.