MVC 模态窗口数据绑定

Question

我有一个类型的对象

public class Customer
{
    public int Id { get; set; }
    public string Name { get; set; }
    public List<Person> Personel { get; set; }
    public List<Address> Addresses { get; set; }
}

哪里

public class Person
{
    public int Id { get; set; }
    public string FirstName { get; set; }
    public string LastName { get; set; }
}

和

public class Address
{
    public int Id { get; set; }
    public string ZipCode { get; set; }
    public string City { get; set; }
    public string Country { get; set; }
}

在我的主页上，我列出了所有客户作为摘要

@model List<Customer>
<table>
    <thead>
        <tr>
            <th>Customer No</th>
            <th>Customer Name</th>
            <th># of personel</th>
            <th># of addresses</th>
        </tr>
    </thead>
    <tbody>
        @if(Model != null && Model.Count > 0)
        {
            foreach (Customer c in Model)
            {
                <tr>
                    <td>@Html.DisplayFor(x => c.Id)</td>
                    <td>@Html.DisplayFor(x => c.Name)</td>
                    <td>@Html.ActionLink("$ " + c.Personel.Count(), "Summary", "Customer", new { onclick = "ShowPersonelDetails(" + item.Id + ")" })</td>
                    <td>@Html.ActionLink("$ " + c.Addresses.Count(), "Summary", "Customer", new { onclick = "ShowAddressDetails(" + item.Id + ")" })</td>
                </tr>
            }
        }
    </tbody>
</table>

当我单击地址计数或人员计数时，我想要显示一个弹出窗口，列出相应的项目。

列出人员（例如，我有以下部分视图）

<div id="personel-details" class="ui-modal-window" title="Personeldetails">
    <table class="popup-table">
        <thead>
            <tr>
                <th>Name</th>
                <th>Surname</th>
                <th>Place of birth</th>
                <th>Date of birth</th>
            </tr>
    </thead>
    </table>
</div>

为了使这个窗口成为模式，我在主页上使用以下脚本

$(function () {
    $("#balance-details").dialog({
        autoOpen: false,
        resizable: false,
        height: 300,
        width: 600,
        dialogClass: 'no-close',
        modal: true,
        buttons: [
            {
                text: "OK",
                click: function () {
                    $(this).dialog("close");
                }
            }],
        show: {
            effect: "fade",
            duration: 300
        },
        hide: {
            effect: "puff",
            duration: 300
        }
    });
});

为了调用列表，我使用以下代码：

function ShowCurrentBalanceDetails(__id) {
    var _id = null;
    if (__id && $.isNumeric(__id)) {
        _id = parseInt(__id);
    }
    if (_id) {
        $.ajax({
            type: "POST",
            url: "GetPersonelRecords",
            dataType: "json",
            data: {
                id: _id
            },
            success: function (result) {
                $("#personel-details").html(result);
                $("#personel-details").dialog("open");
            },
            error: function (x, t, m, b) {
                alert(x.responseText);
            }
        });
    }
    else {
        alert("Error!!!!");
    }
}

关键是我想在模式窗口中显示类客户的 Personel 属性，

1. 如何在主页中设置部分视图数据
2. 我应该如何在模态窗口中设置数据。

我尝试将列表设置为数据到部分视图，但当时无法设置项目属性。

如何完成任务？

Answer 1

如何在主页中设置部分视图数据

如果您的操作GetPersonelRecords将返回已填充数据的PartialView，则只需将操作的结果放在modal 中即可。

我应该如何在模态窗口中设置数据。

因为您在 GetPersonelRecords 返回的PartialView中填充数据，所以在响应时，您将获得 html 并将 html 放在模态$("#personel-details").html(result);中。

---

PartialView（_PersonelPartial.cshtml）看起来与主视图几乎相同。

@model List<Customer>
<table class="popup-table">
<thead>
    <tr>
            <th>Name</th>
            <th>Surname</th>
            <th>Place of birth</th>
            <th>Date of birth</th>
    </tr>
</thead>
<tbody>
    @if(Model != null && Model.Count > 0)
    {
        foreach (Customer c in Model)
        {
            <tr>
                <td>@Html.DisplayFor(x => c.Name)</td>
                <td>@Html.DisplayFor(x => c.Surname)</td>
                <td>@Html.DisplayFor(x => c.BirthPlace)</td>
                <td>@Html.DisplayFor(x => c.Birthday)</td>
            </tr>
        }
    }
</tbody>
</table>

在您的主视图中添加此 html，我们将在其中从操作结果中append数据

<div id="personel-details" class="ui-modal-window" title="Personeldetails">
</div>

您的操作将返回一个PartialView（带有 html 渲染器）

public ActionResult GetPersonelRecords(string id) 
{
    var personel = // get personel by personId
    return PartialView("_PersonelPartial", personel);
}

javascript ajax 调用保持不变，因为将用此行上的PartialView填充模态，$("#personel-details").html(result);您还必须更改dataType: "html"才能接收 html