In this article I will explain with an example, how to filter Grid using TextBox in ASP.Net MVC Razor.
When the User types in the TextBox, the Grid will be filtered with the help of jQuery AJAX in ASP.Net MVC Razor.
 
 
Database
Here I am making use of Microsoft’s Northwind Database. You can download it from here.
Download and install Northwind Database
 
 
Configuring and connecting Entity Framework to database
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.
 
Filter Grid 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.
The Controller consists of two Action methods.
Action method for handling GET operation
Inside this Action method, the Top 10 Customer records are fetched and returned to the View.
 
Action method for handling jQuery AJAX POST operation
Inside this Action method, the value of the Customer Name received from the jQuery AJAX function is received as parameter.
The Customer Name value is used to perform search in the Database Table using LINQ query and Contains function.
Note: The following Action method handles POST call and will return JSON object and hence the return type is set to JsonResult.
 
Finally, the Top 10 matching Customer records are returned in JSON format.
public class HomeController : Controller
{
    // GET: Home
    public ActionResult Index()
    {
        NorthwindEntities entities = new NorthwindEntities();
        return View(entities.Customers.Take(10));
    }
 
    [HttpPost]
    public JsonResult SearchCustomers(string customerName)
    {
        NorthwindEntities entities = new NorthwindEntities();
        var customers = from c in entities.Customers
                        where c.ContactName.Contains(customerName)
                        select c;
        return Json(customers.ToList().Take(10));
    }
}
 
 
View
The View consists of an HTML TextBox and an HTML Table
The TextBox has been assigned with jQuery OnKeyUp event handler.
The GetCustomers JavaScript function is called inside the jQuery document ready event handler and also inside the TextBox OnKeyUp event handler.
When the User types in the TextBox, a jQuery AJAX call is made to the SearchCustomers Action method and the value of the TextBox is sent to it.
Once the response is received, a loop is executed over the Customer records and one by one HTML row is appended to the HTML Table.
@{
    Layout = null;
}
 
<!DOCTYPE html>
 
<html>
<head>
    <meta name="viewport" content="width=device-width"/>
    <title>Index</title>
</head>
<body>
    Customer Name:<input id="txtCustomerName" type="text"/>
    <br/>
    <br/>
    <table id="tblCustomers" cellpadding="0" cellspacing="0">
        <tr>
            <th style="width: 90px">CustomerID</th>
            <th style="width: 120px">ContactName</th>
            <th style="width: 90px">City</th>
            <th style="width: 90px">Country</th>
        </tr>
    </table>
 
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script type="text/javascript">
        $(function () {
            GetCustomers();
            $("#txtCustomerName").keyup(function () {
                GetCustomers();
            });
        });
        function GetCustomers() {
            var customerName = $.trim($("#txtCustomerName").val());
            $.ajax({
                type: "POST",
                url: "/Home/SearchCustomers",
                data: "{customerName:'" + customerName + "'}",
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (customers) {
                    var table = $("#tblCustomers");
                    table.find("tr:not(:first)").remove();
                    $.each(customers, function (i, customer) {
                        var table = $("#tblCustomers");
                        var row = table[0].insertRow(-1);
                        $(row).append("<td />");
                        $(row).find("td").eq(0).html(customer.CustomerID);
                        $(row).append("<td />");
                        $(row).find("td").eq(1).html(customer.ContactName);
                        $(row).append("<td />");
                        $(row).find("td").eq(2).html(customer.City);
                        $(row).append("<td />");
                        $(row).find("td").eq(3).html(customer.Country);
                    });
                }
            });
        }
    </script>
</body>
</html>
 
 
Screenshot
Filter Grid using TextBox in ASP.Net MVC
 
 
Downloads
Download Code