title: How to bind data Modal window (MVC)
body: <p>I have a Person class to hold data for Personel and their children as follows:</p>
  
  <pre><code>public class Person
  {
      public int Id { get; set; }
      public string FirstName { get; set; }
      public string Surname { get; set; }
      public List&lt;Person&gt; Children { get; set; }
  
      public Person()
      { }
      public Person(int id, string firstname, string surname)
      {
          this.Id = id;
          this.FirstName = firstname;
          this.Surname = surname;
      }
  }
  </code></pre>
  
  <p>I am listing them on my View as follows:</p>
  
  <pre><code>@model List&lt;MvcApplication1.Person&gt;
  @{
      ViewBag.Title = "Index";
  }
  &lt;table style="border: 1px solid #000;"&gt;
      &lt;thead&gt;
          &lt;tr&gt;
              &lt;th&gt;Name&lt;/th&gt;
              &lt;th&gt;Surname&lt;/th&gt;
              &lt;th&gt;Children&lt;/th&gt;
          &lt;/tr&gt;
      &lt;/thead&gt;
      &lt;tbody&gt;
          @if (Model != null &amp;&amp; Model.Count &gt; 0)
          {
              for (int i = 0; i &lt; Model.Count; i++)
              {
                  &lt;tr&gt;
                      &lt;td style="border: 1px solid #000;"&gt;@Model[i].FirstName&lt;/td&gt;
                      &lt;td style="border: 1px solid #000;"&gt;@Model[i].Surname&lt;/td&gt;
                      &lt;td style="border: 1px solid #000;"&gt;
                      @if (Model[i].Children != null &amp;&amp; Model[i].Children.Count &gt; 0)
                      {
                          foreach (MvcApplication1.Controllers.Person child in Model[i].Children)
                          {
                              @child.FirstName  @child.Surname
                          }
                      }
                      &lt;/td&gt;
                  &lt;/tr&gt;
              }
          }
      &lt;/tbody&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>Everything is good so far. Then I want to add a jQuery modal window to show the details of the children clicked. So update the most inner-loop as:</p>
  
  <pre><code>&lt;a href="#" onclick="ShowChildDetails(@child.Id)"&gt;@child.FirstName  @child.Surname&lt;/a&gt;
  </code></pre>
  
  <p>and add the following method to post AJAX call to fetch details of the child clicked.</p>
  
  <pre><code>function ShowChildDetails(_id) {
      $.ajax({
          type: "POST",
          url: "Home/GetChild",
          dataType: "json",
          data: {
              id: _id
          },
          success: function (result) {
          },
          error: function (x, t, m, b) {
              alert(x.responseText);
          }
      });
  }
  </code></pre>
  
  <p>To show data I implement the following jQuery modal window:</p>
  
  <pre><code>$(function () {
      $("#child-view").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 update the <code>success</code> of the AJAX call as :</p>
  
  <pre><code>$("#child-view").html(result);
  $("#child-view").dialog("open");
  </code></pre>
  
  <p>I implement the look of my modal in another partial view:</p>
  
  <p><strong>(POINT #1)</strong>:</p>
  
  <pre><code>@Html.Partial("ChildView", Model) 
  </code></pre>
  
  <p>and implement my partial view as:</p>
  
  <p><strong>(POINT #2)</strong>:</p>
  
  <pre><code>@model List&lt;MvcApplication1.Controllers.Person&gt;
  &lt;div id="child-view" class="ui-modal-window" title=""&gt;
      &lt;table&gt;
          &lt;thead&gt;
              &lt;tr&gt;
                  &lt;th&gt;Name&lt;/th&gt;
                  &lt;th&gt;Surname&lt;/th&gt;
              &lt;/tr&gt;
          &lt;/thead&gt;
          &lt;tbody&gt;
              @if (Model != null)
              {
                  &lt;tr&gt;
                      &lt;td&gt;@Model.FirstName&lt;/td&gt;
                      &lt;td&gt;@Model.Surname&lt;/td&gt;
                  &lt;/tr&gt;
              }
          &lt;/tbody&gt;
      &lt;/table&gt;
  </code></pre>
  
  <p></p>
  
  <p>First of all, let's check <strong>POINT #1</strong>. Since I am declaring a partial view, I have to provide a data source (<em>Model</em> in this example) but as I check the partial view <strong>POINT #2</strong> I see that my partial View need single item, not a collection. On the other hand, at my View I don't know which item to bind and design time. My first question is how should I fix this?</p>
  
  <p>The second issue, I want to bind models properties to partial View with jQuery AJAX call, without postback. And I don't want to set values in each controller by hand. As long as my <code>Home/GetChild</code> returns an object of type <code>Person</code>, how can I bind the properties shorthand?</p>
  
  <p>Finally suppose that the modal window is not display only, but editable. How can I collect form data, map it to model (<code>Person</code> in this case) and send it as a parameter to another AJAX method?</p>
  
  <p>Regards.</p>