title: MVC Modal Window DataBinding
body: <p>I have an object of type</p>
  
  <pre><code>public class Customer
  {
      public int Id { get; set; }
      public string Name { get; set; }
      public List&lt;Person&gt; Personel { get; set; }
      public List&lt;Address&gt; Addresses { get; set; }
  }
  </code></pre>
  
  <p>where</p>
  
  <pre><code>public class Person
  {
      public int Id { get; set; }
      public string FirstName { get; set; }
      public string LastName { get; set; }
  }
  </code></pre>
  
  <p>and</p>
  
  <pre><code>public class Address
  {
      public int Id { get; set; }
      public string ZipCode { get; set; }
      public string City { get; set; }
      public string Country { get; set; }
  }
  </code></pre>
  
  <p>on my main page I list all Customers as a summary</p>
  
  <pre><code>@model List&lt;Customer&gt;
  &lt;table&gt;
      &lt;thead&gt;
          &lt;tr&gt;
              &lt;th&gt;Customer No&lt;/th&gt;
              &lt;th&gt;Customer Name&lt;/th&gt;
              &lt;th&gt;# of personel&lt;/th&gt;
              &lt;th&gt;# of addresses&lt;/th&gt;
          &lt;/tr&gt;
      &lt;/thead&gt;
      &lt;tbody&gt;
          @if(Model != null &amp;&amp; Model.Count &gt; 0)
          {
              foreach (Customer c in Model)
              {
                  &lt;tr&gt;
                      &lt;td&gt;@Html.DisplayFor(x =&gt; c.Id)&lt;/td&gt;
                      &lt;td&gt;@Html.DisplayFor(x =&gt; c.Name)&lt;/td&gt;
                      &lt;td&gt;@Html.ActionLink("$ " + c.Personel.Count(), "Summary", "Customer", new { onclick = "ShowPersonelDetails(" + item.Id + ")" })&lt;/td&gt;
                      &lt;td&gt;@Html.ActionLink("$ " + c.Addresses.Count(), "Summary", "Customer", new { onclick = "ShowAddressDetails(" + item.Id + ")" })&lt;/td&gt;
                  &lt;/tr&gt;
              }
          }
      &lt;/tbody&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>and when I click either address count or personel count ı want to display a pop-up listing the appropriate items.</p>
  
  <p>To list personel (as an example I have the following partial view)</p>
  
  <pre><code>&lt;div id="personel-details" class="ui-modal-window" title="Personeldetails"&gt;
      &lt;table class="popup-table"&gt;
          &lt;thead&gt;
              &lt;tr&gt;
                  &lt;th&gt;Name&lt;/th&gt;
                  &lt;th&gt;Surname&lt;/th&gt;
                  &lt;th&gt;Place of birth&lt;/th&gt;
                  &lt;th&gt;Date of birth&lt;/th&gt;
              &lt;/tr&gt;
      &lt;/thead&gt;
      &lt;/table&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>To make this window modal I use the following script on my main page</p>
  
  <pre><code>$(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
          }
      });
  });
  </code></pre>
  
  <p>and to call the list I use the following code:</p>
  
  <pre><code>function ShowCurrentBalanceDetails(__id) {
      var _id = null;
      if (__id &amp;&amp; $.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!!!!");
      }
  }
  </code></pre>
  
  <p>The point is I want to display the Personel property of class Customer in the modal window,</p>
  
  <ol>
  <li>How should I set the partial view data in the main page</li>
  <li>How should I set the data in the modal window.</li>
  </ol>
  
  <p>I have tried to set the List as data to partial view but I can not set the item properties then.</p>
  
  <p>How can I accomplish my task?</p>