2

現在、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: _コメント

@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; }
    }
}
4

2 に答える 2

9

私は PagedList nuget パッケージの作成者です。

プロジェクトの git リポジトリで Ajax ページネーション (および無限スクロール) を実行する例があります。

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

于 2012-05-14T13:44:08.550 に答える
1

ノックアウトと 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 パッケージ

于 2013-07-12T13:00:54.623 に答える