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