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