如何使用 jQuery 等待替换

Question

我正在使用以下代码更新视图中的模式，然后使用控制器操作替换内容。

 $('#myTable1, #myTable2').on('click', 'a.editor_edit', function (e) {
            e.preventDefault();

            //console.log(e.target);
            //console.log(this.closest('table'));


            var passedId = $(this).attr("id");
            //console.log(passedId);

            $.get('/Controller/EditCustomer/' + passedId, function (data) {
                console.log(data);
                $('#partial').replaceWith(data);
                $('#reportModal').modal('show');
            });

        });

但是当模态出现时，它仍然保存第一个 id 的数据。而且它永远不会更新模态框内的内容。

我怀疑它要么是模态，要么是我过早地显示模态（在替换完成之前）。

当我执行 console.log 时，我每次都会得到新数据...

在 Index.cshtml 中，我有这个。

<div id="partial" style="display: none">

</div>

局部视图看起来像，

@model MyModel

<div class="modal fade" id="reportModal" tabindex="-1" role="dialog" aria-labelledby="reportModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&#xD7;</span></button>
                <h4 class="modal-title" id="reportModalLabel">Edit Customer:</h4>
                @if (Model != null)
                {
                    using (Html.BeginForm())
                    {
                        @Html.AntiForgeryToken()

                        <div class="form-horizontal">
                            <h4>Customer</h4>
                            <hr />
                            @Html.ValidationSummary(true, "", new { @class = "text-danger" })
                            @Html.HiddenFor(model => model.ID)

                            <div class="form-group">
                                @Html.LabelFor(model => model.Name, htmlAttributes: new { @class = "control-label col-md-2" })
                                <div class="col-md-10">
                                    @Html.EditorFor(model => model.Name, new { htmlAttributes = new { @class = "form-control" } })
                                    @Html.ValidationMessageFor(model => model.Name, "", new { @class = "text-danger" })
                                </div>
                            </div>

                            <div class="form-group">
                                @Html.LabelFor(model => model.Description, htmlAttributes: new { @class = "control-label col-md-2" })
                                <div class="col-md-10">
                                    @Html.EditorFor(model => model.Description, new { htmlAttributes = new { @class = "form-control" } })
                                    @Html.ValidationMessageFor(model => model.Description, "", new { @class = "text-danger" })
                                </div>
                            </div>

                            <div class="form-group">
                                <div class="col-md-offset-2 col-md-10">
                                    <input type="submit" value="Save" class="btn btn-default" />
                                </div>
                            </div>
                        </div>
                    }

                }
            </div>
            <div class="modal-body">
                <canvas id="reportsChart" width="400" height="400"></canvas>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" id="modal-cancel-b">Cancel</button>
                <button type="button" class="btn btn-primary"  aria-haspopup="true" aria-expanded="false">Save</button>
            </div>
        </div>
    </div>
</div>

Answer 1

replaceWith() 替换您选择的元素，因此第一次执行脚本时，<div id="partial"> 元素将替换为您的局部视图。但是由于部分不包含带有id="partial" 的封闭元素，所以下次执行脚本时，您的$('#partial').replaceWith(data); 什么也不做，因为DOM 中不再有带有id="partial" 的元素。

相反，您需要使用 $('#partial').html(data); 替换元素的内容而不是元素本身。

您还需要从元素中删除 style="display: none"（或使用 .show() 使其在 ajax 回调中可见，尽管似乎没有理由将其隐藏）

ajax调用应该是

$.get('/Controller/EditCustomer/' + passedId, function (data) {
    console.log(data);
    $('#partial').html(data);
    $('#reportModal').modal('show');
});

虽然它总是首选使用@Url.Action() 来生成网址

$.get('@Url.Action("EditCustomer", "Controller")' { id: passedId }, function (data) {

您的代码还有一些其他问题需要考虑

1. 您目前不会获得任何客户端验证，因此您需要 在成功回调中重新解析 $.validator - 参考 Required field validations not working in JQuery Popup MVC 4
2. 您可以通过在视图中包含部分来提高性能 最初（比如使用@Html.Partial("yourPartialName", new MyModel())）并让您的方法返回一个JsonResult MyModel 实例，然后您可以使用它来更新表单 控制。您不仅会发送回更少的数据 客户端，您不需要重新解析 $.validator 这是 昂贵的。如果所有属性值都已经在 DOM 中 （例如，作为表格的列），那么您将不需要任何 ajax 调用（只需从这些值更新表单控件）
3. 你还需要考虑ModelState在 控制器 POST 方法以及如何处理返回视图