Grid View With Server Side Filtering, Sorting And Paging In ASP.NET MVC 5

One thing to notice in the previous post is that all the features provided by the plugin are client-side which means that all the data is loaded in the page first and then the plugin handles the data on client side for searching, pagination, and sorting. That is fine if the result sets coming are not very big, but it can cause problems if the table is too big or the data is not that much but grows gradually as applications are used. So, in that case, this way of creating the grid would fail in long run.

Introduction

In this post, we will be seeing how we can implement the server side pagination, searching, and sorting which is, of course, a better approach in the long run and for the applications where data sets are too big.

We will be modifying the source code from the previous post for this. So, let’s get started.

First of all, we need to install the datatables.mvc5 from NuGet Package Manager. It is a datatables model binder to controller implemented by Stefan Nuxoll. You might be thinking why we do need this package. It is because the binder will provide strongly typed model posted at Controller which will help us avoid reading the request parameter and save us from type-casting the parameters from Request, because all the parameters posted in Request object are not type safe. So, we have to convert them manually to their destination type. This will help the developers to focus on business logic instead of playing around with Http parameters, checking them, and casting to the right type.

The good thing about this binder is that you can add custom parameters sent in the request, if your business requires that.

You can add your own custom parameters, if needed, by providing your own implementation of IDataTablesRequest. You will also need to override the BindModel and MapAdditionalColumns method of it.

Now, we will install datatables.mvc5 .

1. Go to Tools >> NuGet Package Manager >> Manage Nuget Packages for Solution and click it.

2. The package manager will get opened. By default, it will be displaying the installed nuGet packages in your solution. Click the Browse button.

3. Search for datatables.mvc5 package and select it.

4. Check the projects of the Solution in which you want to install this package. In our case, we are installing it in GridExampleMVC web project only.

5. Now, press the Install button.

6. Select the correct package (see the above screenshot) from the top one returned in the search results and install it.

If the installation of package goes successful, you will be able to see it in the References of the project:



7. Go to the Index.cshtml file and update the html of the View while removing the thead and the tbody elements of the table. Your updated html would be: