Viewed 303 times

Paging and Sorting using ASP .Net Core Razor Page, Web API, and Entity Framework

How to implement paging and sorting using the .Net Core Razor Page, the Web API, and the Entity Framework to yield good performance.  It features:

  • Selection of Page Size
  • Navigation of Pages
  • Display of Record Numbers
  • Sorting of Columns

You can download the code HERE or See the code at GitHub.

Core Classes

The first thing is to define what the user can ask the application to fetch, which are:

  • Page size
  • Page number
  • Field to sort
  • Sort Direction

The code is shown below:

Next we define what the application should return, which are:

  • Total number of records
  • Total number of pages
  • Previous page number — for when the user navigates to the previous page
  • Next page number — for navigating to the next page
  • First record number on the current page
  • Last record number on the current page

The code is shown below:

With the user parameter and the result classes defined, we create the PageList<T> class that inherits from List<T> so that it can take the parameter and store the result in the List and PageSortResult.  The class is shown below with the logic in the GetData() method.  The line that gets the records from the database is the call to ToListAsync(), which will skip the records not needed by calling Skip() and get only the records needed by calling Take().

The Data Layer

The definition of the Customer model is defined in the Data Layer Project:

The interface and the implementation have the usual CRUD, the only difference being that the Get() method will use the PageList<T> class to get only the records needed and the sorting order, hence increasing the performance by pushing the work to the database.  Below is the interface:

And the implementation:

The DbContext from the Entity Framework is simply:

The API

In the Web API project, we define the GetCustomers() method that will accept the PageSortParam as the parameter, call the Get() method in the Data Layer, add the meta data from the PageSortResult  in the response header (such as total number of records, total pages, etc), and provide the actual records in the response body:

The Razor Page

The page size that the user can select is defined by:

And we use [BindProperty(SupportsGet=true)] to pass the value to the html page and get the value back.  For each round trip we need to pass and receive:

  • PageSize – user requested page size
  • PageNumber – the current page number the user is on
  • SortField – the column that the user requested to sort on
  • SortDir – the direction it should sort
  • SortDirNext – the next sort direction when the user clicks on the column link

The OnGet() method will take in the value of each property, build the parameter and pass it to the API, then show the records returned and its meta data. Below is the complete code:

The html page will take the input from the user by submitting the form using http get or clicking the link. Notice that the parameters are passed in each action. Only the sort column name and sort directions are specified in the column header link for the user to update sorting criteria:

And that’s all.  Hope you find this useful in building your paging and sorting applications.

Subscribe
Notify of
0 Comments
Inline Feedbacks
View all comments
© All Rights Reserved 2020
0
Would love your thoughts, please comment.x