Ajax request called mutiple times in mvc

Question

Whenever I tried to render partial view on bootstrap modal, the ajax request which is rendering the partial view is getting called multiple times. I am making ajax request on button click which is on the Main view.

Main View :- While rendering the main view I have rendered the partial view also like below

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

and this is the button which is on main view rendering the partial view in modal

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

In partial view I have written the below code. On bootstrap modal show event I am calling SurveyPreview(js function) written in partial view.

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

And in SurveyPreview function I am making ajax request as follows

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

And from SurveyPreview controller method I am returning the same partial view with model and appending the results to modal body.

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

Lets I clicked on button for the first time, then modal is getting opened and after closing and re-opening it the ajax request made twice, then again closing and re-opening ajax request made thrice. Every time the counter is getting increased

Also I have Next/Prev buttons on partial view which is rendering the same partial view.

Is the correct sequence of events happening here ? Or am I missing something here ?

Any help on this appreciated !

Darin Dimitrov · Accepted Answer · 2017-02-20 13:28:47Z

You are attaching multiple click handlers to the button, every time you make an AJAX request. I would recommend you moving this javascript outside your partial view so that it gets executed only once. For example you could put it inside the main view:

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

and of course inside your partial you could put a <div> that will contain the total pages based on the view model:

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

@Daring Dimitrov. the reason to include javascript in partial view itself, to reuse the same partial view on other views, So i do not need to write it on each view. I didn't get you point of how I am attaching the multiple click event handlers to the button as this is on main view ?
Yes, but you wrote javascript code that subscribe to the click event of this button. And you placed this javascript code inside the partial. And when you reload your partial using AJAX, this javascript code executes again and it attaches one more click handler to the button. And so on. Also you can reuse the partial, it's just that the javascript should not be placed inside it. It is very bad practice to put javascript code in partial views. Also if you want to reuse the javascript simply put it in a separate js file. Then simply include this js file in every view that needs it.
ok so using data-target and data-modal on button will treat it as onclick event of button ?
can't this be achieved by keeping the js code inside partial view ?

Collectives™ on Stack Overflow

Ajax request called mutiple times in mvc

1 Answer 1

4 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Related