Articles → jQuery → Search Gridview Records Using Search Textbox In Asp.Net And Jquery

Search Gridview Records Using Search Textbox In Asp.Net And Jquery


Technical Knowledge

  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

  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

Picture showing table schema of the sample table

Click to Enlarge

Picture showing the table data in the sample table

Click to Enlarge

Step 2. Create The Search Text Box

<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

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

Step 4. Add Code To Fetch Value From Database Based On Search Keyword

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")) {
    using(SqlDataAdapter adap = new SqlDataAdapter(query, conn)) {

  return ds.GetXml();

Step 5. Add Key Press Event For Search Textbox

<script src="" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
	$("#<%=txtSearch.ClientID %>").keyup(function() {
			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);
		// ---

Step 6. Run The Program

Picture showing the output of Search gridview records using search textbox in and jQuery

Click to Enlarge

Posted By  -  Karan Gupta
Posted On  -  Saturday, June 21, 2014


Your Email Id  
Query/FeedbackCharacters remaining 250