生成创建视图模型，它有列表对象属性 [英] Generate create view for model which have List object property

问题描述

我是新来的MVC。我有是有另一个类的List属性的模型类。

I'm new to MVC. I have a model class which is having List property of another class.

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仅仅只为联系人姓名和ContactNo创建标记。

When I create the view for create action, Visual studio just create markup only for ContactName and ContactNo.

当前的UI是这样的。

但我需要一个像这样的UI。

But I need a UI like this.

有没有一种方法来生成联系人财产插入标记。或者我应该需要做的这种事情与jQuery和定制JSON电话。

Is there a way to generate markup for Contacts property insertion. Or should I need to do this kind of thing with jquery and custom json calls.

推荐答案

有一种方法可以做这种用户界面。
我会告诉你如何做到这一点。要做到这一点，我们必须使用局部视图和Ajax调用。

There is a way to do this kind of UI. I'll show you how to do it. To do it, we have to use partial views and ajax calls.

首先，你必须做CustomerModel一些变化。

First you have to do some changes on 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的局部视图

Now you have to add a partial view which generate your contact list. Here I added a partial view called _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的方法。

Now you have to add a another ActionResult method which returns a partial view.

    [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事件。在那里我们通过视图模型数据上面的操作方法，并获得生成联系人视图。

Now we write a onclick event for "Add Contact" button. In there we pass ViewModel data to the above action method and retrieve the generated contact view.

我认为添加联系人按钮的ID是的addContact。在这里，我想补充生成的html或联络方式的表。

I assume that "Add Contact" button's Id is addContact. Here I add generated html or the contact details to a table.

 $(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);
            });

        });
    });

也喜欢你。

这篇关于生成创建视图模型，它有列表对象属性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！