This is a migrated thread and some comments may be shown as answers.

Ajax call breaks binding to object children

1 Answer 21 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
Robert
Top achievements
Rank 1
Robert asked on 14 Mar 2014, 06:14 PM


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

parent...

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; }
}


child of parent...

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; }
 
}

the main view

@using (Html.BeginForm("Create", "Client", FormMethod.Post, new Dictionary<string, object> { { "data-htci-target", "addressData" } }))
{
    @Html.AntiForgeryToken()
 
    <div class="row">
        @Html.LabelFor(model => model.Name, new { @class = "control-label col-md-2" })
        <div class="col-sm-4 col-md-4 col-lg-4">
            @Html.Kendo().AutoCompleteFor(model => model.Name).HtmlAttributes(new { style = "width:100%" })
            @Html.ValidationMessageFor(model => model.Name)
        </div>
    </div>
 
    @{ var vdd = new ViewDataDictionary(ViewData) { TemplateInfo = new TemplateInfo() { HtmlFieldPrefix = "Address" } };}
 
    @Html.Partial("_AddressPartial", Model.Address, @vdd)
 
    // yada yada...you can imagine the rest of the very standard view


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...

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

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 :

$(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
    }
    });
});


All works great!

BUT

Now, when I post back to the user via the submit button, the Address child member of the parent class is null....

How do I get it to rebind the Address member of the parent class after return of the ajax call?

1 Answer, 1 is accepted

Sort by
0
Daniel
Telerik team
answered on 18 Mar 2014, 06:46 PM
Hello Robert,

Did you use the same prefix:
@{ var vdd = new ViewDataDictionary(ViewData) { TemplateInfo = new TemplateInfo() { HtmlFieldPrefix = "Address" } };}
for the editors in the partial view that is loaded with Ajax? If not then the editor names will not be correct and the model binder will not set the nested fields values.

Regards,
Daniel
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
Tags
General Discussions
Asked by
Robert
Top achievements
Rank 1
Answers by
Daniel
Telerik team
Share this question
or