如何从模态更新父窗体

我有一个模式表单，一旦单击"保存"按钮，它就会更新客户端的地址。我想在模态表单关闭后使用AJAX调用来更新Model的数据。然后，它会重定向回调用模态表单的父表单（Index.cshtml）。AJAX调用通过文本框成功地检索了更新后的模态表单的数据，但它总是抛出错误。

TL；DR：想要关闭模式窗体，重定向到父窗体并更新显示在那里的文本。

请参阅下面的代码片段：

控制器

[ValidateInput(false), HttpPost]
public JsonResult UpdateClientDetails(Client newClientDetails)
{
    _clientService.UpdateClient(newClientDetails);
    return Json(newClientDetails);
}

$('.btn-update-client').click(function (e) {
        var id = $(this).val();
        $('#updateClientModal .modal-content').load('/client/UpdateClientDetails/' + id);
        $('#updateClientModal').modal('show');
});

视图（Index.cshtml）

<div class="panel-body">
    <label>Client Id: <span id="ClientId">@id</span></label>
    <address>
        <span id="Address1">@client.Address1</span>, <span id="Address2">@client.Address2</span><br>
        <span id="City">@client.City</span>, <span id="Province">@client.Province</span><br>
        <span id="PostalCode">@client.PostalCode</span><br>
        <abbr title="Phone">P:</abbr> <span id="PhoneNumber">@client.PhoneNumber</span>
    </address>
    <div><button value="@id" type="button" class="btn btn-primary btn-update-client">Change</button></div>
</div>

__

控制器方法

public ActionResult Index()
{
    return View(_clientService.GetClientList());
}

模态形式

@model Client
@using ProductManager.Models
<div class="modal-header">
<h4 class="modal-title" id="exampleModalLabel">@Model.Name - ID: @Model.Id</h4>
</div>
@{
    var attributes = new Dictionary<string, object>();
    attributes.Add("class", "form-horizontal");
}
@using (Html.BeginForm("UpdateClientDetails", "Client", FormMethod.Post, attributes))
{
<div class="modal-body">
    <div class="form-group">
        <label for="clientAddress1" class="col-xs-3 control-label">Address 1</label>
            <div class="col-xs-9">
                <input type="text" class="form-control" id="clientAddress1" name="Address1" value="@Model.Address1">
            </div>
    </div>
    <div class="form-group">
        <label for="clientAddress2" class="col-xs-3 control-label">Address 2</label>
            <div class="col-xs-9">
                <input type="text" class="form-control" id="clientAddress2" name="Address2" value="@Model.Address2">
            </div>
    </div>
    <div class="form-group">
        <label for="clientCity" class="col-xs-3 control-label">City</label>
            <div class="col-xs-9">
                <input type="text" class="form-control" id="clientCity" name="City" value="@Model.City">
            </div>
    </div>
    <div class="form-group">
        <label for="clientProvince" class="col-xs-3 control-label">Province</label>
            <div class="col-xs-9">
                @Html.DropDownListFor(model => model.Province, (IEnumerable<SelectListItem>)ViewBag.ProvinceList, new { @class = "form-control", @id = "clientProvince" })
            </div>
    </div>
    <div class="form-group">
        <label for="clientPostalCode" class="col-xs-3 control-label">Postal Code</label>
            <div class="col-xs-9">
                <input type="text" class="form-control" id="clientPostalCode" name="PostalCode" value="@Model.PostalCode">
            </div>
    </div>
    <div class="form-group">
        <label for="clientPhoneNumber" class="col-xs-3 control-label">Phone #</label>
            <div class="col-xs-9">
                <input type="text" class="form-control" id="clientPhoneNumber" name="PhoneNumber" value="@Model.PhoneNumber">
            </div>
    </div>
    <div>
        <input type="hidden" id="clientName" name="Name" value="@Model.Name">
    </div>
    <div>
        <input type="hidden" id="clientID" name="Id" value="@Model.Id">
    </div>
</div>
<div class="modal-footer">
    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
    <button type="submit" class="btn btn-primary">Save changes</button>
</div>
}
<script type="text/javascript">
    $('.btn-primary').click(function () {
        $.ajax({
            type: 'POST',
            data: getModelData(),
            dataType: 'json',
            success: function (data) {
                $("#Address1").text(data.Address1);
                $("#Address2").text(data.Address2);
                $("#City").text(data.City);
                $("#Province").text(data.Province);
                $("#PostalCode").text(data.PostalCode);
                $("#PhoneNumber").text(data.PhoneNumber);
            },
            error: function () {
                alert("Error occured!");
            }
        });
        function getModelData() {
            var dataToSubmit = {
                Address1: $("#clientAddress1").val(),
                Address2: $("#clientAddress2").val(),
                City: $("#clientCity").val(),
                Province: $("#clientProvince").val(),
                PostalCode: $("#clientPostalCode").val(),
                PhoneNumber: $("#clientPhoneNumber").val()
            };
            return dataToSubmit;
        }
    });
</script>

在我的模态表单上点击"保存"按钮后，它会用以下字符串重定向到http://localhost:6969/Client/UpdateClientDetails/1234：

{"Address1":"38 Lesmill Rd","Address2":"Suite 1",
 "City":"Toronto","Province":"ON","PostalCode":"M3B 2T5",
 "PhoneNumber":"(416) 445-4504","Id":2827,"Name":"Advisor Centric"}