Razor Pages中Modal表单提交后如何阻止整页重载并保留编辑页内容

问题场景 #

我有一个如下所示的编辑页面：

页面中设有评论按钮，点击后会弹出Modal表单，用户可在表单内提交评论：

遇到的问题 #

提交评论表单时会触发整页重载，导致编辑页面已输入的内容丢失。编辑页内容表单和评论框表单是两个独立的表单，我希望实现提交评论表单后，Modal保持打开状态，同时编辑页的内容不会被清空。

初始Modal代码 #

<div class="modal modal_outer right_modal fade" id="information_modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel2">
<div class="modal-dialog" role="document">
    <div class="modal-content ">
        <div class="modal-header bg-warning" style="height:50px;padding:10px 5px;font-family:'Delivery';">
            <h4 class="modal-title">Comments:</h4>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
            </button>
        </div>
        <div class="modal-body get_quote_view_modal_body">
            <div class="list-group">
                <a href="#" class="list-group-item list-group-item-action">
                    <div class="d-flex w-100">
                        <h5><i class="fas fa-user"></i>&nbsp; User 1</h5>
                        <small class="ml-auto">1 days ago</small>
                    </div>
                    <p>This is for testing.Please ignore this.</p>
                </a>
            </div>
            <form asp-page-handler="SubmitChat">
                <div class="form-group mt-2">
                    <label for="TxtAreaChatBox"><b>Leave Your Comments</b></label>
                    <textarea asp-for="RequestChatBox.Comments" class="form-control" id="TxtAreaChatBox" rows="4"></textarea>
                    <input id="hdnCommentReqID" type="hidden" asp-for="RequestChatBox.RequestID" value='@Request.Query["RequestID"]' />
                </div>
                <div class="modal-footer">
                    <button type="reset" class="btn btn-danger" data-dismiss="modal"><i class="fas fa-window-close mr-2"></i> Cancel</button>
                    <button type="submit" class="btn btn-primary">Submit</button>
                </div>
            </form>
        </div>
    </div>
</div>

修改后Modal代码 #

<!---COMMENT BOX STARTS HERE-->
<div class="modal modal_outer right_modal fade" id="information_modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel2">
    <div class="modal-dialog" role="document">
        <div class="modal-content ">
            <div class="modal-header bg-warning" style="height:50px;padding:10px 5px;font-family:'Delivery';">
                <h4 class="modal-title">Comments:</h4>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body get_quote_view_modal_body">
                <div class="list-group">
                    @if (Model.ShowRequestChatBox != null){
                    @foreach (var item in Model.ShowRequestChatBox)
                        {
                    <a href="#" class="list-group-item list-group-item-action">
                        <div class="d-flex w-100">
                            <h6><i class="fas fa-user"></i>&nbsp; <i>@Html.DisplayFor(modelItem => item.CommentedUser)</i></h6>
                            <small class="ml-auto">@Html.DisplayFor(modelItem => item.LastModifiedTimeStamp)</small>
                        </div>
                        <p>@Html.DisplayFor(modelItem => item.Comments)</p>
                    </a>
                        }
                    }
                </div>
                <form asp-page-handler="SubmitChat" data-ajax="true" data-ajax-method="post" data-ajax-complete="Completed">
                    <div class="form-group mt-2">
                        <label for="TxtAreaChatBox"><b>Leave Your Comments</b></label>
                        <textarea asp-for="RequestChatBox.Comments" class="form-control" id="TxtAreaChatBox" rows="4"></textarea>
                        <input id="hdnCommentReqID" type="hidden" asp-for="RequestChatBox.RequestID" value='@Request.Query["RequestID"]' />
                    </div>
                    <div class="modal-footer">
                        <button type="reset" class="btn btn-danger" data-dismiss="modal"><i class="fas fa-window-close mr-2"></i> Cancel</button>
                        <button type="submit" id="BtnChatSubmit" class="btn btn-primary">Submit</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
<!--COMMENT BOX ENDS HERE-->

配套JavaScript代码 #

function Completed(event) {
        if (event.responseText != "") {
            alert("Some Error Has Occured.Please Check Your Entered Values.");
            
        } else {
            alert("Your Comment Has Been Added Successfully");
            
        }            
    }

内容的提问来源于stack exchange，提问作者Teena