In this article I will explain with an example, how to implement Column Wise search and filter in WebGrid using TextBox in ASP.Net MVC Razor.
An additional Header Row with TextBoxes for each Column will be inserted in WebGrid using jQuery and then the jQuery QuickSearch Plugin will be applied to each TextBox.
The jQuery QuickSearch Plugin will enable searching and filtering in WebGrid on KeyPress event of TextBoxes in ASP.Net MVC Razor.
 
 
jQuery QuickSearch Plugin
This article makes use of the jQuery QuickSearch Plugin which can be downloaded using the link below.
jQuery QuickSearch Plugin
 
 
Database
Here I am making use of Microsoft’s Northwind Database. The download and install instructions are provided in the following article.
Download and install Northwind Database
 
 
Entity Framework Model
Once the Entity Framework is configured and connected to the database table, the Model will look as shown below.
Note: For beginners in ASP.Net MVC and Entity Framework, please refer my article ASP.Net MVC: Simple Entity Framework Tutorial with example. It covers all the information needed for connecting and configuring Entity Framework.
 
Column Wise Search and Filter in WebGrid using TextBox in ASP.Net MVC
 
 
Controller
The Entity Framework is now configured and hence now we can create a Controller and write code to fetch the records from the Customers Table of the Northwind Database.
Inside the Index Action method, the Customer records are fetched using Entity Framework and returned to the View.
public class HomeController : Controller
{
    // GET: Home
    public ActionResult Index()
    {
        NorthwindEntities entities = new NorthwindEntities();
        return View(entities.Customers.Take(10).ToList());
    }
}
 
 
View
Inside the View, in the very first line the Customer Entity is declared as IEnumerable which specifies that the Model will be available as a Collection.
For displaying the records, the WebGrid is rendered using GetHtml function which renders the WebGrid using Model.
Note: For more details on using WebGrid, please refer WebGrid Step By Step Tutorial with example in ASP.Net MVC.
 
Adding additional Header Row to WebGrid
Inside the jQuery document ready event handler, a dynamic Header Row is created and in each Column a TextBox is added. Finally, the dynamic Header Row is appended to the WebGrid in second position i.e. below the original Header Row.
 
Applying the jQuery QuickSearch Plugin
The jQuery QuickSearch Plugin is applied to each TextBox in the new dynamic Header Row and the Plugin is programmed to search all rows except the Header Rows i.e. TH elements.
Note: The jQuery QuickSearch Plugin is included in the attached sample code. You can also download it using the Download Link provided earlier.
 
@model IEnumerable<Filter_WebGrid_jQuery.Customer>
 
@{
    Layout = null;
    WebGrid webGrid = new WebGrid(source: Model, canPage: false, canSort: false);
}
 
<!DOCTYPE html>
 
<html>
<head>
    <meta name="viewport" content="width=device-width"/>
    <title>Index</title>
    <style type="text/css">
        body
        {
            font-family: Arial;
            font-size: 10pt;
        }
 
        .Grid
        {
            border: 1px solid #ccc;
            border-collapse: collapse;
        }
 
        .Grid th
        {
            background-color: #F7F7F7;
            font-weight: bold;
        }
 
        .Grid th, .Grid td
        {
            padding: 5px;
            border: 1px solid #ccc;
        }
 
        .Grid, .Grid table td
        {
            border: 0px solid #ccc;
        }
 
        .Grid th a, .Grid th a:visited
        {
            color: #333;
        }
    </style>
</head>
<body>
    @webGrid.GetHtml(
        htmlAttributes: new { @id = "WebGrid", @class = "Grid" },
        columns: webGrid.Columns(
                 webGrid.Column("CustomerID", "Customer Id"),
                 webGrid.Column("ContactName", "Customer Name"),
                 webGrid.Column("Country", "Country")))
 
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script type="text/javascript" src="~/Scripts/quicksearch.js"></script>
    <script type="text/javascript">
        $(function () {
            //Add Header Row with TextBoxes.
            var row = $("<TR />");
            $("#WebGrid TR").eq(0).find("TH").each(function () {
                row.append("<th><input type = 'text' /></th>");
            });
            $("#WebGrid TR").eq(0).after(row);
 
            //Applying the QuickSearch Plugin to each TextBox.
            $("#WebGrid TR").eq(1).find("INPUT").each(function (i) {
                $(this).quicksearch("#WebGrid tr:not(:has(th))", {
                    'testQuery': function (query, txt, row) {
                        return $(row).children(":eq(" + i + ")").text().toLowerCase().indexOf(query[0].toLowerCase()) != -1;
                    }
                });
            });
        });
    </script>
</body>
</html>
 
 
Screenshot
Column Wise Search and Filter in WebGrid using TextBox in ASP.Net MVC
 
 
Downloads
Download Code