我正在尝试为ASP.NET MVC构建一个分页系统;包含搜索表单的部分视图，显示数据的表格以及分页。我把它全部布局了，有点有效。我对jQuery不是很了解，所以我真的不确定我在哪里出错......
当我使用AJAX发布时，分页在更新UI后停止工作。我使用一个名为bindAllEvents()的函数重新绑定我的jQuery事件，但它似乎并没有实际重新绑定我的事件。我的模型在第一次调用后更新，第二次尝试使用＆＃34; next＆＃34;移动到下一页。 >链接调用我的控制器操作方法，但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>
}
答案 0 :(得分：0)
好的，所以如果不完全重构你的代码，我就会把它变成一个类似于你的代码的工作状态。您可能需要调整页面初始设置的方式，但这个想法适合您。您的主要问题是您没有更新或将下一页编号传递给您的函数，因此它每次都重复使用相同的页码或使用undefined。有一些小的改动，所以要密切注意以下代码：
'use strict';
$(document).ready(function() {
bindAllEvents();
});
function nextEvent() {
this.nextPage = function(page) {
var url = '/Announcements/Manage'
var data = [{"WATypeName":"Web Announcements","Categories":[{"ID":6,"Name":"Physician/Medical","IsSelected":true}],"WAID":1,"WADate":"\/Date(1460959200000)\/","WANum":"1123","Topic":"Online Provider Enrollment Summary Page Updated","Link":"web_announcement_1123_20160418.pdf","ToolTip":"Online Provider Enrollment Summary Page Updated","WATypeID":1},{"WATypeName":"Web Announcements","Categories":[{"ID":11,"Name":"All Providers","IsSelected":true}],"WAID":2,"WADate":"\/Date(1460613600000)\/","WANum":"1122","Topic":"Providers Invited to Complete Health Information Exchange Small Business Impact Questionnaire by April 22, 2016","Link":"web_announcement_1122_20160414.pdf","ToolTip":"Providers Invited to Complete Health Information Exchange Small Business Impact Questionnaire by April 22, 2016","WATypeID":1},{"WATypeName":"Web Announcements","Categories":[{"ID":8,"Name":"Durable Medical Equipment (DME)","IsSelected":true}],"WAID":3,"WADate":"\/Date(1460613600000)\/","WANum":"1121","Topic":"Attention Provider Type 12: Claims for CPT Codes with Age Restrictions Will Be Enforced","Link":"web_announcement_1121_20160414.pdf","ToolTip":"Attention Provider Type 12: Claims for CPT Codes with Age Restrictions Will Be Enforced","WATypeID":1},{"WATypeName":"Web Announcements","Categories":[{"ID":4,"Name":"Dental/Orthodontia","IsSelected":true}],"WAID":4,"WADate":"\/Date(1460527200000)\/","WANum":"1120","Topic":"Attention Provider Types 24 and 77: Radiology Codes Billable Effective January 1, 2016","Link":"web_announcement_1120_20160413.pdf","ToolTip":"Attention Provider Types 24 and 77: Radiology Codes Billable Effective January 1, 2016","WATypeID":1},{"WATypeName":"Web Announcements","Categories":[{"ID":2,"Name":"Outpatient","IsSelected":true},{"ID":6,"Name":"Physician/Medical","IsSelected":true}],"WAID":5,"WADate":"\/Date(1460527200000)\/","WANum":"1119","Topic":"Attention Provider Type 75: Rates for Psychiatric/Substance Abuse Services Updated","Link":"web_announcement_1119_20160413.pdf","ToolTip":"Attention Provider Type 75: Rates for Psychiatric/Substance Abuse Services Updated","WATypeID":1},{"WATypeName":"Web Announcements","Categories":[{"ID":11,"Name":"All Providers","IsSelected":true}],"WAID":6,"WADate":"\/Date(1460354400000)\/","WANum":"1118","Topic":"EDI Medicare Crossover Claims Notification","Link":"web_announcement_1118_20160411.pdf","ToolTip":"EDI Medicare Crossover Claims Notification","WATypeID":1},{"WATypeName":"Web Announcements","Categories":[{"ID":6,"Name":"Physician/Medical","IsSelected":true}],"WAID":7,"WADate":"\/Date(1460095200000)\/","WANum":"1117","Topic":"Claims for ICD-10 “Z” Codes and “O09” Codes Billed as the Primary/Principal/First-Listed Diagnosis That Denied Inappropriately Will Be Reprocessed (Updated April 14, 2016)","Link":"web_announcement_1117_20160408.pdf","ToolTip":"Claims for ICD-10 “Z” Codes and “O09” Codes Billed as the Primary/Principal/First-Listed Diagnosis That Denied Inappropriately Will Be Reprocessed (Updated April 14, 2016)","WATypeID":1},{"WATypeName":"Web Announcements","Categories":[{"ID":11,"Name":"All Providers","IsSelected":true}],"WAID":8,"WADate":"\/Date(1460095200000)\/","WANum":"1116","Topic":"Medicaid Services Manual Chapters 400, 600 and 1900 Updated","Link":"web_announcement_1116_20160408.pdf","ToolTip":"Medicaid Services Manual Chapters 400, 600 and 1900 Updated","WATypeID":1},{"WATypeName":"Web Announcements","Categories":[{"ID":11,"Name":"All Providers","IsSelected":true}],"WAID":9,"WADate":"\/Date(1460008800000)\/","WANum":"1115","Topic":"Attention Provider Types 23 and 76: Procedure Codes Updated in MMIS","Link":"web_announcement_1115_20160407.pdf","ToolTip":"Attention Provider Types 23 and 76: Procedure Codes Updated in MMIS","WATypeID":1},{"WATypeName":"Web Announcements","Categories":[{"ID":1,"Name":"Inpatient","IsSelected":true},{"ID":2,"Name":"Outpatient","IsSelected":true}],"WAID":10,"WADate":"\/Date(1459922400000)\/","WANum":"1114","Topic":"Attention Provider Types 30 and 83: Service Plans Will No Longer Be Faxed to Providers","Link":"web_announcement_1114_20160406.pdf","ToolTip":"Attention Provider Types 30 and 83: Service Plans Will No Longer Be Faxed to Providers","WATypeID":1}];
var categories = [{"ID":1,"Name":"Inpatient","IsSelected":false},{"ID":2,"Name":"Outpatient","IsSelected":false},{"ID":3,"Name":"Pharmacy","IsSelected":false},{"ID":4,"Name":"Dental/Orthodontia","IsSelected":false},{"ID":5,"Name":"Vision","IsSelected":false},{"ID":6,"Name":"Physician/Medical","IsSelected":false},{"ID":7,"Name":"Personal Care Services (PCS)","IsSelected":false},{"ID":8,"Name":"Durable Medical Equipment (DME)","IsSelected":false},{"ID":9,"Name":"Behavioral Health","IsSelected":false},{"ID":10,"Name":"Waiver Providers","IsSelected":false},{"ID":11,"Name":"All Providers","IsSelected":false}];
var _page = page;
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#pagination').html($(result).find('div#pagination'));
$('div#full-table').html($(result).find('div#full-table'));
$('div#search-form').html($(result).find('div#search-form'));
_page = parseInt(_page) + 1;
bindAllEvents(_page);
},
error: function(result) { console.log("Error: " + result.responseText); }
});
}
}
function bindAllEvents(page) {
$('#date-boxes').slideUp(1);
$('div#pagination').off('click.pagination');
$('div#pagination').on('click.pagination', '#next', function (e) {
e.preventDefault();
var onNextClickEvent = new nextEvent();
onNextClickEvent.nextPage(page || 2);
});
$("a[name='page-number']").off("click.pagination");
$("a[name='page-number']").on("click.pagination", function(e) {
e.preventDefault();
var onPageClick = new pageEvent();
onPageClickEvent.goToPage($(this).attr('id'));
});
}