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

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

这是我的局部视图的代码

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

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

这是我的控制器

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

---

因此，当我单击submit时，ajax函数被触发以提交数据，并且模式关闭。如果在不刷新页面的情况下再次编辑同一项，则表单将提交两次，以此类推，每次都会添加一个额外的post事件。我的问题是，为什么？我看不出它为什么会这样做。非常感谢您的帮助。

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

---

这将导致您描述的行为。

我无法重现您的问题，因为您提供的代码不完整。也许您可以在按钮单击事件中向我们显示

占位符元素

和

editViewModal（此事件）

函数的脚本

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

下面是一个工作演示：

型号：

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

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

局部视图：

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

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

---

占位符元素是如何设置的？为此，脚本确实位于局部视图中。感谢您花时间制作此脚本并帮助解决此问题。事实证明，是部分视图中的脚本导致了问题。