20 secrets of MVC3-(8) pagination of list results

 

Problem

You have a result in the form of a very large list, which takes a long time to load. Or you cannot easily find your results in this long list. Dividing results into multiple pages will reduce the page loading time and help you quickly find the desired results, especially when the results have been sorted.

Solution

Use PagedList. MVC to navigate to the record list page.

Discussion

For an application paging, you need to install a new DLL "pagedList. MVC" Through NuGet Library ". This will generate a better paging list than the complete list. Choose tool> Library Package Manager> Add Library Package Reference. Select the online button on the left. Enter pagedList in the search box and then install PagedList. MVC:

 

 

After pagedlist is installed, the code for creating a page is added as a partial view. This allows you to reuse the partial view when paging results. Since the paging process does not really contain many dynamic variables, This is a perfect opportunity to reuse this HTML in every result list page with little impact, while keeping the appearance consistent.

Start by expanding the Views folder. Right-click the Shared file and choose "add"> "View" from the shortcut menu. Name it _ Paging, and click "Create as partial view" to add it. Add the following code to the newly created view:

<P>

@ If (Model. HasPreviousPage)

{

@ Html. ActionLink ("<First", "Index", new

{

Page = 1,

SortOrder = ViewBag. CurrentSortOrder

})

@ Html. Raw ("& nbsp ;");

@ Html. ActionLink ("<Prev", "Index", new

{

Page = Model. PageNumber-1,

SortOrder =

ViewBag. CurrentSortOrder

})

}

Else

{

@: <First

@ Html. Raw ("& nbsp ;");

@: <Prev

}

& Nbsp;

@ If (Model. HasNextPage)

{

@ Html. ActionLink ("Next>", "Index", new

{

Page = Model. PageNumber + 1,

SortOrder = ViewBag. CurrentSortOrder

})

@ Html. Raw ("& nbsp ;");

@ Html. ActionLink ("Last>", "Index", new

{

Page = Model. PageCount,

SortOrder = ViewBag. CurrentSortOrder

})

}

Else

{

@: Next>

@ Html. Raw ("& nbsp ;")

@: Last>

}

</P>

 

This View creates four links. Home Page, Previous Page, next page, and last page. I said there are four links because there are no available pages on the front. The link between the previous page and the home page is unavailable. Each link transmits two variables to Index () action. Page number and the rule column of the current sorting. The current sorting rule column ensures that the selected sorting rule will not be lost after my paging.

Next, we will make some changes on the view Book/Index:

@ Model PagedList. IPagedList <MvcApplication4.Models. Book>

<H2> @ ViewBag. Title

<P>

@ Html. ActionLink (string) ViewBag. CreateLink, "Create ")

</P>

@ Html. Partial ("_ Paging ")

<Table>

<Tr>

<Th>

@ Html. ActionLink (string) ViewBag. TitleDisplay,

"Index", new {sortOrder = ViewBag. TitleSortParam })

</Th>

<Th>

@ Html. ActionLink (string) ViewBag. IsbnDisplay,

"Index", new {sortOrder = ViewBag. IsbnSortParam })

</Th>

<Th>

@ ViewBag. SummaryDisplay

</Th>

<Th>

@ Html. ActionLink (string) ViewBag. AuthorDisplay,

"Index", new

{

SortOrder =

ViewBag. AuthorSortParam

})

</Th>

<Th>

@ ViewBag. ThumbnailDisplay

</Th>

<Th>

@ Html. ActionLink (string) ViewBag. PriceDisplay,

"Index", new {sortOrder = ViewBag. PriceSortParam })

</Th>

<Th>

@ Html. ActionLink (string) ViewBag. PublishedDisplay,

"Index", new

{

SortOrder =

ViewBag. PublishedSortParam

})

</Th>

<Th>

</Th>

</Tr>

@ Foreach (var item in Model)

{

<Tr>

<Td>

@ Html. DisplayFor (modelItem => item. Title)

</Td>

<Td>

@ Html. DisplayFor (modelItem => item. Isbn)

</Td>

<Td>

@ Html. DisplayFor (modelItem => item. Summary)

</Td>

<Td>

@ Html. DisplayFor (modelItem => item. Author)

</Td>

<Td>

@ Html. DisplayFor (modelItem => item. Thumbnail)

</Td>

<Td>

@ Html. DisplayFor (modelItem => item. Price)

</Td>

<Td>

@ Html. DisplayFor (modelItem => item. Published)

</Td>

<Td>

@ Html. ActionLink (string) ViewBag. EditLink,

"Edit", new {id = item. ID}) |

@ Html. ActionLink (string) ViewBag. DetailsLink,

"Details", new {id = item. ID}) |

@ Html. ActionLink (string) ViewBag. DeleteLink,

"Delete", new {id = item. ID })

</Td>

</Tr>

}

</Table>

@ Html. Partial ("_ Paging ")

The preceding example contains three changes to the View. First, the type of the model is updated to the strong type PagedList. IPagedList.

Second, _ Paging partial view is referenced twice. Once on the table. Once under the table. This allows you to easily click.

Finally, update the BookController. The Index () action is updated to receive a new parameter: page. Replace the original return value List with a paged list. Also, in the sort order block. Add a new ViewBag variable to set the current sort order. The Code is as follows:

(Translator: I modified the code in the original book because the Code contains bugs. The first parameter received by ToChangedList cannot be 0, but the default page input by action is 1. This will cause an exception ):

Using System;

Using System. Collections. Generic;

Using System. Data;

Using System. Data. Entity;

Using System. Linq;

Using System. Linq. Dynamic;

Using System. Web;

Using System. Web. Mvc;

Using MvcApplication. Models;

Using MvcApplication. Utils;

Using PagedList;

Namespace MvcApplication. Controllers

{

Public class BooksController: Controller

{

Private BookDBContext db = new BookDBContext ();

//

// GET:/Books/

Public ViewResult Index (string sortOrder, int page = 1)

{

# Region ViewBag Sort Params

ViewBag. CurrentSortOrder = sortOrder;

# Endregion

Const int maxRecords = 2; // maxRecords indicates the maximum number of records per page.

Var books = db. Books. OrderBy (sortOrder );

Var currentPage = page <= 0? 1: page;

Return View (books. ToPagedList (currentPage,

MaxRecords ));

}

}

}

 

If you want to further expand the partial view (_ Paging) to reuse the results in other lists, you only need to ensure that the same ViewBag is set for each list. In this case, the list result

Not in Index () action like this. You can update Html. ActionLink to call the action defined by another ViewBag variable so that it can be used dynamically.

 

 

For more information, see

ListedPage

 

 

Author technical brother