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

关键是我想在模态窗口中显示Customer类的Personel属性，

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

我尝试将List作为数据设置为部分视图，但我无法设置项属性。

我如何完成任务？

Answer 1

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

如果您的操作GetPersonelRecords将返回已填充数据的PartialView，则只需将操作的结果置于模态。< / p>

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

由于您填充PartialView返回的GetPersonelRecords中的数据，在回复时您将获得 html 并将html放在模态$("#personel-details").html(result);中。< / p>

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" to receive html

MVC模态窗口数据绑定

1 个答案: