Create instant search of Grid View in ASP.NET using C#

To day I will show you how to create a search in GridView  in ASP.NET using C#. You can do it normally getting a ASP command button and run a query to get the value in a GridView. It will refresh the page every time. You can stop this by adding an UpdatePanel but the time taking will be more or less same. But here I will use quickseacrch.js to search within a GridView.

To do this create a new project and add a new web form in your Visual Studio. In the aspx file write the following code to proceed.

and in the head section add a script tag to do this js function.

Now in the CS page paste the following code.

protected void Page_Load(object sender, EventArgs e)
    {
        if (!this.IsPostBack)
        {
            DataTable dt = new DataTable();
            dt.Columns.AddRange(new DataColumn[1] {new DataColumn("Name", typeof(string))});
            dt.Rows.Add("Arkadeep De");
            dt.Rows.Add("Shashank Shekhar");
            dt.Rows.Add("Pradeep Kumar Das");
            dt.Rows.Add("Sucheta bhaumik");
            dt.Rows.Add("Eliza Nayak");
            GridView1.DataSource = dt;
            GridView1.DataBind();
        }
    }

    protected void OnDataBound(object sender, EventArgs e)
    {
        GridViewRow row = new GridViewRow(0, 0, DataControlRowType.Header, DataControlRowState.Normal);
        for (int i = 0; i < GridView1.Columns.Count; i++)
        {
            TableHeaderCell cell = new TableHeaderCell();
            TextBox txtSearch = new TextBox();
            txtSearch.Attributes["placeholder"] = GridView1.Columns[i].HeaderText;
            txtSearch.CssClass = "search_textbox";
            cell.Controls.Add(txtSearch);
            row.Controls.Add(cell);
        }
        GridView1.HeaderRow.Parent.Controls.AddAt(1, row);
    }

Now run your project and test it. Download the full source code here.

Download Now