Filter GridView With TextBox Using Control Parameter in ASP.NET 4.5

This article explains how to filter a Grid View with a TextBox using a Control Parameter in SqlDataSource in ASP.NET 4.5 and Control Parameter implemented search option to search the record LIKE data Show.

This article explains how to filter a Grid View with a TextBox using a Control Parameter in SqlDataSource in ASP.NET 4.5 and Control Parameter implemented search option to search the record LIKE data Show.

Open your instance of Visual Studio 2012, and create a new ASP.NET Web application. Name the project "Search Student", as shown in the figure.

create a new Web application

Now design your Student.aspx View design part; use the following code:

<asp:TextBox ID="txtSearch" runat="server" CssClass="txt"> </asp:TextBox>

<asp:Button ID="btnSearch" runat="server" Text="Search" CssClass="buttongr" />

<asp:GridView ID="GridView1" runat="server"></asp:GridView>

Now, see the following screen; select "grid view" then choose "Data Source" > "New Data Source".

New Data Source

Now see the following screen; open the “Data Source Configuration Wizard” then choose the Data Source Type then select "SQL Database" > "SqlDataSource" > "OK".

Data Source Configuration Wizard

Now, see the following screen; open “Choose Your Data Connection” then seelct "New Connection" then click "Next".

New Connection

Now, see the following screen “Configure the select Statement” then seelct "Table Name" then click "Where".
 
Table Name

Now, see the following screen “Add WHERE Clause”. For "Column" select something then for "Operator" select something then for "Control ID" select something then click on "Add" as in the following:
 
Add WHERE Clause

Now, see the following screen; click "OK".
 
click ok

Now, see the following screen; click "Next".
 
click Next

Now, see the following screen Test Query and click "Finish".
 
Test Query

Now, open the Student.aspx page, and write the following code:
 

<%@ Page Title="" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true"

    CodeBehind="Student.aspx.cs" Inherits="SearchStudent.Student" %>

 

<asp:content id="Content1" contentplaceholderid="titleContent" runat="server">

</asp:content>

<asp:content id="Content2" contentplaceholderid="head" runat="server">

</asp:content>

<asp:content id="Content3" contentplaceholderid="MainContent" runat="server">

Search:&nbsp;&nbsp;

<asp:TextBox ID="txtSearch" runat="server" CssClass="txt"></asp:TextBox><asp:Button ID="btnSearch" runat="server" Text="Search" CssClass="buttongr" />

<asp:GridView ID="GridView1" CssClass="handsontable" runat="server" AutoGenerateColumns="False" DataKeyNames="StudentID" DataSourceID="SqlDataSource">

<Columns>

<asp:BoundField DataField="StudentID" HeaderText="StudentID" InsertVisible="False" ReadOnly="True" SortExpression="StudentID" />

<asp:BoundField DataField="StudentName" HeaderText="StudentName" SortExpression="StudentName" />

<asp:BoundField DataField="Mobile" HeaderText="Mobile" SortExpression="Mobile" />

<asp:BoundField DataField="Email" HeaderText="Email" SortExpression="Email" />

</Columns>

</asp:GridView>

<asp:SqlDataSource ID="SqlDataSource" runat="server" ConnectionString="<%$ ConnectionStrings:TESTDBConnectionString %>" SelectCommand="SELECT * FROM [StudentTable] WHERE ([StudentName] LIKE '%' + @StudentName + '%')">

<SelectParameters>

<asp:ControlParameter ControlID="txtSearch" Name="StudentName" PropertyName="Text" Type="String" />

</SelectParameters>

</asp:SqlDataSource>

</asp:content>

 
Now run the page, it will look like the following. Enter the Student Name then Grid view Show Data.

 
run the page

Now run the page, it will look like the following. Enter the Student Name then LIKE Data Show in Grid View.

Data Show in Grid View

I hope this article is useful. If you have any other questions then please provide your comments in the following.