0
我試圖構建ASP.NET MVC分頁系統;部分查看搜索表單，顯示數據的表格和分頁。我擁有這一切奠定了它還挺作品。我不是很好用jQuery，所以我真的不知道我要去的地方錯這個......後AJAX和後重新綁定jQuery的事件，jQuery的不再起作用
發帖時使用AJAX，分頁停止更新用戶界面後工作。我使用名爲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>
}
Before ajax call
After ajax call
這不會解決您的具體問題，但我注意到，你沒有做任何事要傳遞到參數nextPage（）函數，因爲nextPage（）甚至沒有定義任何參數。通過在您的NextEvent函數定義中定義，該參數錯位。 – mhodges
調試包含這種服務器端代碼的JavaScript非常困難。請包括一個呈現代碼的例子。 –
另外，爲什麼在成功的ajax調用之後重新綁定事件？這將爲每個匹配的元素創建第二個事件處理程序。 – mhodges