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

重点是我想显示的人员在模态窗口类客户的财产，

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

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

我该如何完成我的任务？

Answer 1

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

如果你的行动GetPersonelRecords将返回一个PartialView已经与填充的数据，你只要结果放在模式行动的。

How should I set the data in the modal window.

因为你填充由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> 

在主视图中添加这个网站，我们会从行动结果append数据

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

</div> 

你的行动会返回一个PartialView（用HTML rendereder）

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

javascript ajax调用仍然是相同的，因为将在此行上使用PartialView填充模式$("#personel-details").html(result);还必须通过ge dataType: "html"to receive html