为什么我的 AJAX 表单从我在 ASP.NET Core 的部分视图中发布多次？

Question

我正在使用 AJAX 将表单数据发布到我的 controller，该表单位于局部视图中，该视图在模态中调用和显示。 当第一次提交表单来更新我的数据时，它工作正常，然后如果我再次发布它，我会在控制台日志中注意到它发布了两次数据，如果我再次发布它，它发布了三次，依此类推。 防止该行为的唯一方法是刷新页面。

这是我的局部视图的代码。

@model UserView
<div class="modal fade" id="edit-custom-view" tabindex="-1" role="dialog" aria-labelledby="edit-custom-view" aria-modal="true">
    <div class="modal-dialog modal-dialog-scrollable modal-lg modal-notify modal-primary" role="document">
        <div class="modal-content">             
            <form id="ModalFormEditCustomView" enctype="multipart/form-data">
                <div class="modal-body">
                    <div class="row">
                        <input type="text" asp-for="Id" hidden readonly />
                        <div class="col">
                            <div class="md-form form-group">
                                <label asp-for="ViewName">View Name</label>
                                <input type="text" required class="form-control" asp-for="ViewName" />
                            </div>
                        </div>                           
                    </div>
                </div>
                <div class="modal-footer justify-content-center">
                    <button type="button" data-save="edit-view" class="btn btn-info waves-effect waves-light">Update</button>
                    <button type="button" class="btn btn-secondary waves-effect waves-light" data-dismiss="modal">Close</button>
                </div><!--/modal-footer-->
            </form>
        </div>
    </div>
</div>

发布数据的我的 function。 请注意， placeholderElement是模态 window 的 div。

placeholderElement.on('click', '[data-save="edit-view"]', function (event) {
    //Prevent the standard behaviour
    event.preventDefault();

    var form = $(this).parents('.modal').find('form');
    var actionUrl = form.attr('action');
    var dataToSend = form.serialize();       

    $.post(actionUrl , dataToSend).done(function (data) {
        var newBody = $('.modal-body', data);
        placeholderElement.find('.modal-body').replaceWith(newBody);
        placeholderElement.find('.modal').modal('hide');
    });
});

这是我的 controller

[HttpPost]
public JsonResult EditCustomView(UserView model) {
    ... update code goes here
    return Json(model);
}

这是打开带有表单的模式的按钮。

<button data-view-id='#=Id#' onclick='editViewModal(this, event)' data-area='Home' data-context='Position' data-toggle='ajax-modal' data-target='#edit-custom-view' data-action='EditCustomView' data-url='/Home/EditViewModal/'>Button</button>

最后，打开模式并获取局部视图的代码。

public IActionResult EditViewModal(int id) 
{
    string partial = "_EditCustomView";
    UserView userView = _userViewService.GetUserView(id);        
    return PartialView(partial, userView);
}

所以，当我点击提交时， ajax function 被触发提交数据，模态关闭。 如果我在不刷新页面的情况下再次编辑同一个项目，表单将被提交两次，依此类推，每次都会添加一个额外的后期事件。 我的问题是，为什么？ 我看不出它为什么要这样做的任何理由。 任何帮助表示赞赏。

Answer 1

由于您提供的代码不完整，我无法重现您的问题。 也许您可以向我们展示按钮单击事件中的placeholderElement和editViewModal(this, event) function 的脚本。

此外，在您的情况下，我们可以通过以下方式调用和显示模式。

这是一个工作演示：

Model：

public class UserView
{
    public int Id { get; set; }
    public string ViewName { get; set; }
    public string Address { get; set; }
    public string Tel { get; set; }
}

局部视图：

@model UserView

<div class="modal fade" id="edit-custom-view" tabindex="-1" role="dialog" aria-labelledby="edit-custom-view" aria-modal="true">
    <div class="modal-dialog modal-dialog-scrollable modal-lg modal-notify modal-primary" role="document">
        <div class="modal-content">
            <form id="ModalFormEditCustomView" data-action="/Home/EditCustomView" enctype="multipart/form-data">
                <div class="modal-body">
                    <div class="row">
                        <input type="text" asp-for="Id" hidden readonly />
                        <div class="col">
                            <div class="md-form form-group">
                                <label asp-for="ViewName">View Name</label>
                                <input type="text" required class="form-control" asp-for="ViewName" />
                            </div>
                            <div class="md-form form-group">
                                <label asp-for="Address">Address</label>
                                <input type="text" required class="form-control" asp-for="Address" />
                            </div>
                            <div class="md-form form-group">
                                <label asp-for="Tel">Tel</label>
                                <input type="text" required class="form-control" asp-for="Tel" />
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer justify-content-center">
                    <button type="button" data-save="edit-view" class="btn btn-info waves-effect waves-light">Update</button>
                    <button type="button" class="btn btn-secondary waves-effect waves-light" data-dismiss="modal">Close</button>
                </div><!--/modal-footer-->
            </form>
        </div>
    </div>
</div>

编辑视图：

@model UserView

<div class="row">
    <div class="col-md-4">
        <input type="hidden" asp-for="Id" />
        <div class="form-group">
            <label asp-for="ViewName" class="control-label"></label> :
            <input asp-for="ViewName" class="form-control" readonly />
        </div>
        <div class="form-group">
            <label asp-for="Address" class="control-label"></label> :
            <input asp-for="Address" class="form-control" readonly />
        </div>
        <div class="form-group">
            <label asp-for="Tel" class="control-label"></label> :
            <input asp-for="Tel" class="form-control" readonly />
        </div>
        <div class="form-group">
            <button name="btn" value="@Model.Id" class="btn btn-primary">Edit</button>
        </div>
    </div>
</div>

<div id="placeholderElement">

</div>

@section Scripts
{
    <script>

        $(".btn.btn-primary").on("click", function () {
            var id = $(this).val();
            $.ajax({
                type: "get",
                url: "/Home/EditViewModal?id=" + id,
                success: function (result) {
                    $("#placeholderElement").html(result);
                    $("#edit-custom-view").modal('show');
                }
            });
        })
        $("#placeholderElement").on('click', '[data-save="edit-view"]', function (event) {
            event.preventDefault();
            var form = $(this).parents('.modal').find('form');
            var actionUrl = form.data('action');
            var dataToSend = form.serialize();
            $.post(actionUrl, dataToSend).done(function (data) {
                $("#placeholderElement").find('.modal').modal('hide');
                $("#ViewName").val(data.viewName);
                $("#Address").val(data.address);
                $("#Tel").val(data.tel);
            });
        });
    </script>
}

Controller：

public IActionResult Edit()
{
    var model = _db.UserViews.Find(1);
    return View(model);
}

public IActionResult EditViewModal(int id)
{
    string partial = "_EditCustomView";
    var userView = _db.UserViews.Find(id);
    return PartialView(partial, userView);
}

[HttpPost]
public JsonResult EditCustomView(UserView model)
{
    var model1 = _db.UserViews.Find(model.Id);
    model1.ViewName = model.ViewName;
    model1.Address = model.Address;
    model1.Tel = model.Tel;
    _db.Update(model1);
    _db.SaveChanges();
    return Json(model1);
}

Answer 2

这个脚本位于哪里？ 如果它在部分内部，那就是导致您出现问题的原因。 每次拉入部分时，都会将一个额外的事件附加到该元素。

这将导致您所描述的行为。