Запрос Ajax, называемый mutiple times in mvc

Question

Всякий раз, когда я пытался отобразить частичный вид на bootstrap modal, запрос ajax, который представляет частичный вид, вызывается несколько раз. Я делаю запрос ajax при нажатии кнопки, который находится в главном представлении.

Main Вид: - Оказывая основной вид я вынесший частичный вид также как ниже

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

На частичном изображении я написал нижеприведенный код. На bootstrap modal 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); 
} 

Позволяет я нажал на кнопку в первый раз, то модальный становится открыт и после закрытия и повторного открытия его запрос Аякса сделал дважды, а затем снова закрыть и запрос на повторное открытие Аякса сделал трижды. Каждый раз, когда счетчик увеличивается,

Также у меня есть кнопки 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>