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创建标记。

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

No UI for contact insertion.

但我需要这样的UI。

enter image description here

有没有办法为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);
            });

        });
    });

希望你明白这一点。

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

1 个答案: