Question

没有ajax调用，我的主视图绑定到我的父类和主视图上的局部视图，绑定到父类的子成员

...父

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 ...你可以想象其余的标准视图

部分视图模型是地址和所有连接。当我回发到服务器时，地址成员正确填充了部分视图中输入的数据......

所以现在......在我的部分视图中，我现在加载js来调用异步例程来为用户加载IP GEO数据 - 所以它预先填充了城市，省，国家

任何ajax调用的例子都足够......我调用一个AddressControl，返回一个partialview结果并用更新后的partialview替换一个名为addressData的div：

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

一切都很棒！

BUT

现在，当我通过提交按钮发回给用户时，父类的Address子成员为null ....

如何在返回ajax调用后重新绑定父类的Address成员？

Answer 1

通过在局部视图中生成输入字段，HTML帮助程序不会意识到您的地址模型是初始客户端模型的属性，因此它生成HTML输入，如：

<input type="text" id="City" name="City" />
<input type="text" id="State" name="State" />

如果您的POST操作方法正在接受客户端模型，那么模型绑定器将查找不存在的客户端模型的City和State属性。

您需要HTML输入：

<input type="text" id="Address_City" name="Address.City" />
<input type="text" id="Address_State" name="Address.State" />

您应该使用Editor Template代替您的地址字段使用部分，然后在这种情况下将根据需要保留父属性。

@Html.EditorFor(x => x.Address)

Ajax调用会中断绑定到对象子节点

1 个答案: