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.

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.



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".



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



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

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

 

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:

 

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

 

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

 

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

 

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.

 

Now run the page, it will look like the following. Enter the Student Name then LIKE 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.