javascript - 如何从模态框更新父表单

Question

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

TL;DR:想要关闭模式表单，重定向到父表单并更新那里显示的文本。

请参阅下面的我的代码片段:

Controller

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

__

Controller 方法

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

Answer 1

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

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

代码段更改说明:

1. 我已将其更新为使用 on 方法，而不是使用 jQuery click 方法。这将允许我们将事件附加到 btn-primary 类，即使它是在 dom 渲染之后加载的。
2. 我们现在将事件对象传递到方法中。这使我们能够防止任何预期的默认行为，例如以传统方式提交表单。这是通过 event.preventDefault() 方法完成的。