Features

ページング

ページング

機能

設定

説明

このサンプルは、MultiRowコントロールを使用して、ページ付きビューを実装する方法を示します。
すべての作業は、グリッドのデータソースとして使用されるCollectionViewクラスによって行われます。
ページングを有効にするには、MultiRowまたはCollectionViewServicePageSizeプロパティを設定します。
ページを切り替えるには、Pagerコントロールを使用し、Pager.OwnerプロパティをMultiRowまたはCollectionViewServiceのIDに設定します。

この例では、ページングはサーバー側で行われます。これは、このCollectionViewがサービスのように動作して、サーバーデータと同期するためです。
CollectionViewは、内部的にajax呼び出しを行って次のデータセットを取得します。クライアント側のページングについては、@Html.ActionLink("「サーバー読み取りの無効化」", "DisableServerRead")サンプルを参照してください。

メモ: ページングUIは、グリッド外で実装されます。これにより、ページングメカニズムの外観と機能を完全に制御できます。
JavaScriptでPagerコントロールをカスタマイズする方法については、クライアントCollectionViewクラスを参照してください。

using System.Collections.Generic;
using System.Web.Mvc;
using MultiRowExplorer.Models;

namespace MultiRowExplorer.Controllers
{
    public partial class MultiRowController : Controller
    {
        private readonly ControlOptions _pagingOptions = new ControlOptions
        {
            Options = new OptionDictionary
            {
                {"Page Size", new OptionItem {Values = new List<string> {"10", "25", "50", "100"}, CurrentValue = "10"}},
            }
        };

        public ActionResult Paging(FormCollection data)
        {
            _pagingOptions.LoadPostData(data);
            ViewBag.DemoOptions = _pagingOptions;
            return View(Orders.GetOrders());
        }
    }
}
@model IEnumerable<Orders.Order>
@{
    ControlOptions optionsModel = ViewBag.DemoOptions;
    ViewBag.DemoSettings = true;
}

@section Styles{
    <style>
        .customMultiRow {
            margin-top: 5px;
        }
    </style>
}

@(Html.C1().CollectionViewService<Orders.Order>().Bind(Model).Id("collectionViewService")
.PageSize(Convert.ToInt32(optionsModel.Options["PageSize"].CurrentValue)))

@(Html.C1().Pager().Owner("collectionViewService"))

@(Html.C1().MultiRow<Orders.Order>().Id("pagingMultiRow").CssClass("multirow customMultiRow")
    .ItemsSourceId("collectionViewService").IsReadOnly(true)
    .LayoutDefinition(LayoutDefinitionsBuilders.ThreeLines)
)

@(Html.C1().Pager().Owner("pagingMultiRow"))

@section Settings{
    @Html.Partial("_OptionsMenu", optionsModel)
}

@section Description{
<p>@Html.Raw(Resources.MultiRowExplorer.Paging_Text0)</p>

<p>@Html.Raw(Resources.MultiRowExplorer.Paging_Text1)</p>

<p>@Html.Raw(Resources.MultiRowExplorer.Paging_Text2)</p>

}