Resources For IT Professionals
Post an article
Wikis - Page Details
  • First published by
  • When: 19 Mar 2013 11:36 PM
  • Last revision by (cMVP, Microsoft Community Contributo)
  • When: 14 Apr 2013 10:13 AM
  • Revisions: 4
  • Comments: 1
Options
RSSSubscribe to Article (RSS)
Can You Improve This Article?
Positively! Click Sign In to add the tip, solution, correction or comment that will help other users.

Report inappropriate content using these instructions.
Wiki  >  TechNet Articles  >  Using AJAX AutoCompleteExtender with Web Services

Using AJAX AutoCompleteExtender with Web Services

Using AJAX AutoCompleteExtender with Web Services

Hi Techies,

This is my very first post to the asp.net wiki and hope to have many post in the future.
Today I will demonstrate you on how to populate a text box with suggested values when user types a character in text box using a AJAX Auto Complete Extender. This demonstrate uses web service to get data from the database.
Suppose I have a database called "Demo" and have a table called "tblFlightInformation" to store Flight Schedule details.


Following is the database table script;
USE [Demo]
 GO
 SET ANSI_NULLS ON
 GO
 SET QUOTED_IDENTIFIER ON
 GO
 SET ANSI_PADDING ON
 GO
 CREATE TABLE [dbo].[tblFlightInformation](
  [FlightId] [int] NOT NULL,
  [FlightDestination] [varchar](50) COLLATE SQL_Latin1_General_CP1_CI_AS NULL,
  [FlightLeaveTime] [datetime] NULL,
  [FlightReturnTime] [datetime] NULL,
 CONSTRAINT [PK_tblFlightInformation] PRIMARY KEY CLUSTERED
 (
  [FlightId] ASC
 )WITH (IGNORE_DUP_KEY = OFF) ON [PRIMARY]
 ) ON [PRIMARY]
  
GO
 SET ANSI_PADDING OFF



Lets populate the table with sample data;

INSERT INTO dbo.tblFlightInformation (FlightId, FlightDestination, FlightLeaveTime, FlightReturnTime)
 VALUES (1, 'India', '2011-11-12 19:30:00', '2011-11-12 23:00:00')
  
INSERT INTO dbo.tblFlightInformation (FlightId, FlightDestination, FlightLeaveTime, FlightReturnTime)
 VALUES (2, 'Italy', '2011-11-13 06:00:00', '2011-11-13 12:45:00')
  
INSERT INTO dbo.tblFlightInformation (FlightId, FlightDestination, FlightLeaveTime, FlightReturnTime)
 VALUES (3, 'Singapore', '2011-11-13 04:10:00', '2011-11-14 01:15:00')
  
INSERT INTO dbo.tblFlightInformation (FlightId, FlightDestination, FlightLeaveTime, FlightReturnTime)
 VALUES (4, 'America', '2011-12-01 09:20:00', '2011-12-06 08:50:00')
  
INSERT INTO dbo.tblFlightInformation (FlightId, FlightDestination, FlightLeaveTime, FlightReturnTime)
 VALUES (5, 'Saudi Arabia', '2011-12-10 23:10:00', '2011-12-13 19:10:00')



Lets create an asp.net web site and add a web service (WebServiceFlightInformation.asmx) and a web method called "LoadDestinationInformation".

[WebMethod]
 public List<string> LoadDestinationInformation(string prefixText)
 {
 using (SqlConnection conn = new SqlConnection())
 {
 conn.ConnectionString = ConfigurationManager.ConnectionStrings["FlightInformation"].ConnectionString;
  
using (SqlCommand cmd = new SqlCommand())
 {
 cmd.CommandText = "select FlightDestination from tblFlightInformation where " +
 "FlightDestination like @FlightDestination + '%'";
 cmd.Parameters.AddWithValue("@FlightDestination", prefixText);
 cmd.Connection = conn;
 conn.Open();
  
List<string> FlighDestination = new List<string>();
  
using (SqlDataReader sdr = cmd.ExecuteReader())
 {
 while (sdr.Read())
 {
 FlighDestination.Add(sdr["FlightDestination"].ToString());
 }
 }
  
conn.Close();
 return FlighDestination;
 }

}

After that lets create the user interface by adding a aspx page to our web site. Following is the mark up for the aspx page.

<%@ Page Title="Home Page" Language="C#" AutoEventWireup="true"
 CodeFile="Default.aspx.cs" Inherits="_Default" %>
  
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajax" %>
  
 <head id="Head1" runat="server">
 <title>Ajax AutoCompleteExtender without Webservice</title>
 </head>
 <body>
 <form id="form1" runat="server">
 <ajax:ToolkitScriptManager ID="ScriptManager1" runat="server" EnablePageMethods = "true"/>
 <div>
 <asp:TextBox ID="txtCountry" runat="server" AutoPostBack="True"></asp:TextBox>
 <ajax:AutoCompleteExtender ID="AutoCompleteExtender1"
runat="server"
TargetControlID="txtCountry"
 MinimumPrefixLength="1"
EnableCaching="true"
CompletionSetCount="1"
CompletionInterval="1000"
ServiceMethod="LoadDestinationInformation"
ServicePath="WebServiceFlightInformation.asmx">
 </ajax:AutoCompleteExtender>
 </div>
 </form>
 </body>
 </html>


, , , , , [Edit tags]
Leave a Comment
  • Please add 6 and 1 and type the answer here:
  • Post
Wiki - Revision Comment List(Revision Comment)
Sort by: Published Date | Most Recent | Most Useful
Comments
  • 14 Apr 2013 10:13 AM

    Richard Mueller edited Revision 2. Comment: Replace rgb values in HTML with color names to restore colors

Page 1 of 1 (1 items)
Wikis - Comment List
Sort by: Published Date | Most Recent | Most Useful
Posting comments is temporarily disabled until 10:00am PST on Saturday, December 14th. Thank you for your patience.
Comments
  • Posted by
    on 14 Apr 2013 10:13 AM

    Richard Mueller edited Revision 2. Comment: Replace rgb values in HTML with color names to restore colors

Page 1 of 1 (1 items)