在mvc中多次调用Ajax请求
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.
每当我尝试在bootstrap模式上渲染局部视图时,渲染局部视图的ajax请求就会被多次调用。我在主视图上的按钮单击时发出ajax请求。
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">
×
</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.
在局部视图中,我编写了以下代码。在bootstrap模态show事件中,我调用在局部视图中编写的SurveyPreview(js函数)。
@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
在SurveyPreview函数中,我正在制作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 () {
});
}
And from SurveyPreview controller method I am returning the same partial view with model and appending the results to modal body.
从SurveyPreview控制器方法我返回与模型相同的局部视图,并将结果附加到模态体。
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
让我第一次点击按钮,然后模态打开,关闭后重新打开它,两次ajax请求,然后再次关闭并重新打开ajax请求三次。每次计数器都增加
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 !
对此有任何帮助表示赞赏!
1 个解决方案
#1
1
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:
每次发出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>
and of course inside your partial you could put a <div>
that will contain the total pages based on the view model:
当然在你的局部内你可以放一个
,它将包含基于视图模型的总页数:更多相关文章
- 儿童视图不在angular-ui-router中工作
- HTML中使用Ajax进行局部刷新页面
- 网页局部打印
- 可以将Eclipse配置为防止某些警告出现在Problems视图窗格中吗?
- 在Codeigniter中将javascript变量从视图发送到控制器[重复]
- 在php项目中, mysql视图常用吗?
- [CI]CodeIgniter视图 & 模型 & 控制器
- 在CodeIgniter中包含视图的最佳方法。
- 如何使用mysqldump在帐户之间复制视图?