MVC 模式 Window 数据绑定

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>

为了使这个 window 模态，我在我的主页上使用了以下脚本

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

重点是我想在模式 window,

中显示 class 客户的人员属性

如何设置主页面的局部视图数据
我应该如何设置模态中的数据window。

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

我怎样才能完成我的任务？

Answer 1

How should I set the partial view data in the main page

如果您的操作 GetPersonelRecords 将 return 一个 PartialView 已经填充了数据，您只需 放置操作的结果 模态.

How should I set the data in the modal window.

因为您在 PartialView return 编辑的 GetPersonelRecords 中填充数据，在响应时您将得到 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>

您的操作将 return 一个 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" to receive html

MVC 模式 Window 数据绑定

MVC Modal Window DataBinding

data-binding

asp.net-mvc

jquery