【发布时间】：2017-01-18 00:55:20
【问题描述】：
我正在尝试为 ASP.NET MVC 构建分页系统；带有搜索表单的部分视图、显示数据的表格和分页。我已经把这一切都安排好了，它有点有效。我对 jQuery 不是很好，所以我真的不确定我哪里出了问题......
当我使用 AJAX 发布时，更新 UI 后分页停止工作。我使用一个名为bindAllEvents() 的函数重新绑定了我的jQuery 事件，但它似乎并没有真正重新绑定我的事件。我的模型在第一次调用后更新，第二次尝试使用“下一个”> 链接移动到下一页调用我的控制器操作方法，但 UI 中没有任何变化。
jQuery：
$(document).ready(function() {
bindAllEvents();
});
function pageEvent() {
this.goToPage = function() {
// Not yet implemented
return false;
}
}
function nextEvent(nextPage) {
this.nextPage = function() {
var url = '@Url.Action("Manage")'
var data = @Html.Raw(Json.Encode(Model.Data));
var categories = @Html.Raw(Json.Encode(Model.Categories));
var _page = @ (Model.pager.CurrentPage + 1);
var _model = {
Data: data,
Categories: categories,
};
$.ajax({
type: "POST",
contentType: "application/json; charset=utf-8",
url: url,
data: JSON.stringify({
model: _model,
page: _page
}),
success: function(result) {
//console.log("Success " + result);
$('div[id="pagination"]').html($(result).find('div[id="pagination"]'));
$('div[id="full-table"]').html($(result).find('div[id="full-table"]'));
$('div[id="search-form"]').html($(result).find('div[id="search-form"]'));
bindAllEvents();
},
error: function(result) {
console.log("Error: " + result.responseText);
}
});
}
}
function bindAllEvents() {
$('#date-boxes').slideUp(1);
// Have also tried $('body').on('click', '#next', ...) with no success
$('div[id="pagination"]').on('click', '#next', function(e) {
e.preventDefault();
var onNextClickEvent = new nextEvent();
onNextClickEvent.nextPage(@(Model.pager.CurrentPage + 1));
});
$("a[name='page-number']").on("click", function(e) {
e.preventDefault();
var onPageClick = new pageEvent();
onPageClickEvent.goToPage($(this).attr('id'));
});
}
分页部分视图的HTML如下
@if (Model.EndPage > 1)
{
<div style="color:#337AB7; padding-bottom: 0px;" id="page-counter">Page @Model.CurrentPage of @Model.TotalPages</div>
<ul class="pagination">
@if (Model.CurrentPage > 1)
{
<li>
@Html.ActionLink("<<", "Manage", null, new { id = "first" })
</li>
<li>
@Html.ActionLink("<", "Manage", null, new { id = "prev" })
</li>
}
@for (var _page = Model.StartPage; _page < Model.EndPage + 1; _page++)
{
<li class="@(_page == Model.CurrentPage ? "active" : "")">
@Html.ActionLink(_page.ToString(), "Manage", null, new { name = "page-number", id = _page })
</li>
}
@if (Model.CurrentPage < Model.TotalPages)
{
<li>
@Html.ActionLink(">", "Manage", "Announcements", null, new { id = "next" })
</li>
<li>
@Html.ActionLink(">>", "Manage", null, new { id = "last" })
</li>
}
</ul>
}
为了完整起见，我将包含部分视图的视图，但我认为这不是必需的。
<div id="search-form">
@{ Html.RenderPartial("_SearchForm", Model.Categories); }
</div>
<hr />
@if (Model.Data.Count == 0)
{
<h2>No existing announcements.</h2>
}
else
{
<div class="form-group" id="full-table">
@{ Html.RenderPartial("_Manage-AncmtListing", Model.Data); }
</div>
<br />
<div id="pagination">
@{ Html.RenderPartial("_Pager", Model.pager); }
</div>
}
【问题讨论】：
-
这不会解决您的确切问题，但我注意到您没有对传递给 nextPage() 函数的参数做任何事情，因为 nextPage() 甚至没有任何定义的参数。该参数因在 NextEvent 函数定义中定义而放错了位置。
-
调试包含这样的服务器端代码的 JavaScript 异常困难。请附上渲染代码的示例。
-
另外，为什么在成功调用 ajax 后重新绑定事件？这将为每个匹配的元素创建第二个事件处理程序。
-
@MikeMcCaughan：您的意思是在 ajax 帖子之后呈现的 HTML 吗？
-
@mhodges：不太确定，目前只是在黑暗中拍摄。
标签： c# jquery ajax asp.net-mvc pagination