Column Wise Filter In Web Grid By Jquery Data Table

The core idea of this article is implementing the column-wise filter in Web Grid. If you are working on MVC, you understand the Web Grid in a very simple way. Basically, Web Grid is used to display the data on a Web page, using an HTML table element. Like ASP.NET Web Forms GridView and DataList, ASP.NET MVC doesn't have any built-in data controls but MVC has Web Grid class handling the same feature using jQuery.

Background

For this, you must have basic knowledge of MVC, like how to make the project, how to make a controller, how to make an Action Method, etc.

Let's start with filling up Web Grid from the database. First, we have to create an Action Method in the Controller, which returns the collection of data (model).

What is the code given above?

Actually, I made an Action Method name FillWebGrid() in my Controller, ObjAuCon is a DB layer object, GetDatainList() is a generic method, which is defined in DB layer, which has its list as return type, WebGridModel is a model and IEWebgrdmdl is the IEnumerable container, which I make from WebGridModel and last Proc_GetWebgrid is a stored procedure, which executes and gets the record.

This simply gets Web Grid records from the database and returns to the View.

Our Action Method returns collection of WebGridModel model, so our View will have the above @model Directive. Now, right click on FillWebGrid action and add a View, which shows your Web Grid and add the line of code given above on View in the top. Afterwards, add the Web Grid, as shown below.

This will list the data from the database. Here, I am using a material design theme. You can use simple CSS or Bootstrap also.