Filtering GridView with TextBox in ASP.NET using C# Coding

Erukulla's January 05, 2016

In my previous articles, I discussed various aspects of working with GridView in ASP.NET, such as retrieving data from a database, selecting or deselecting multiple checkboxes, and exporting GridView data to an Excel sheet. Now, let's dive into a practical scenario: how to filter a GridView with a TextBox in ASP.NET using C# coding.

Previous Articles Recap:

  1. Retrieve Data from Database and Bind Gridview through DB Class
  2. Select or Deselect Multiple Checkbox in Gridview
  3. Export Gridview Data to Excel Sheet
filter Gridview by using textbox data

Introduction:

In this tutorial, we'll explore how to filter a GridView based on user input in a TextBox. Consider a scenario where a GridView contains a large dataset, and users need to quickly find specific records by entering a name into a TextBox.

HTML MarkUp: Design

Firstly, let's take a look at the HTML markup for our page. We have a TextBox for entering the name, and the GridView to display the data.


<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <link href="CSS/StyleSheet.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>
    <script type="text/javascript" src="http://gridviewscroll.aspcity.idv.tw/"></script>
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
     Enter Name : <asp:TextBox ID="txt_get_data_in_grid" runat="server" 
            Width="180px" AutoPostBack="True" 
            ontextchanged="txt_get_data_in_grid_TextChanged"></asp:TextBox><br /><br />
        <asp:GridView ID="GridView1" runat="server">
        <HeaderStyle Font-Bold="True" ForeColor="White" CssClass="grdheader" />
<PagerStyle ForeColor="White" HorizontalAlign="Center" CssClass="grdscrollpager" />
        </asp:GridView>
    </div>
    <asp:Label ID="lbl_error" runat="server"></asp:Label>
    </form>
</body>
</html>

C# Coding : Namespace

Let's begin with the necessary C# code. Import the required namespaces for database operations.


using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data;
using System.Data.SqlClient;

C# Coding: Page Load

In the Page_Load event, establish a connection to the database and call the LoadGridview method to initially load the GridView.


public partial class _Default : System.Web.UI.Page
{
    SqlConnection con = new SqlConnection("Server=.; Database = master; Trusted_Connection = Yes;");

    protected void Page_Load(object sender, EventArgs e)
    {
        LoadGridview();
    }
}

C# Coding: Bind Gridview

The LoadGridview method fetches data from the database and binds it to the GridView.


    public void LoadGridview()
    {        
        SqlDataAdapter da = new SqlDataAdapter("Select * from Names", con);
        DataSet ds = new DataSet();
        int n = da.Fill(ds);
        if (n > 0)
        {
            GridView1.Visible = true;
            GridView1.DataSource = ds;
            GridView1.DataBind(); 
            lbl_error.Text = "";
        }
    }

C# Coding: TextBox TextChanged Event

The txt_get_data_in_grid_TextChanged event is triggered when the user enters text into the TextBox. It dynamically adjusts the query based on the entered name, fetches the matching records, and updates the GridView accordingly.


    protected void txt_get_data_in_grid_TextChanged(object sender, EventArgs e)
    {
        string query = "select * from Names where name like '" + txt_get_data_in_grid.Text + "%'";
        SqlDataAdapter da1 = new SqlDataAdapter(query, con);
        DataSet ds1 = new DataSet();
        int n1 = da1.Fill(ds1);
        if (n1 > 0)
        {
            GridView1.Visible = true;
            GridView1.DataSource = ds1;
            GridView1.DataBind();
            lbl_error.Text = "";
        }
        else
        {
            if (n1 == 0)
            {
                GridView1.Visible = false;
                lbl_error.Text = "No Record Found...";
            }
            else
            {
                LoadGridview();        
            }
        }
    }
}

Conclusion:

Filtering a GridView with a TextBox in ASP.NET using C# provides users with an efficient way to search through large datasets. This step-by-step guide demonstrates the implementation of the filtering functionality, enhancing the user experience in web applications. Experiment with this code to adapt it to your specific requirements and create more responsive web interfaces.

Post a Comment

2 Comments

  1. Erukulla's6 January 2016 at 14:57

    Export Gridview To Excel Sheet in Asp.net by Using C# Coding

    http://allittechnologies.blogspot.com/2015/05/gridview-data-export-to-excel.html

    ReplyDelete
  2. Erukulla's6 January 2016 at 14:59

    How to do Edit, Update, Delete in Asp.net Gridview by Using C# Coding

    http://allittechnologies.blogspot.in/2015/05/gridview-edit-update-delete-button-in-asp.net-using-csharp-in-software-it-technologies.html

    ReplyDelete