Javascript 如何从模式更新父窗体

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

TL；DR：要关闭模式表单，请重定向到父表单并更新其中显示的文本

请参阅下面的代码片段：

控制器

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

    return Json(newClientDetails);
}

---

查看（Index.cshtml）

模态形式

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

---

如果您在单击“保存”功能时被重定向，可能是由于以下几个原因。下面的代码片段应该可以解决您的问题

$(document).on('click', '.btn-primary', function (event) {
    event.preventDefault();
    $.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 occurred!");
        }
    });

    function getModelData() {
        var dataToSubmit = {
            Address1: $("#clientAddress1").val(),
            Address2: $("#clientAddress2").val(),
            City: $("#clientCity").val(),
            Province: $("#clientProvince").val(),
            PostalCode: $("#clientPostalCode").val(),
            PhoneNumber: $("#clientPhoneNumber").val()
        };
        return dataToSubmit;
    }
});

对代码片段的更改说明：

我没有使用jqueryclick方法，而是更新了它，使用了

on

方法。这将允许我们将事件附加到

btn primary

类，即使它是在呈现dom之后加载的

我们现在将事件对象传递到方法中。这允许我们防止任何预期的默认行为，例如提交表单。这是通过

event.preventDefault（）

方法实现的

---

我不明白。如果您有一个模态，那么您不应该离开原始页面。模态视图是什么样子的？您的

POST/Home/Index

操作是什么样子的？视图（起始表单）是您的索引视图吗？@Jasen单击我的模式表单上的“保存”按钮后，它将重定向到

http://localhost:6969/Client/UpdateClientDetails/1234

使用以下字符串：{“Address1”：“38 Lesmill路”，“Address2”：“套房1”，“城市”：“多伦多”，“省”：“ON”，“PostalCode”：“M3B 2T5”，“电话号码”：（416）445-4504”，“Id”：2827，“Name”：“Advisor Centric”}由于您在表单提交按钮上发布AJAX帖子，因此必须阻止默认表单提交（这会导致浏览器导航到表单的

操作

）。与其阻止默认点击，不如阻止“提交”“事件。在这个特殊的案例@Jasen中，我们正在阻止表单提交。如果该按钮位于表单内部，并且该按钮具有提交类型，则当用户单击该按钮时，默认行为是提交表单。因此，阻止表单提交是多余的。

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>

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

$(document).on('click', '.btn-primary', function (event) {
    event.preventDefault();
    $.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 occurred!");
        }
    });

    function getModelData() {
        var dataToSubmit = {
            Address1: $("#clientAddress1").val(),
            Address2: $("#clientAddress2").val(),
            City: $("#clientCity").val(),
            Province: $("#clientProvince").val(),
            PostalCode: $("#clientPostalCode").val(),
            PhoneNumber: $("#clientPhoneNumber").val()
        };
        return dataToSubmit;
    }
});