Articles → jQuery → Search gridview records using search textbox in asp.net and jQuery
Search gridview records using search textbox in asp.net
and jQuery
Software
Technical knowledge
Steps Involved
Step 1. Create a table and add data in it
Click to Enlarge
Click to Enlarge
Step 2. Create the search text box
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
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
[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
<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
Click to Enlarge