In this article I will show how to build an auto complete text box from an ASP.net text box control. With the help of Atlas it's very easy to have your pages have AJAX abilities. here is a screen at the final product
�Atlas� is a free framework for building a new generation of richer, more interactive, highly personalized cross-browser web applications. This new web development technology from Microsoft integrates cross-browser client script libraries with the ASP.NET 2.0 server-based development framework. In addition, �Atlas� offers you the same type of development platform for client-based web pages that ASP.NET offers for server-based pages. And because �Atlas� is an extension of ASP.NET, it is fully integrated with server-based services. �Atlas� makes it possible to easily take advantage of AJAX techniques on the web and enables you to create ASP.NET pages with a rich, responsive UI and server communication. However, �Atlas� isn�t just for ASP.NET. You can take advantage of the rich client framework to easily build client-centric web applications that integrate with any backend data provider and run on most modern browsers.
System Requirements:
First we start with a very simple ASP.net html page: <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title>Untitled Page</title> </head> <body> <form id="form1" runat="server"> <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox> </form> </body> </html>
As you can see there is not much to know in this code, all I have here is a simple server side asp.net text box. Now the the objective is to get this text box have Ajax abilites and make it a autocomplete text box, for that I would need to add a ScriptManager Atlas control
<atlas:ScriptManager ID="ScriptManager1" runat="server" />
The ScriptManager control is central to "Atlas". It manages all "Atlas" components on a page, handles partial page updates, and renders client scripts that enable you to access Web service methods from JavaScript using proxy objects. The next thing we want to add under our Text box control is our AutoCompleteExtender control from Atlas:<atlas:AutoCompleteExtender ID="AutoCompleteExtender1" runat="server">
<atlas:AutoCompleteProperties Enabled="true"
MinimumPrefixLength="1"
TargetControlID="TextBox1"
ServicePath="~/Services/ProductService.asmx"
ServiceMethod="FindProducts" />
</atlas:AutoCompleteExtender>
What is AutoCompleteExtender ?
The AutoCompleteBehavior component extends text box controls with auto-completion behavior, which sends the text that the user has entered to a Web service method to obtain a list of suggestions for completing the text. The result is displayed in a drop-down panel underneath the text box. The user can use either the mouse or the keyboard to select one of the suggested strings. To extend a text box with the auto complete behavior, create a Web service containing a method with the following signature:
To extend a text box with the auto complete behavior, create a Web service containing a method with the following signature:
public string[] GetSuggestions(string prefixText, int count);
<%
@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %><!
DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"><
html xmlns="http://www.w3.org/1999/xhtml"><
head runat="server"> <title>Untitled Page</title></
head><
body> <form id="form1" runat="server"> <atlas:ScriptManager ID="ScriptManager1" runat="server" /> <div> </div> <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox> <atlas:AutoCompleteExtender ID="AutoCompleteExtender1" runat="server"> <atlas:AutoCompleteProperties Enabled="true" MinimumPrefixLength="1" TargetControlID="TextBox1" ServicePath="~/Services/ProductService.asmx" ServiceMethod="FindProducts" /> </atlas:AutoCompleteExtender> </form></
body></
html>public static SqlDataReader GetProductLists(String owner) { SqlDataReader reader = SqlHelper.ExecuteReader(ConnectionString, "GetProjectLists", owner); return reader; }
Our Web Service will call this function, to get all the records that start with a given string (the string that you type in your text box). I know that this function will be called everytime the user will push a key therefore I decided to call a store procudure. Our Store Procedure is very simple, it take only one parameter and does a sql select with all the Product names that start with that parameter:
SELECT
ProductName
FROM
Products
WHERE
ProductName like @pProductName +'%'
Let's have a look at the code:
[WebMethod] public String[] FindProducts(String prefixText, int count) { //return all records whose Title starts with the prefix input string List<STRING> titleArList = new List<STRING>(); SqlDataReader drProducts = sqlProductProvider.GetProductLists(prefixText); while (drProducts.Read()) { String strTemp = Convert.ToString(drProducts["ProductName"]); titleArList.Add(strTemp); } return titleArList.ToArray(); }The WebMethod FindProducts will be called each time the use types in the text box, passing two values
public string[] GetSuggestions(string prefixText, int count);
SqlDataReader drProducts = sqlProductProvider.GetProductLists(prefixText);
while (drProducts.Read())
{
String strTemp = Convert.ToString(drProducts["ProductName"]);
titleArList.Add(strTemp);
}
return titleArList.ToArray();
Here are the steps to run my code
1. download the zip file
2. copy all the folder "AtlasTextBoxAutoComplete" to your web site folder (C:\Documents and Settings\[your name]\My Documents\Visual Studio 2005\WebSites)
3. Open VS2005 and Create a new C# web site called "AtlasTextBoxAutoComplete" (don't need to select the Atlas template since my site already have all the Atlas dlls) and point the site to the location you saved your folder (C:\Documents and Settings\[your name]\My Documents\Visual Studio 2005\WebSites\AtlasTextBoxAutoComplete)
4. VS2005 will give you a message saying "Web Site already exists", now you select "Open the existing web site" and push ok
5. click on default.aspx (to make it your start up page) and run.
6. Type the Letter "c" and wait 3 seconds...and see the magic. (the look up is on the product Table on Product Name)
Feel free to leave any feedback on this article, it's my first one so go easy on me.
| You must Sign In to use this message board. | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
(i mean, when i type into the TextBox, it doesn't displays me the list of matching records). It also doesn't show any error...
and what shall i do to get my AutoCompleteExtender working...???