Introduction:
Atlas Project has been introduced by Microsoft
which works with the ASP.NET 2.0 framework. Atlas enables your controls to make
client side calls and hence save the roundtrip to the server. This also means
that by using Atlas you can refresh your page without making a Postback. In this
article I will demonstrate that how you can use the AutoCompleteExtender control
which ships with the Atlas framework.
Downloading and Installing the Atlas
Project:
The first thing that you need to do is to
download the Atlas Project. You can visit the Atlas official website to download
the project (http://atlas.asp.net/Default.aspx?tabid=47).
After downloading Atlas simply unzip the zip file and install it. You must have
Visual Studio.NET 2005 installed on your computer before you install the Atlas
Project. After installing the Atlas Project you will see the Atlas Project type
in the Visual Studio.NET 2005 project templates. Simply, select the Atlas
website from the project templates which will create the basic template and
after that you are ready to make cool Atlas applications.
Registering Atlas Using Script Manager
Control:
The first step that you must take is to
register the Atlas script. It may sound a little complicated but actually it is
very simple. This is because you can use the Atlas Script Manager control to
register the scripts. Take a look at the code below which is used to register
the Atlas scripts to the page.
|
<atlas:ScriptManager
ID="ScriptManager1"
runat="server"
/> |
The above code will register your Atlas scripts
for the page. The ScriptManager control has various attributes that are used for
different purposes. Like EnablePartialRendering attribute is used when you are
using the Update Panel on the page and want to refresh only the contents inside
the panel rather than the whole page.
Using the AutoCompleteExtender Control:
The next step is to use the
AutoCompleteExtender Control which ships with the Atlas framework. Before using
the AutoCompleteExtender control you can create a simple ASP.NET TextBox
control. Take a look at the code below:
|
<asp:TextBox
ID="txtName"
runat="server"
/> |
Next step is to use the AutoCompleteExtender
control on the TextBox control to create the "Auto-Suggest" behavior. Take a
look at the code below to have a better idea:
|
<atlas:AutoCompleteExtender
ID="ac1"
runat="server">
<atlas:AutoCompleteProperties
Enabled="true"
MinimumPrefixLength="1"
ServicePath="GetNamesService.asmx"
TargetControlID
="txtName"
ServiceMethod="GetAllNames"
/>
</atlas:AutoCompleteExtender>
|
Let's take a moment to look into the properties
of the control:
Enabled: This means if the control is
active or not.
MinimumPrefixLength: This means that how
many characters you type in your TextBox to view the "Auto-Suggest" list. The
default value is 3.
ServicePath: The path to the Web
Service.
ServiceMethod: The method name inside
the Web Service.
The AutoCompleteExtender control by default
injects the panel control where the data is displayed. If you want to display
the "Auto-Suggest" data in your custom panel then you can use DropDownPanelID
attribute of the AutoCompleteExtender control. Please also note that at present
the AutoCompleteExtender control will overwrite all the style settings and hence
will be displayed with a white background.
Implementing the Web Service:
Let's implementing the Web Service which
handles the logic for retrieving the information. Simply, add a Web Service to
the project by right clicking on the project and selecting "Add New Item". The
Web Service will contain the method GetAllNames which is used to return the
matching names from the array. These names will be matched as soon as you type
the in the TextBox.
| [WebMethod]
public
string[]
GetAllNames(string
prefixText, int
count)
{
ArrayList
filteredList = new
ArrayList();
string[]
names = {"AzamSharp","Scott","Alex","Mary","John","Ali","Sam","Sammy",
"Sandy","Micheal","Andy","Pete","Steve","Bill"};
foreach
(string name
in
names)
{
if
(name.ToLower().StartsWith(prefixText.ToLower()))
filteredList.Add(name);
}
return
(string[])
filteredList.ToArray(typeof(string));
} |
As, you can see above the method GetAllNames
takes two parameters which are prefixText and count. Do not change
the names of these variables as right now they are hard coded by ASP.NET team.
The prefixText will contain the character that you typed in the TextBox and the
count by default contains 10. I think the purpose of count to initialize a
container that will contain 10 items to the user.
I have used a simple string array to hold the
names. I iterated through the names and if they start with the prefixText then I
insert them into the ArrayList. Finally I convert the ArrayList to the string
array and return to the user.
Take a look at the image below to see the
AutoCompleteExtender control in action.
I hope you liked the article, happy coding!