Ajax调用中断了对子对象的绑定 [英] Ajax call breaks binding to object children
问题描述
没有ajax调用,我的主视图绑定到我的父类,主视图上的部分视图绑定到父类的子成员
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
父母...
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; }
}
父母的孩子...
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; }
}
主视图
@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 ...你可以想象其余的非常标准的视图
// yada yada...you can imagine the rest of the very standard view
局部视图的模型是地址,并且全部连接起来. 当我发回到服务器时,Address成员已从部分视图中正确填充了输入的数据...
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...
所以现在...在我的局部视图中,我现在加载js来调用异步例程以为用户加载IP GEO数据-这样就可以预先填充城市,省份,国家/地区
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
任何一个ajax调用示例都足够了……我调用了一个AddressControl,返回一个partialview结果,并用更新后的partialview替换了一个名为addressData的div:
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
}
});
});
一切正常!
但是
现在,当我通过提交"按钮回发给用户时,父类的地址"子成员为空....
Now, when I post back to the user via the submit button, the Address child member of the parent class is null....
返回ajax调用后,如何重新绑定父类的Address成员?
How do I get it to rebind the Address member of the parent class after return of the ajax call?
推荐答案
通过在局部视图中生成输入字段,HTML帮助程序没有意识到Address模型是初始Client模型的属性,因此它在生成HTML输入像:
By generating your input fields in the partial view, the HTML helpers are unaware that your Address model is a property of your initial Client model, so it's generating HTML inputs like:
<input type="text" id="City" name="City" />
<input type="text" id="State" name="State" />
如果您的POST操作方法正在接受客户端模型,则模型绑定器将查找不存在的客户端模型属性城市"和州".
If your POST action method is accepting a Client model then the model binder will look for the properties City and State of the Client model, which don't exist.
您需要HTML输入如下所示:
You need your HTML input to look like:
<input type="text" id="Address_City" name="Address.City" />
<input type="text" id="Address_State" name="Address.State" />
您应该使用编辑器模板,它将在这种情况下根据需要保留父属性.
Instead of using a partial for your Address fields, you should use an Editor Template which will then preserve the parent property as you need in this case.
@Html.EditorFor(x => x.Address)
这篇关于Ajax调用中断了对子对象的绑定的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!