Articles → jQuery → Search gridview records using search textbox in asp.net and jQuery

Search gridview records using search textbox in asp.net

and jQuery

The objective of this tutorial is to demonstrate how to search gridview records using search textbox.

Software

Visual studio 2005 (or above) and SQL server 2005 (or above) should be installed on your machine.

Technical knowledge

In order to understand this tutorial you must have the sound knowledge of following concepts

  1. How to create a table in SQL server?

  2. How to insert data in a table (manually or through insert script)

  3. Basics about controls like textbox, button and gridview.

  4. How to create website using visual studio?

  5. Basics about Jquery.

Steps Involved

In order to achieve our goal we will be following these steps:

  1. Create a table and add data in it

  2. Create the search text box

  3. Add columns in data grid on page load

  4. Add code to fetch value from database based on search keyword

  5. Add key press event for search textbox

  6. Run the program

Step 1. Create a table and add data in it

For this example we have created a table that contains information for different classes in a school.

Click to Enlarge

Once we have created the table we will add data in it.

Click to Enlarge

Step 2. Create the search text box

Create a search textbox and a grid view as demonstrated in the code below. ‘Search’ is a text that would be displayed in front of the textbox that can be used for searching.

Search:<asp:TextBox ID="txtSearch" runat="server"></asp:TextBox>
    <asp:GridView ID="gvTest" runat="server">
    </asp:GridView>

Step 3. Add columns in datagrid on page load

In the page load function we define a datatable and add a column (Class Name) inside it. Then bind the data table with the grid view.

protected void Page_Load(object sender, EventArgs e)
{
        if (!IsPostBack)
        {
            DataTable dummy = new DataTable();
            dummy.Columns.Add("Class Name");
            dummy.Rows.Add();
            gvTest.DataSource = dummy;
            gvTest.DataBind();
        }

}

Step 4. Add code to fetch value from database based

on search keyword

The following code is written to fetch the data from the database based on the values entered in the search textbox. In the following code, the value is entered into the text box passed as an argument in the function ‘GetNames’ based on which a SQL query gets values from database

[WebMethod]
public static string GetNames(string classDisplayName)
{
        DataSet ds = new DataSet("class");
        string query = string.IsNullOrWhiteSpace(classDisplayName)? "SELECT ClassDisplayName FROM Class" : string.Format("SELECT ClassDisplayName FROM Class where ClassDisplayName like '%{0}%'", classDisplayName);
        using (SqlConnection conn = new SqlConnection(@"conn_string"))
        {
            conn.Open();
            using (SqlDataAdapter adap = new SqlDataAdapter(query, conn))
            {
                adap.Fill(ds);
            }

        }
        return ds.GetXml();
}

Step 5. Add key press event for search textbox

‘ClientId’ property of text box provides the control ID for HTML markup which is generated by ASP.Net

<script src="http://code.jquery.com/jquery-latest.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(
            function () {
                $("#<%=txtSearch.ClientID %>").keyup(
                    function () {
                        //---
                        $.ajax({
                            type: "POST",
                            url: "About.aspx/GetNames",
                            data: "{classDisplayName:'" + $('#<%=txtSearch.ClientID %>').val() + "'}",
                            contentType: "application/json",
                            dataType: "json",
                            success: function (response) {
                                var xmlDoc = $.parseXML(response.d);
                                var xml = $(xmlDoc);

                                var student = xml.find("class").find("Table");
                                
                                $("#<%=gvTest.ClientID %>").html('');
                                $("#<%=gvTest.ClientID %>").html('<table cellspacing="0" rules="all" border="1" id="<%=gvTest.ClientID %>" style="border-collapse:collapse;"><tr><th scope="col">Class Name</th></tr><tr><td> </td></tr></table>');

                                var str = "";
                                for (i = 0; i < student.length; i++) {
                                    str = str + "<tr><td>";
                                    str = str + $(student[i]).find("ClassDisplayName").text();
                                    str = str + "</td></tr>";
                                }

                                $("#<%=gvTest.ClientID %>").append(str);

                            }
                        });                
                        // ---
                    });
            });                  
        
</script>

Step 6. Run the program

Once you have done all the steps from 1 to 5. You can execute the program. The output will be as shown below