如何將我的分頁功能轉換爲使用AJAX Insead？

Question

我目前有分頁工作在我的MVC 3項目中使用PagedList庫（https://github.com/TroyGoode/PagedList）。

我想將此代碼轉換爲使用ajax更新頁面，而不是刷新整個頁面。我真的不知道該怎麼去做。我相當陌生，來自Webforms的MVC。任何幫助將不勝感激！

繼承人我的代碼：

首頁控制器：

//##################################### 
// ActionResult = Retrieve Comments 
//##################################### 
[ChildActionOnly] 
public ActionResult _Comments(int ProductID, int? Page) 
{ 
    //Perform the Database Query. 
    try 
    { 
     //SQL Query - Get * records 
     var Model = from r in DB.Comments where r.ProductID == ProductID select r; 

     //Page number passed in via url. Default to 1 if not specified. 
     var PageNumber = Page ?? 1; 

     //Grab 6 results from the result set. 
     var Results = Model.ToPagedList(PageNumber, 6); 

     //Store Paged Result set in ViewBag for Paging. 
     ViewBag.Results = Results; 

     //Store in ViewBag for display (Page 1 of 43) 
     ViewBag.PageNumber = PageNumber; 

     //Get Total Pages: Divide Total Records by 6 Records per page. 
     ViewBag.PageCount = Model.Count()/6 + 1; 

     //Return Records to my view. 
     return PartialView(Results); 
    } 
    //There was an error. 
    catch 
    { 
     //ViewBag.ErrorMessage = ex; 
     return PartialView("Error"); 
    } 
} 

PartialView：_comments

@model IEnumerable<DH.Models.Comment> 

@using PagedList.Mvc; 
@using PagedList; 

@{ 
    //No Comments Yet 
    if (@Model.Count() == 0) 
    { 
     <div id="CommentStatus">Be the first to comment on this product!</div> 
    } 
    //There are comments! 
    else 
    { 
     foreach (var item in Model) 
     { 
      //html for writing out the comments... 
     } 
    } 
} 

<div>Page @ViewBag.PageNumber of @ViewBag.PageCount</div> 

@Html.PagedListPager((IPagedList)ViewBag.Results, Page => Url.Action("Index", new { Page = Page }), new PagedListRenderOptions { LinkToPreviousPageFormat = "< Prev", LinkToNextPageFormat = "Next >", LinkToLastPageFormat = "&Uacute;ltima >>" }) 

型號

namespace DH.Models 
{ 
    public class Comment 
    { 
     public int CommentID { get; set; } 

     public int ProductID { get; set; } 

     public string Author { get; set; } 

     public string Message { get; set; } 

     public DateTime MessageDate { get; set; } 

     public int ThumbsUp { get; set; } 

     public int ThumbsDown { get; set; } 

     public string IP { get; set; } 
    } 
} 

Answer 1

我是PagedList NuGet包的創造者。

有做的Ajax分頁的項目的git倉庫的例子（以及無限滾動）：

https://github.com/TroyGoode/PagedList/tree/master/src/PagedList.Mvc4.Example

控制器： https://github.com/TroyGoode/PagedList/blob/master/src/PagedList.Mvc4.Example/Controllers/AjaxController.cs

查看： https://github.com/TroyGoode/PagedList/blob/master/src/PagedList.Mvc4.Example/Views/Ajax/Index.cshtml

Answer 2

你可以很容易地敲除和pagedlist包做

<script type="text/javascript"> 
$(function() { 
    $('#users').pagify({ 
     dataUrl: '/User/UserLisr', 
     callBack: function(){ 
      // Ajax remove preloader and some other callbacks 
     }, 
     beforeSend: function(){ 
      // Ajax show preloader and some other function before start 
     } 
    }); 
} 
</script> 

pagify.mvc package

Answer 3

我對特洛伊的例子遺憾是如此繁瑣，可以在簡單的HTML不基地helper.I採用以下問題的接受的答案，它運作良好： Using paging in partial view, asp.net mvc