如何转换我的分页功能以使用AJAX Insead?

时间:2012-05-11 23:34:48

标签: c# asp.net asp.net-mvc-3 pagination

我目前使用PagedList库(https://github.com/TroyGoode/PagedList)在我的MVC 3项目中进行分页。

我想转换此代码以使用带有新结果的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; }
    }
}

3 个答案:

答案 0 :(得分:9)

答案 1 :(得分:1)

您可以使用knockout和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

答案 2 :(得分:0)

我很抱歉Troy的例子非常繁琐,不能以简单的html帮助为基础。我采用了以下问题的接受答案,并且效果很好: Using paging in partial view, asp.net mvc