0

asp.netmvcのグリッドまたはwebgridにajaxページングを接続する方法を知っています。しかし、テーブルグリッド外の別の形式の大きなデータセットにカスタムページングを使用して、ajaxページングを実行するにはどうすればよいですか。

mvcヘルパーまたはmvc.pagedlistを使用してそれも可能ですか？

私は以前Webformsの担当者でしたが、リストビューを簡単に接続して、divを使用して個々のアイテムに必要なレイアウトを作成し、データページを接続してすべてを更新パネルにラップすることができました。

基本的に、ajaxを介してページングできるアイテムのリストが必要ですが、データセットが大きい場合は、すべてのアイテムをプルダウンしてjqueryを介してページングできるため、サーバー側でカスタムページングを実行し、特定のページ。

4

3 に答える 3

2

部分的なビューといくつかのajaxを再利用することで、これはMVCで非常に簡単に実行できます。

このモデルをプロパティとしてページのViewModelに追加して、ページネーションを処理します。

namespace Models.ViewModels
{    
    [Serializable()]
    public class PagingInfoViewModel
    {

        public int TotalItems { get; set; }
        public int ResultsPerPage { get; set; }
        public int CurrentPage { get; set; }
        public int TotalPages {
            get { return Convert.ToInt32(Math.Ceiling(Convert.ToDecimal(this.TotalItems) / this.ResultsPerPage)); }
        }
        public string LinkTextShowMore { get; set; }
        public string LinkTextShowingAll { get; set; }
        /// <summary>
        /// Paging url used by the jQuery Ajax function
        /// </summary>
        public string UrlGetMore { get; set; }

        public PagingInfoViewModel(string linkTextShowMore, string linkTextShowingAll, int resultsPerPage)
        {
            this.LinkTextShowMore = linkTextShowMore;
            this.LinkTextShowingAll = linkTextShowingAll;
            this.ResultsPerPage = resultsPerPage;
        }
    }
}

ページネーションを処理するには、部分ビューに次のコードを追加します。

    //Start Pagination
    //determine the value for the X for "Showing X of Y"
    {
        int currentTotal = 0;
        if ((Model.PagingInfo.CurrentPage * Model.PagingInfo.ResultsPerPage) < Model.PagingInfo.TotalItems) {
            //the current max item we are displaying is less than the total number of policies
            //display the current max item index\
            currentTotal = Model.PagingInfo.CurrentPage * Model.PagingInfo.ResultsPerPage;
        } else {
            //the current is greater than the total number of policies
            //display the total number of policies
            currentTotal = Model.PagingInfo.TotalItems;
        }
        if (Model.PagingInfo.TotalPages == 0 || Model.PagingInfo.CurrentPage == Model.PagingInfo.TotalPages) 
{
        @<li>
            <h3>@Model.PagingInfo.LinkTextShowingAll</h3>
            <p><strong>Showing @currentTotal Of @Model.PagingInfo.TotalItems</strong></p>
        </li>

        } else {
        @<li id="GetMore">
                <a href="#" id="lnkGetMore">
                    <h3>@Model.PagingInfo.LinkTextShowMore</h3>
                    <p><strong>Showing @(currentTotal) Of @Model.PagingInfo.TotalItems</strong></p>
                </a> 
        </li>
        @<script type="text/javascript"  lang="javascript">
             $('#lnkGetMore').click(function () {
                 $.ajax({
                     url: "@Model.PagingInfo.UrlGetMore",
                     success: function (data) {
                         $('#ProducerList li:last').remove();
                         $('#ProducerList').append(data);
                         $('#ProducerList').listview('refresh');
                     }
                 });
                 return false;
             });
        </script>
        }
    }

現在、最後のjavascriptは、ulとliを使用するUI専用ですが、ニーズに合わせて簡単にカスタマイズできます。

このUrlGetMoreプロパティは、モデルがビューに渡されるときにバックエンドで設定されます。これを行うには、もっとエレガントな方法があると確信しています。これが私が使用したコードです：

//build paging url used by the jQuery Ajax function
view.PagingInfo.UrlGetMore == Url.RouteUrl("RouteItemList", new { page = view.PagingInfo.CurrentPage + 1 })

そして最後に、最初のビューと後続の部分ビューの両方を処理するアクションがあります（ajax呼び出し）

public ActionResult List(UserModel user, ViewModel view, int page = 1)
{

    IQueryable<model> models = this.RetrieveModels(user, view);

    if ((models != null) && models.Count > 0) {
        view.PagingInfo.CurrentPage = page;
        view.PagingInfo.ResultsPerPage = user.Preferences.ResultsPerPage;
        view.PagingInfo.TotalItems = models.Count;

        view.items = models.Skip((page - 1) * user.Preferences.ResultsPerPage).Take(user.Preferences.ResultsPerPage).ToList();

        //build paging url used by the jQuery Ajax function
        view.PagingInfo.UrlGetMore = Url.RouteUrl("RouteList", new { page = view.PagingInfo.CurrentPage + 1 });
    }


    if (page == 1) {
        return View(view);
    } else {
        return PartialView("ListPartial", view);
    }

}

HTH。

于 2012-10-25T22:13:59.037 に答える
2

これに似た単純なHtmlHelperを作成できます。

public static class HtmlPaginHelper
{        
    public static MvcHtmlString PagerNoLastPage(this AjaxHelper ajaxHelper,
                                                int page,
                                                int pageSize,
                                                bool isLastPage,
                                                Func<int, string> pageUrl,
                                                Func<int, AjaxOptions> pageAjaxOptions)
    {
        var result = new StringBuilder();

        var firstPageAnchor = new TagBuilder("a");
        firstPageAnchor.SetInnerText("<<");

        var prevPageAnchor = new TagBuilder("a");
        prevPageAnchor.SetInnerText("<");

        var nextPageAnchor = new TagBuilder("a");
        nextPageAnchor.SetInnerText(">");

        var currentPageText = new TagBuilder("span");
        currentPageText.SetInnerText(string.Format("Page: {0}", page));

        if (page > 1)
        {
            firstPageAnchor.MergeAttribute("href", pageUrl(1));
            firstPageAnchor.MergeAttributes(pageAjaxOptions(1).ToUnobtrusiveHtmlAttributes());

            prevPageAnchor.MergeAttribute("href", pageUrl(page - 1));
            prevPageAnchor.MergeAttributes(pageAjaxOptions(page - 1).ToUnobtrusiveHtmlAttributes());
        }
        if (!isLastPage)
        {
            nextPageAnchor.MergeAttribute("href", pageUrl(page + 1));
            nextPageAnchor.MergeAttributes(pageAjaxOptions(page + 1).ToUnobtrusiveHtmlAttributes());
        }

        result.Append(firstPageAnchor);
        result.Append(prevPageAnchor);
        result.Append(currentPageText);
        result.Append(nextPageAnchor);

        return MvcHtmlString.Create(result.ToString());
    }
}

...そしてそれをRazorビューで使用します：

グリッドの結果はここに表示されます...

@Ajax.PagerNoLastPage(Model.Query.Page,
                            Model.Query.PageSize,
                            Model.Data.IsLastPage,
                            i => Url.Action("Index", RouteValues(i)),
                            i => new AjaxOptions
                                     {
                                         UpdateTargetId = "content",
                                         InsertionMode = InsertionMode.Replace,
                                         HttpMethod = "GET",
                                         Url = Url.Action("Grid", RouteValues(i))
                                     })

ここで、RouteValues（i）は、たとえば次のように定義されます。

@functions {
    private object PageRouteValues(int i)
    {
        return new
                   {
                       payId = Model.Query.PayId,
                       clientCode = Model.Query.ClientCode,
                       fromDate = Model.Query.FromDate,
                       tillDate = Model.Query.TillDate,
                       payNum = Model.Query.PayId,
                       checkNum = Model.Query.CheckNum,
                       payType = Model.Query.PayType,
                       payStatus = Model.Query.PayStatus,
                       page = i,
                       pageSize = Model.Query.PageSize
                   };
    }
}
于 2013-02-11T13:46:06.443 に答える
1

mvcヘルパーまたはmvc.pagedlistを使用してそれも可能ですか？

はい。ただし、もちろん、実際のデータページングを処理するには、クライアント側のリクエストをサーバー側のアクションと調整する必要があります。その意味では、WebFormsほど単純ではありませんが、それでも可能です。

これは、 PagedListを使用して、返された各アイテムを、水平方向のルールで区切られた独自のテーブルにレンダリングする例です。例のHTMLを簡単に変更して、必要なレンダリングを作成できるはずです。

于 2012-10-25T21:22:31.070 に答える