Category >
ASP.NET
|| Published on :
Wednesday, September 2, 2015 || Views:
7255
||
AJAX AutoCompleteExtender Example in ASP.Net AJAX AutoCompleteExtender
In this example I will explain you with an example with sample source code how to use ASP.Net AJAX Control Toolkit AutoCompleteExtender Control using C#. The example will work for ASP.Net 3.5 and 4.0
Please note for AJAX Control Toolkit.
Introduction:
Here I am explaining, how to use AJAX AutoCompleteExtender Control directly with ASP.Net Web Page using any web service.
AJAX AutoComplete:
AutoComplete is an ASP.NET AJAX extender that can be attached to any TextBox control, and will associate that control with a popup panel to display list of words that begin with the prefix typed into the textbox.
Here I’m going to demonstrate you, the textbox is associated with an ASP.NET AJAX extender that pulls words that start with the contents of the textbox using a web service.
Now I will explain How to develop AJAX AutoCompleteExtender Example in ASP.Net
So follow the steps to learn asp.net AJAX AutoCompleteExtender Example in ASP.Net
Database :
1. Create a database in SQL Server with Name "DEMO"
2. Create a table - "Employee" with the following schema:-
USE [demo]
GO
/****** Object: Table [dbo].[Employee] Script Date: 09/02/2015 21:46:37 ******/
SET ANSI_NULLS ON
GO
SET QUOTED_IDENTIFIER ON
GO
SET ANSI_PADDING ON
GO
CREATE TABLE [dbo].[Employee](
[EmpId] [bigint] IDENTITY(1,1) NOT NULL,
[EmpName] [varchar](50) NULL,
CONSTRAINT [PK_Employee] PRIMARY KEY CLUSTERED
(
[EmpId] ASC
)WITH (PAD_INDEX = OFF, STATISTICS_NORECOMPUTE = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS = ON,
ALLOW_PAGE_LOCKS = ON) ON [PRIMARY]
) ON [PRIMARY]
GO
SET ANSI_PADDING OFF
GO
3. Add some dummy data into the table - "Employee" created above
Step 1: First, We start by creating an Empty asp.net web site in Visual Studio .NET 2013.
Step 2: Add the AJAX Control Toolkit DLL to the bin folder of the web application.
Step 3: Create an ASPX Page for Right Click on Solution Explorer > Add Items > Web > Webform and save it as "Default.aspx". When we first open our Default.aspx page
Note: Add the following connection string in web config
<connectionStrings>
<add name="ConnectionString" connectionString="Data Source=localhost; Initial Catalog=Demo; Integrated Security=True"/>
</connectionStrings>
Step 4: Now add the following controls to the ASP.NET page created earlier.
- ScriptManager
- TextBox
- AutoCompleteExtender
Step 5: The complete code of aspx page will be given below
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>
<!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">
<title>How to AJAX AutoCompleteExtender Example in ASP.Net</title>
</head>
<body style="background:#C9C9C9">
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<div align="center" style="font-family:Calibri"><h2><b>AJAX AutoComplete</b></h2> </div>
<br />
<div align="center">
<asp:TextBox ID="txtName" runat="server"></asp:TextBox>
<asp:AutoCompleteExtender ID="AutoCompleteExtender1" runat="server" TargetControlID="txtName"
MinimumPrefixLength="1" EnableCaching="true" CompletionSetCount="1" CompletionInterval="1000"
ServiceMethod="GetName" >
</asp:AutoCompleteExtender>
</div>
</form>
</body>
</html>
Step 6: he complete code of code behid will be given below:-
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;
using System.Configuration;
public partial class _Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
}
[System.Web.Script.Services.ScriptMethod()]
[System.Web.Services.WebMethod]
public static List<string> GetName(string prefixText)
{
DataTable dt = new DataTable();
string constr = ConfigurationManager.ConnectionStrings["ConnectionString"].ToString();
SqlConnection con = new SqlConnection(constr);
con.Open();
SqlCommand cmd = new SqlCommand("select * from Employee where EmpName like @Emp+'%'", con);
cmd.Parameters.AddWithValue("@Emp", prefixText);
SqlDataAdapter adp = new SqlDataAdapter(cmd);
adp.Fill(dt);
List<string> EmpNames = new List<string>();
for (int i = 0; i < dt.Rows.Count; i++)
{
EmpNames.Add(dt.Rows[i][1].ToString());
}
return EmpNames;
}
}
Conclusion:
So, In this tutorial we have learned, How to AJAX AutoCompleteExtender Example in ASP.Net detailed explanation.
Download Source Codes