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

Question

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

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

Current UI is like this.

But I need a UI like this.

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.

Answer 1

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.

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

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>
}

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

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.

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

        });
    });

Hope you get this.