文章/答案/技术大牛

发布

社区首页 >问答首页 >如何修复表单提交错误，表单使用ASP.NET Core3.1和jQuery

问如何修复表单提交错误，表单使用ASP.NET Core3.1和jQuery
EN

Stack Overflow用户

提问于 2022-10-11 03:27:53

回答 3查看 67关注 0票数 1

我经常遇到麻烦，我希望社区能帮我。我有一个web应用程序，它是在一两年前使用带有Razor的ASP.NET Core3.1构建的，代码隐藏(C#)文件。该网站也在使用jQuery。

我遇到问题的表单是“删除项”表单。重要的是，用户在从数据库中删除项目之前确认要删除的项。在前端，我们有DeleteItem.cshtml，它有以下代码：

...

    <form id="delete-form">
        <label for="confirm-button">Step 1:  Confirm</label>
        <br />
        <button id="confirm-button"
                class="btn btn-primary"
                data-toggle="modal"
                data-target="#exampleModal">
            Yes, I am sure I want to delete these questions.
        </button>
        <br />
        <br />
        <label for="submit-button">Step 2:  Delete</label>
        <br />
        <div style="position:relative">
            <div id="submit-div"
                 style="position: absolute; left: 0; top: 0; width: 25%; height: 100%; z-index: 1000;"></div>
            <button id="submit-button" class="btn btn-primary" disabled="true">Delete</button>
        </div>
    </form>
</main>

<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">Confirmation</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                Thank you for confirming you want to delete the question or questions listed.  Please close this confirmation box, and select the delete button.
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

@section Scripts {
    <script>
        $(document).ready(function () {

            $('#delete-form').on('submit', function (e) {
                e.preventDefault();
            });

            $('#confirm-button').click(function () {
                $('#submit-button').prop('disabled', false);
            });

            $('#submit-div').click(function () { submitForm(); });

            $('#submit-button').click(function () { submitForm(); });

            function submitForm() {
                console.log('in submitForm() function');
                if ($('#submit-button').is(':disabled'))
                    alert('Please select the confirmation button before selecting the delete button.');
                else
                    deleteButtonPush();
            }

            function deleteButtonPush() {
                console.log('in deleteButtonPush() function');
                if ($('#submit-button').is(':disabled')) {
                    alert('Please selete the confirmation button first.');
                }
                else {
                    $('#submit-button').prop('disabled', true);
                    $('#submit-button').append(' <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>');
                    $('#delete-form').prop('method', 'post');
                    $('#delete-form').prop('action', 'DeleteItem?id=@Model.Item.ItemTableID');
                    $('#delete-form').submit();
                }
            }
        });
    </script>
}

为什么在单击“确认”按钮和“删除”按钮后未提交表单？我可以看到，在单击submit-button按钮后，删除按钮被禁用，并添加了旋转器。然而，这篇文章并没有发生。如何解决这个问题，以便在单击submit-button时出现post/submit？谢谢各位。

asp.net-core

razor

html

jquery

回答 3

Stack Overflow用户

回答已采纳

发布于 2022-10-13 19:59:41

所有人。感谢您的反馈。在您的帮助下，“确认”和“删除”按钮现在已正常工作。为了解决向服务器发送/提交的需要，我决定使用AJAX请求。它还没有完成，但这里有一个答案：

...

<form id="delete-form">

        <h2>Questions to be Deleted</h2>

        <p>Step 1:  Select one or more questions</p>

        @if (Model.Questions != null && Model.Questions.Count > 0)
        {
            <table class="table" summary="select one or more questions to be deleted">

              @* output table of questions w/ checkboxes to select or "unselect" each question *@

            </table>
        }

        <h2>Confirm and Delete</h2>

        <p>
            Please confirm you are sure you want to delete the question(s), reading passages, and/or science tabs,
            for the question(s) listed above.
        </p>

        <input type="hidden" name="ID" value="@Model.Item.ItemTableID" />
        <label for="confirm-button">Step 2:  Confirm</label>
        <br />
        <button type="button"
                id="confirm-button"
                class="btn btn-primary"
                data-toggle="modal"
                data-target="#exampleModal">
            Yes, I am sure I want to delete these questions.
        </button>
        <br />
        <br />
        <label for="submit-button">Step 3:  Delete</label>
        <br />
        <div style="position:relative">
            <div id="submit-div"
                 style="position: absolute; left: 0; top: 0; width: 25%; height: 100%; z-index: 1000;"></div>
            <button type="button" id="submit-button" class="btn btn-primary" disabled>Delete</button>
        </div>
        @Html.AntiForgeryToken()
    </form>
</main>

<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">Confirmation</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                Thank you for confirming you want to delete the question or questions listed.  Please close this confirmation box, and select the delete button.
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

@section Scripts {
    <script>
        $(document).ready(function () {

            $('#delete-form').on('submit', function (e) {
                if ($('#submit-button').is(':disabled')) {
                    showDeleteError();
                    e.preventDefault();
                }
                else
                    deleteButtonPush();
            });

            $('#confirm-button').click(function (e) {
                $('#submit-button').prop('disabled', false);
                e.preventDefault();
            });

            $('#submit-div').click(function () { submitForm(); });

            $('#submit-button').click(function () { submitForm(); });

            function submitForm() {
                console.log('in submitForm() function');
                if ($('#submit-button').is(':disabled'))
                    showDeleteError();
                else
                    deleteButtonPush();
            }

            function deleteButtonPush() {
                console.log('in deleteButtonPush() function');
                if ($('#submit-button').is(':disabled'))
                    showDeleteError();
                else {
                    $('#submit-button').prop('disabled', true);
                    $('#submit-button').append(' <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>');

                    let data = $('#delete-form').serialize();

                    $.ajax({
                        type: "POST",
                        data: data,
                        url: "ProcessDeletetion?handler=Delete",
                        beforeSend: function (xhr) {
                            xhr.setRequestHeader("XSRF-TOKEN",
                                $('input:hidden[name="__RequestVerificationToken"]').val());
                        },
                        success: function () {
                            console.log('ok')
                        },
                        error: function () {
                            console.log('error');
                        }
                    });
                }
            }

            function showDeleteError() {
                alert('Please select the confirmation button before selecting the delete button.');
            }
        });
    </script>
}

票数 0

Stack Overflow用户

发布于 2022-10-11 05:00:00

删除e.preventDefault()回调中的on('submit')。或者，如果要检查其他条件，可以调用$('#delete-form').submit()。

代码的问题是在调用表单上的submit方法之后，然后在submit回调中取消默认的提交行为。有关更多信息，您可以阅读此Event.preventDefault()

    // For example, you can read this code
    $(document).ready(function() {

      $('#delete-form').on('submit', function(e) {
        // Checking condition
        if (someError) {
          // some error happen, don't submit the form
          e.preventDefault();

          // then if you want to submit the form inside this block, use this
          // $("delete-form").submit();
        }
        // other things...
      });
      // ... Other things
    })

票数 1

Stack Overflow用户

发布于 2022-10-13 05:42:55

更改代码如下：

<form id="delete-form">
    <label for="confirm-button">Step 1:  Confirm</label>
    <br />
 <!--Add type="button"-->
    <button type="button" id="confirm-button"
            class="btn btn-primary"
            data-toggle="modal"
            data-target="#exampleModal">
        Yes, I am sure I want to delete these questions.
    </button>
    <br />
    <br />
    <label for="submit-button">Step 2:  Delete</label>
    <br />
    <div style="position:relative">
        <div id="submit-div"
             style="position: absolute; left: 0; top: 0; width: 25%; height: 100%; z-index: 1000;"></div>
<!--Add type="button"-->
        <button type="button" id="submit-button" class="btn btn-primary" disabled="true">Delete</button>
    </div>
</form>
</main>

<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">Confirmation</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                Thank you for confirming you want to delete the question or questions listed.  Please close this confirmation box, and select the delete button.
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

@section Scripts {
    <script>
        $(document).ready(function () {

            //$('#delete-form').on('submit', function (e) {
            //    e.preventDefault();
            //});

            $('#confirm-button').click(function () {
                $('#submit-button').prop('disabled', false);
            });

            $('#submit-div').click(function () { submitForm(); });

            $('#submit-button').click(function () { submitForm(); });

            function submitForm() {
                console.log('in submitForm() function');
                if ($('#submit-button').is(':disabled'))
                    alert('Please select the confirmation button before selecting the delete button.');
                else
                    deleteButtonPush();
            }

            function deleteButtonPush() {
                console.log('in deleteButtonPush() function');
                if ($('#submit-button').is(':disabled')) {
                    alert('Please selete the confirmation button first.');
                }
                else {
                    $('#submit-button').prop('disabled', true);
                    $('#submit-button').append(' <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>');
                    $('#delete-form').prop('method', 'post');
                    $('#delete-form').prop('action', 'DeleteItem?id=@Model.Item.ItemTableID');
                    $('#delete-form').submit();
                }
            }
        });
    </script>
}

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/74022643

复制

相似问题

问如何修复表单提交错误，表单使用ASP.NET Core3.1和jQuery
EN

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何修复表单提交错误，表单使用ASP.NET Core3.1和jQueryEN

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何修复表单提交错误，表单使用ASP.NET Core3.1和jQuery
EN