or
Auto search example in asp.net
--> when type in the textbox then display search item in panel with mouse over effect
--> if you want to create auto complete or auto search functionality in your asp.net application that time do following
--> first you take textbox from toolbox in your page
------------------------------------------------------------------------------------------------
Search : <asp:TextBox ID="txtName" runat="server" Width="300px"></asp:TextBox>
-->add AutoCompleteExtender control (if Ajax control toolkit add otherwise download Ajax control toolkit)
--> next add following code in your source (.aspx) file
------------------------------------------------------------------------------------------------
<cc1:autocompleteextender ID="AutoCompleteExtender1" runat="server"
CompletionInterval="10" Enabled="True" FirstRowSelected="True"
MinimumPrefixLength="1" ServiceMethod="getData"
TargetControlID="txtName"
UseContextKey="True" CompletionListCssClass="AutoExtender" // 3 css class define below
CompletionListItemCssClass="AutoExtenderList"
CompletionListHighlightedItemCssClass="AutoExtenderHighlight"
CompletionListElementID="divwidth">
</cc1:autocompleteextender>
//ServicePath="~/WebService.asmx"
//this use when your function (here getData -web service) is another file or in .asmx file
--> next add following code in your source (.aspx) file in head section
------------------------------------------------------------------------------------------------
<style type="text/css">
.AutoExtender
{
font-family: Verdana, Helvetica, sans-serif;
font-size: .9em;
font-weight: normal;
text-align:left;
border: solid 1px #E5E5E5;
line-height: 20px;
padding: 1px;
background-color: White;
margin-left:1px;
margin-top:0px;
}
.AutoExtenderList
{
border-bottom: none 1px #FFFFFF;
cursor: pointer;
color: Black;
}
.AutoExtenderHighlight
{
color: black;
background-color: gray;
cursor: pointer;
}
</style>
next add this code or web service in code behind file
------------------------------------------------------------------------------------------------
[System.Web.Script.Services.ScriptMethod()]
[System.Web.Services.WebMethod]
public static List<string> getData(string prefixText)
{
SqlConnection con = new SqlConnection(ConfigurationManager.ConnectionStrings["conn"].ToString()); //ConnectionString
con.Open();
SqlCommand cmd;
cmd = new SqlCommand("select top(10) Id,Name from tbl_Student where Name like '" + prefixText + "%'", con); //Your database table name and field name
SqlDataAdapter da = new SqlDataAdapter(cmd);
DataTable dt = new DataTable();
da.Fill(dt);
List<string> Clientname = new List<string>();
for (int i = 0; i < dt.Rows.Count; i++)
{
Clientname.Add("'" + dt.Rows[i]["Name"].ToString() + "'"); // this field fill when type in the textbox
}
con.Close();
return Clientname;
}
--> now run this page and type textbox then display list item.
Auto search example in asp.net
--> when type in the textbox then display search item in panel with mouse over effect
--> if you want to create auto complete or auto search functionality in your asp.net application that time do following
--> first you take textbox from toolbox in your page
------------------------------------------------------------------------------------------------
Search : <asp:TextBox ID="txtName" runat="server" Width="300px"></asp:TextBox>
-->add AutoCompleteExtender control (if Ajax control toolkit add otherwise download Ajax control toolkit)
--> next add following code in your source (.aspx) file
------------------------------------------------------------------------------------------------
<cc1:autocompleteextender ID="AutoCompleteExtender1" runat="server"
CompletionInterval="10" Enabled="True" FirstRowSelected="True"
MinimumPrefixLength="1" ServiceMethod="getData"
TargetControlID="txtName"
UseContextKey="True" CompletionListCssClass="AutoExtender" // 3 css class define below
CompletionListItemCssClass="AutoExtenderList"
CompletionListHighlightedItemCssClass="AutoExtenderHighlight"
CompletionListElementID="divwidth">
</cc1:autocompleteextender>
//ServicePath="~/WebService.asmx"
//this use when your function (here getData -web service) is another file or in .asmx file
--> next add following code in your source (.aspx) file in head section
------------------------------------------------------------------------------------------------
<style type="text/css">
.AutoExtender
{
font-family: Verdana, Helvetica, sans-serif;
font-size: .9em;
font-weight: normal;
text-align:left;
border: solid 1px #E5E5E5;
line-height: 20px;
padding: 1px;
background-color: White;
margin-left:1px;
margin-top:0px;
}
.AutoExtenderList
{
border-bottom: none 1px #FFFFFF;
cursor: pointer;
color: Black;
}
.AutoExtenderHighlight
{
color: black;
background-color: gray;
cursor: pointer;
}
</style>
next add this code or web service in code behind file
------------------------------------------------------------------------------------------------
[System.Web.Script.Services.ScriptMethod()]
[System.Web.Services.WebMethod]
public static List<string> getData(string prefixText)
{
SqlConnection con = new SqlConnection(ConfigurationManager.ConnectionStrings["conn"].ToString()); //ConnectionString
con.Open();
SqlCommand cmd;
cmd = new SqlCommand("select top(10) Id,Name from tbl_Student where Name like '" + prefixText + "%'", con); //Your database table name and field name
SqlDataAdapter da = new SqlDataAdapter(cmd);
DataTable dt = new DataTable();
da.Fill(dt);
List<string> Clientname = new List<string>();
for (int i = 0; i < dt.Rows.Count; i++)
{
Clientname.Add("'" + dt.Rows[i]["Name"].ToString() + "'"); // this field fill when type in the textbox
}
con.Close();
return Clientname;
}
--> now run this page and type textbox then display list item.
No comments:
Post a Comment