In previous post Pagination (Models), I presented a way of modeling the server-side code to display dynamic lists of Dynamic Component Presentations (DCP) using AJAX.
In this post, I present the server-side view logic in context of MVC .net architecture and using Razor CSHTML views.
As presented in the previous post, the Controller creates a model class that contains the paginated list, and it then attaches this model to the ViewBag. In the example it was DeviceController, that created model DocumentPartial which contained a paginated list of documents.
We now need to display this list of paginated items in a Razor view. In order to make the logic reusable and succinct, I implemented the paginated view as partial view. The Component view corresponding to the controller includes the partial view and passes to it the model previously saved in the ViewBag. This makes the partial view generic and reusable from other contexts.
To continue our earlier example, the view corresponding to DeviceController is Device.cshtml and contains roughly the code below. The idea is to first check wether the ViewBag contains our model and if so, then call the partial view _PartialDocument.cshtml with the DocumentPartial model.
The main view logic is contained in the partial view. In our example, _PartialDocument.cshtml, processes the PagedItems property and displays the items in that list according to some input parameters. The input parameters can be the current page to display (the page number) or the page size (the number of items per page). Additionally, the partial view displays some kind of page iterator that allows for navigation between pages of items (such as next page, previous page, or jumping to a specific page number). The outline of the Razor partial code is shown below:
Note the usage of the Html.PagedListPager -- this extension method provided by PagedList.Mvc will generate a page iterator similar to the one below:
In the next post Pagination (AJAX), I present the client-side Javascript solution that calls these server-side components and that completes the pagination topic.
In this post, I present the server-side view logic in context of MVC .net architecture and using Razor CSHTML views.
As presented in the previous post, the Controller creates a model class that contains the paginated list, and it then attaches this model to the ViewBag. In the example it was DeviceController, that created model DocumentPartial which contained a paginated list of documents.
We now need to display this list of paginated items in a Razor view. In order to make the logic reusable and succinct, I implemented the paginated view as partial view. The Component view corresponding to the controller includes the partial view and passes to it the model previously saved in the ViewBag. This makes the partial view generic and reusable from other contexts.
To continue our earlier example, the view corresponding to DeviceController is Device.cshtml and contains roughly the code below. The idea is to first check wether the ViewBag contains our model and if so, then call the partial view _PartialDocument.cshtml with the DocumentPartial model.
@model Device <!-- markup goes here --> @if (ViewBag.DocumentPartial != null) { @Html.Partial("_PartialDocument", (DocumentPartial)ViewBag.DocumentPartial) } <!-- more markup here -->
The main view logic is contained in the partial view. In our example, _PartialDocument.cshtml, processes the PagedItems property and displays the items in that list according to some input parameters. The input parameters can be the current page to display (the page number) or the page size (the number of items per page). Additionally, the partial view displays some kind of page iterator that allows for navigation between pages of items (such as next page, previous page, or jumping to a specific page number). The outline of the Razor partial code is shown below:
@model DocumentPartial @using PagedList.Mvc; <div class="paged-section"> Viewing @Model.PagedItems.Count of @Model.PagedItems.TotalItemCount documents @if (Model.IsPostback) { foreach (Asset asset in Model.PagedItems) { //Display logic goes here } <div> Page @(Model.PagedItems.PageCount < Model.PagedItems.PageNumber ? 0 : Model.PagedItems.PageNumber) of @Model.PagedItems.PageCount </div> @Html.PagedListPager(Model.PagedItems, pageNumber => Model.GetPagerUrl(pageNumber)) } </div>
Note the usage of the Html.PagedListPager -- this extension method provided by PagedList.Mvc will generate a page iterator similar to the one below:
<div class="pagination-container"> <ul class="pagination"> <li class="active"><a>1</a></li> <li><a href="http://my.server.com/Device/Index/123/456/Device/_PartialDocument/2.ajax">2</a></li> <li><a href="http://my.server.com/Device/Index/123/456/Device/_PartialDocument/3.ajax">3</a></li> <li><a href="http://my.server.com/Device/Index/123/456/Device/_PartialDocument/4.ajax">4</a></li> <li><a href="http://my.server.com/Device/Index/123/456/Device/_PartialDocument/5.ajax">5</a></li> <li><a href="http://my.server.com/Device/Index/123/456/Device/_PartialDocument/6.ajax">6</a></li> <li><a href="http://my.server.com/Device/Index/123/456/Device/_PartialDocument/7.ajax">7</a></li> <li><a href="http://my.server.com/Device/Index/123/456/Device/_PartialDocument/8.ajax">8</a></li> <li><a href="http://my.server.com/Device/Index/123/456/Device/_PartialDocument/9.ajax">9</a></li> <li><a href="http://my.server.com/Device/Index/123/456/Device/_PartialDocument/10.ajax">10</a></li> <li class="disabled PagedList-ellipses"><a>…</a></li> <li class="PagedList-skipToNext"><a href="http://my.server.com/Device/Index/123/456/Device/_PartialDocument/2.ajax" rel="next">»</a></li> <li class="PagedList-skipToLast"><a href="http://my.server.com/Device/Index/123/456/Device/_PartialDocument/23.ajax">»»</a></li> </ul> </div>
In the next post Pagination (AJAX), I present the client-side Javascript solution that calls these server-side components and that completes the pagination topic.
Comments