在 mvc 中多次调用 Ajax 请求

Question

每当我尝试在引导模式上渲染部分视图时，渲染部分视图的 ajax 请求都会被多次调用。我在主视图上单击按钮时发出 ajax 请求。

主视图 :- 在渲染主视图时，我也渲染了部分视图，如下所示

<div class="modal fade" id="surveyPreviewModal" data-backdrop="static" data-keyboard="false" tabindex="-1" role="dialog" aria-labelledby="surveyPreviewLabel" aria-hidden="true">
    <div class="modal-lg modal-dialog">
        <div class="modal-content" id="surveyPreviewContent">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                    &times;
                </button>
                <h4 class="modal-title" id="surveyPreviewLabel">Survey Preview</h4>

            </div>
            <div class="modal-body" id="surveyPreviewBody">
                @Html.Partial("_SurveyPreview",new LMS_TraineeSurveyPaginationViewModel())
            </div>
        </div>
    </div>
</div>

这是在主视图上以模态呈现部分视图的按钮

<button id="btnSurveyPreview" class="btn btn-primary" data-toggle="modal" data-target="#surveyPreviewModal" data-surveyID="@ViewBag.SurveyID">
Survey Preview
</button>

在部分视图中，我编写了以下代码。在引导模式 show 事件上，我正在调用 SurveyPreview(js function) 以部分视图编写。

@model LMS_TraineeSurveyPaginationViewModel
$(document).ready(function () {

    $('#surveyPreviewModal').on('show.bs.modal', function (e) {

        surveyID = $(e.relatedTarget).attr('data-surveyID');

        SurveyPreview(@SurveyPageTypePageNumber.StartPage,null);

    });
})

在SurveyPreview function 中，我提出如下ajax 请求

function SurveyPreview(page,btnID) {

   ....Get SurveyID and page code.....

 $.post('@Url.Action("SurveyPreview", "Survey")', { SurveyID : surveyID, page : page },
             function (data) {

                 $('#surveyPreviewBody').html('');
                 $('#surveyPreviewBody').html(data);

                 SetProgressBar(page,'@(Model==null?0: Model.Pager.TotalPages)');

             }).fail(function () {
                 alert("error in GetTraineeSurvey");
             }).success(function () {

             });
}

从 SurveyPreview 控制器方法我返回与模型相同的局部视图并将结果附加到模态体。

public PartialViewResult SurveyPreview(int SurveyID, int page)
{
--- some code--
return PartialView("_SurveyPreview", viewModel);
}

让我第一次点击按钮，然后模式被打开，在关闭并重新打开它之后，ajax 请求发出了两次，然后再次关闭并重新打开了 ajax 请求三次。每次计数器增加时

我在局部视图上也有 Next/Prev 按钮，它呈现相同的局部视图。

这里发生的事件顺序是否正确？或者我错过了什么 在这里？

对此的任何帮助表示赞赏！

Answer 1

每次发出 AJAX 请求时，您都会将多个单击处理程序附加到按钮。我建议您将此 javascript 移出 您的局部视图，以便它只执行一次。例如，您可以将其放在主视图中：

<script>
    $(document).ready(function () {
        $('#surveyPreviewModal').on('show.bs.modal', function (e) {
            surveyID = $(e.relatedTarget).attr('data-surveyID');
            SurveyPreview(@SurveyPageTypePageNumber.StartPage, null);
        });
    });

    function SurveyPreview(page, btnID) {

        ....Get SurveyID and page code.....

        $.post('@Url.Action("SurveyPreview", "Survey")', { SurveyID : surveyID, page : page },
             function (data) {
                 $('#surveyPreviewBody').html(data);
                 var totalPages = $('#totalPages').attr('data-pages');
                 SetProgressBar(page, totalPages);
             }).fail(function () {
                 alert("error in GetTraineeSurvey");
             }).success(function () {
        });
    }
</script>

当然，在您的部分中，您可以放置​​一个<div>，它将包含基于视图模型的总页数：

<span id="totalPages" data-pages="@(Model==null ? 0 : Model.Pager.TotalPages)"></span>