In this article I am going to give an example of webgrid control in asp.net mvc. What is the unique feature in this article is dynamic paging, sorting and search in webgrid using ajax.
Generally we are loading data in to grid with a single server side call. For eg:
Select * From Employee (in sql) or context.Employee.ToList() (in linq)
But this query will be fail where we have lot more data in our database tables. For eg. where we 20000 or 30000 records in a table. It can adversely affect our application and sometimes response time will be massive.
In this article we will figure out this problem and will make a generic solution for an asp.net mvc application.
Points to be covered:
1) Creating webgrid in asp.net mvc
2) Dynamic Paging using Ajax
3) Dynamic Sorting using Ajax
4) Dynamic Search using Ajax
5) Generic Sorting and Paging classes.
1) Microsoft Visual Studio
2) SQL Server
1) EntityFramework (install-package entityframework)
2) jQuery (install-package jQuery)
3) Bootstrap (install-package Bootstrap)
4) LinqKit (install-package LinqKit)
Now follow the steps in order to achieve this task:
1) Open Microsoft Visual Studio
2) Create a new Asp.Net MVC application project
3) Install the packages given above
4) Create a Model class named Employee
5) Create a db context class. For this tutorial I am using entity framework codefirst approach so it will create and add data in db automatically by using c# context classes.
6) Add connection string in web.config:
7) Add the following utilities class for paging and sorting
8) Create a Data Access Layer class named EmployeeDAL and paste the following code:
9) Create a Business Logic Layer class named EmployeeBLL
10) Create a Home controller and use the following code:
11) Add a Index view and insert the following code:
12) Create a partial view _Search.cshtml
13) Create a partial view _Result.cshtml
14) Create a app.js and paste the following code in order to submit ajax search form for filtering data and page size:
Now you can search First Name or Last Name by typing in search textbox. You can also change page size by selecting option from dropdown.
Thanks for reading this article. I think this will help a lot in terms of dynamic data loading.
If you want to apply for the source code of this article, you can communicate with me via contact form given in the right hand side. You can enter your full name, email and a short description only.