Paging - C1 ASP.NET MVC

// This file locates: "Scripts/Lesson/C1Mvc/CVPaging.js".
c1.documentReady(function () {
    var theGrid = wijmo.Control.getControl('#theGrid');
 
    // a CollectionView with 5 items per page
    var view = theGrid.collectionView;
    view.pageSize = 5;
    view.pageChanged.addHandler(updateCurrentPage);
 
    // update pager status
    view.onPageChanged();
    function updateCurrentPage() {
        var curr = wijmo.format('Page {index:n0} of {cnt:n0}', {
            index: view.pageIndex + 1,
            cnt: view.pageCount
        });
        document.getElementById('spanCurrent').textContent = curr;
    }
 
    // implement pager
    document.getElementById('pager').addEventListener('click', function (e) {
        var btn = wijmo.closest(e.target, 'button');
        var id = btn ? btn.id : '';
        switch (id) {
            case 'btnFirst':
                view.moveToFirstPage();
                break;
            case 'btnPrev':
                view.moveToPreviousPage();
                break;
            case 'btnNext':
                view.moveToNextPage();
                break;
            case 'btnLast':
                view.moveToLastPage();
                break;
        }
    });
 
    // use server-based paging
    var theGridServer = wijmo.Control.getControl('#theGridServer');
    var viewServer = theGridServer.collectionView;
    viewServer.pageChanged.addHandler(updateCurrentPageServer);
 
    // update pager status
    viewServer.onPageChanged();
    function updateCurrentPageServer() {
        var curr = wijmo.format('Page {index:n0} of {cnt:n0}', {
            index: viewServer.pageIndex + 1,
            cnt: viewServer.pageCount
        });
        document.getElementById('spanCurrentServer').textContent = curr;
    }
 
    // implement pager
    document.getElementById('pagerServer').addEventListener('click', function (e) {
        var btn = wijmo.closest(e.target, 'button');
        var id = btn ? btn.id : '';
        switch (id) {
            case 'btnFirstServer':
                viewServer.moveToFirstPage();
                break;
            case 'btnPrevServer':
                viewServer.moveToPreviousPage();
                break;
            case 'btnNextServer':
                viewServer.moveToNextPage();
                break;
            case 'btnLastServer':
                viewServer.moveToLastPage();
                break;
        }
    });
 
});

using System.Web.Mvc;
 
namespace LearnMvcClient.Controllers
{
    public partial class C1MvcController : Controller
    {
        // GET: CVPaging
        public ActionResult CVPaging()
        {
            return View(Models.FlexGridData.GetSales(200));
        }
    }
}

@model IEnumerable<FlexGridData.Sale>
 
<h1>
    @Html.Raw(Resources.C1Mvc.CVPaging_Title)
</h1>
<p>
    @Html.Raw(Resources.C1Mvc.CVPaging_Text1)
</p>
 
<h3>
    @Html.Raw(Resources.C1Mvc.CVPaging_Title1)
</h3>
<p>
    @Html.Raw(Resources.C1Mvc.CVPaging_Text2)
</p>
<p>
    @Html.Raw(Resources.C1Mvc.CVPaging_Text3)
</p>
@(Html.C1().FlexGrid().Id("theGrid")
    .ShowAlternatingRows(false)
    .HeadersVisibility(C1.Web.Mvc.Grid.HeadersVisibility.Column)
    .Bind(b=>b.Bind(Model).DisableServerRead(true))
    )
<div id="pager">
    <button id="btnFirst" class="btn"><span class="wj-glyph-step-backward"></span></button>
    <button id="btnPrev" class="btn"><span class="wj-glyph-left"></span></button>
    &nbsp;&nbsp;&nbsp;<span id="spanCurrent"></span>&nbsp;&nbsp;&nbsp;
    <button id="btnNext" class="btn"><span class="wj-glyph-right"></span></button>
    <button id="btnLast" class="btn"><span class="wj-glyph-step-forward"></span></button>
</div>
 
<h3>
    @Html.Raw(Resources.C1Mvc.CVPaging_Title2)
</h3>
<p>
    @Html.Raw(Resources.C1Mvc.CVPaging_Text4)
</p>
<p>
   @Html.Raw(Resources.C1Mvc.CVPaging_Text5)
</p>
<p>
    @Html.Raw(Resources.C1Mvc.CVPaging_Text6)
</p>
@(Html.C1().FlexGrid().Id("theGridServer")
    .IsReadOnly(true)
    .ShowAlternatingRows(false)
    .HeadersVisibility(C1.Web.Mvc.Grid.HeadersVisibility.Column)
    .Bind(b => b.Bind(Model).PageSize(5))
)
<div id="pagerServer">
    <button id="btnFirstServer" class="btn"><span class="wj-glyph-step-backward"></span></button>
    <button id="btnPrevServer" class="btn"><span class="wj-glyph-left"></span></button>
    &nbsp;&nbsp;&nbsp;<span id="spanCurrentServer"></span>&nbsp;&nbsp;&nbsp;
    <button id="btnNextServer" class="btn"><span class="wj-glyph-right"></span></button>
    <button id="btnLastServer" class="btn"><span class="wj-glyph-step-forward"></span></button>
</div>

CollectionView Paging

Client-Side Paging

Server-Side Paging