In this article I will explain with an example, how to search and filter GridView on TextBox OnTextChanged event in ASP.Net using C# and VB.Net.
The TextBox will be assigned an OnTextChanged event handler and the AutoPostBack property will be set to True and whenever the OnTextChanged event handler is triggered, the database records will be searched and the filtered records will be displayed in ASP.Net GridView.
Database
For this article I am making use of the Microsoft’s Northwind Database. Download and install instructions are provided in the link below.
HTML Markup
The following HTML Markup consists of an ASP.Net TextBox and a GridView control.
The TextBox has been assigned an OnTextChanged event handler and the AutoPostBack property is set to True and the GridView has been assigned OnPageIndexChanging event handler and the AllowPaging property is set to True.
Search Customer:
<asp:TextBox ID="txtSearch" runat="server" OnTextChanged="Search" AutoPostBack="true"></asp:TextBox>
<hr />
<asp:GridView ID="gvCustomers" runat="server" AutoGenerateColumns="false" AllowPaging="true" OnPageIndexChanging = "OnPaging">
<Columns>
<asp:BoundField DataField="ContactName" HeaderText="Name" ItemStyle-Width="150" />
<asp:BoundField DataField="City" HeaderText="City" ItemStyle-Width="150" />
<asp:BoundField DataField="Country" HeaderText="Country" ItemStyle-Width="150" />
</Columns>
</asp:GridView>
Namespaces
You will need to import the following namespaces.
C#
using System.Data;
using System.Data.SqlClient;
using System.Configuration;
VB.Net
Imports System.Data
Imports System.Data.SqlClient
Imports System.Configuration
Search and Filter GridView on TextBox OnTextChanged event in ASP.Net
Populating GridView in Page Load
Inside the Page Load event of the Page, the SearchCustomers method is called. In the SearchCustomers method, first a check is made whether the Search TextBox has value or is empty.
If it has value then the WHERE condition is appended in the SQL Query and also the SQL Parameter is passed to the Command object.
Finally the SQL Query is executed and the results are populated into the GridView.
C#
protected void Page_Load(object sender, EventArgs e)
{
if (!this.IsPostBack)
{
this.SearchCustomers();
}
}
private void SearchCustomers()
{
string constr = ConfigurationManager.ConnectionStrings["constr"].ConnectionString;
using (SqlConnection con = new SqlConnection(constr))
{
using (SqlCommand cmd = new SqlCommand())
{
string sql = "SELECT CustomerId, ContactName, City, Country FROM Customers";
if (!string.IsNullOrEmpty(txtSearch.Text.Trim()))
{
sql += " WHERE ContactName LIKE @ContactName + '%'";
cmd.Parameters.AddWithValue("@ContactName", txtSearch.Text.Trim());
}
cmd.CommandText = sql;
cmd.Connection = con;
using (SqlDataAdapter sda = new SqlDataAdapter(cmd))
{
DataTable dt = new DataTable();
sda.Fill(dt);
gvCustomers.DataSource = dt;
gvCustomers.DataBind();
}
}
}
}
VB.Net
Protected Sub Page_Load(sender As Object, e As EventArgs) Handles Me.Load
If Not Me.IsPostBack Then
Me.SearchCustomers()
End If
End Sub
Private Sub SearchCustomers()
Dim constr As String = ConfigurationManager.ConnectionStrings("constr").ConnectionString
Using con As New SqlConnection(constr)
Using cmd As New SqlCommand()
Dim sql As String = "SELECT CustomerId, ContactName, City, Country FROM Customers"
If Not String.IsNullOrEmpty(txtSearch.Text.Trim()) Then
sql += " WHERE ContactName LIKE @ContactName + '%'"
cmd.Parameters.AddWithValue("@ContactName", txtSearch.Text.Trim())
End If
cmd.CommandText = sql
cmd.Connection = con
Using sda As New SqlDataAdapter(cmd)
Dim dt As New DataTable()
sda.Fill(dt)
gvCustomers.DataSource = dt
gvCustomers.DataBind()
End Using
End Using
End Using
End Using
Search and Filter in GridView using TextBox
When the OnTextChanged event is triggered, the following event handler is executed. Here simply the SearchCustomers method is called.
C#
protected void Search(object sender, EventArgs e)
{
this.SearchCustomers();
}
VB.Net
Protected Sub Search(sender As Object, e As EventArgs)
Me.SearchCustomers()
End Sub
Paging in GridView
The following event handler handles the OnPageIndexChanging event. Here the PageIndex property of the GridView is set and the SearchCustomers method is called.
C#
protected void OnPaging(object sender, GridViewPageEventArgs e)
{
gvCustomers.PageIndex = e.NewPageIndex;
this.SearchCustomers();
}
VB.Net
Protected Sub OnPaging(sender As Object, e As GridViewPageEventArgs)
gvCustomers.PageIndex = e.NewPageIndex
Me.SearchCustomers()
End Sub
Screenshot
Demo
Downloads