title: Ajax call breaks binding to object children
body: <p>Without the ajax call, My main view binds to my parent class and the partial view on main view, binds to a child member of the parent class</p>
  
  <p>parent...</p>
  
  <pre><code>public class Client
  {
      [ScaffoldColumn(false)]
      public int Id { get; set; }
  
      [DisplayName("Name")]
      [Required]
      [StringLength(120)]
      public string Name { get; set; }
  
      // etc...
  
      public virtual Address Address { get; set; }
  }
  </code></pre>
  
  <p>child of parent...</p>
  
  <pre><code>public class Address
  {
      [ScaffoldColumn(false)]
      public int AddressId { get; set; }
  
      [DisplayName("Address")]
      [Required]
      [StringLength(200)]
      public string Street { get; set; }
  
      // etc...
  
      [ForeignKey("Client")]
      public int? Id { get; set; }
      public virtual Client Client { get; set; }
  
  }
  </code></pre>
  
  <p>the main view</p>
  
  <pre><code>@using (Html.BeginForm("Create", "Client", FormMethod.Post, new Dictionary&lt;string, object&gt; { { "data-htci-target", "addressData" } }))
  {
      @Html.AntiForgeryToken()
  
  
      &lt;div class="row"&gt;
          @Html.LabelFor(model =&gt; model.Name, new { @class = "control-label col-md-2" })
          &lt;div class="col-sm-4 col-md-4 col-lg-4"&gt;
              @Html.Kendo().AutoCompleteFor(model =&gt; model.Name).HtmlAttributes(new { style = "width:100%" })
              @Html.ValidationMessageFor(model =&gt; model.Name)
          &lt;/div&gt;
      &lt;/div&gt;
  
      @{ var vdd = new ViewDataDictionary(ViewData) { TemplateInfo = new TemplateInfo() { HtmlFieldPrefix = "Address" } };}
  
      @Html.Partial("_AddressPartial", Model.Address, @vdd)
  </code></pre>
  
  <p>// yada yada...you can imagine the rest of the very standard view</p>
  
  <p>The partial view's model is Address and all hooks up.
  When I post back to the server the Address member is properly filled with entered data from the partial view...</p>
  
  <p>So now...in my partial view, I now load the js to call the async routine to load the IP GEO data for the user - so it pre-fills the city, province, country</p>
  
  <p>Any example of an ajax call will suffice...mine calls an AddressControl, returns a partialview result and  replaces a div named addressData with the updated partialview :</p>
  
  <pre><code>$(function() {
  
  var urlGeoIeoip = "http://ip-api.com/json/?callback=?";
  
  $.ajax({
      url: urlGeoIeoip,
      type: "GET",
      dataType: "json",
      timeout: 5000,
      success: function (geoipdata) {
  
  
          $.ajax({
              url: "/getlocationdata/" + geoipdata.country + "/" + geoipdata.regionName + "/" + geoipdata.city,
              type: "GET",
              timeout: 5000,
              success: function (data) {
                  //alert(data);
                  //var $form = $(this);
                 // var $target = $($form.attr("data-htci-target"));
                  var $newHtml = $(data);
                  //alert($target);
                  $("#addressData").replaceWith($newHtml);
                  $("#City").data("kendoComboBox").value(geoipdata.city);
                  $("#State").data("kendoComboBox").value(geoipdata.regionName);
                  $("#Country").data("kendoComboBox").value(geoipdata.country);
              }
          });
  
  
      }
  }).fail(function(xhr, status) {
      if (status === "timeout") {
           // log timeout here
      }
  });
  });
  </code></pre>
  
  <p>All works great!</p>
  
  <p>BUT</p>
  
  <p>Now, when I post back to the user via the submit button, the Address child member of the parent class is null....</p>
  
  <p>How do I get it to rebind the Address member of the parent class after return of the ajax call?</p>