MOSS, AJAX and the AutoCompleteExtender

This article will look at utilising ASP.Net 2.0 AJAX inside WSS 3.0. This article is also based off some great work completed by Todd Bleeker in his book Developers Guide To Windows SharePoint Services 3.0.

To complete the code associated with this article you will need to install ASP.Net 2.0 AJAX Extensions and the ASP.Net 2.0 AJAX Control Toolkit as we will be utilising AJAX Extensions, namely the AutoCompleteExtender control.

The first thing you need to do is make your WSS site AJAX ready. This blog article from the SharePoint team takes you through the steps in completing this and also has a nice little web part example to test and make sure everything is working as it should be.

Ok, what we are going to demonstrate is creating an AutoComplete Web Part that provides users with the ability to filter a drop down list as they type in a text box. See image below. This will be a two step process, firstly creating a web service that is the data source for the drop down list, and secondly creating the AutoComplete Web Part. I must also point out that there is no difference between creating this Web Part in WSS 3.0 or any standard ASP.Net 2.0 application (which is what WSS is J).

Web Service

1. Open VS.Net and choose ASP.Net AJAX Enabled Web Site template (if you don’t see this option then you need to install ASP.Net 2.0 AJAX)
2. Ensure location is HTTP and enter a URL like http://localhost/WebServices.
3. In Solution Explorer, right click the project name and add a new item. Choose Web Service from the templates window.
4. Enter SimpleWebService for the name and uncheck the Select code in separate file checkbox.
5. Decorate the class with the ScriptService to enable AJAX calls.

   [Microsoft.Web.Script.Services.ScriptService]
   public class SimpleWebService : System.Web.Services.WebService

6. Create a WebMethod that will return a list of employees. The WebMethod must conform to the precise interface expected by the AutoComplete extender control which includes two arguments that must be named prefixText and count. The prefixText argument contains the letters typed by the end user and the count contains the maximum number of items returned.

   [WebMethod]

   [Microsoft.Web.Script.Services.Script]Method]

   public System.Collections.Generic.List<string> GetEmployees(string prefixText, int count)

   {

                   string[] employees = new string[]{

   “Adam Wells”,

   “James MacGuire”,

   “Jeff Phillps”,

   “Jemma Knowles”,

   “Mary Jullop”,

   “Mark Dent”};

   System.Collections.Generic.List<string> employeeList = new System.Collections.Generic.List<string>();

   Int i = 0;

   foreach(string employee in employees)

   {

                   //check if max number of employees has been reached

                   if(i == count)

                   {

                                   break;

   }

   else if(employee.ToLower().StartsWith(preficText.ToLower()))

   {

                   employeeList.Add(employee);

                   i++;

   }

   }

   return employeeList;

   }

   This WebMethod returns a string array containing the first and last name for employees. This example could easily be altered to return a result from a database.

7. This ends the Web Service/WebMethod necessary for the AutoCompleteExtender control.

Ok, now for the Web Part.

1. Open VS.Net and create a new Class Library project. Enter AJAXStyleWebParts for the name.
2. Add a reference to the ASP.Net AJAX assembly (Microsoft.Web.Extension.dll), and to the toolkit assembly AjaxControlToolKit (the extender controls are not found in the core ASP.Net AJAX assembly and you will need to build the ToolKit solution that you downloaded previously at the beginning of the article).
3. Add a new class called AutoCompleteWebPart : System.Web.UI.WebControls.WebParts.WebPart (and inherit WebPart class)
4. Add declarations to the top of the class:using

   using System.Web;

   using System.Web.UI.WebControls;
   using AjaxControlToolkit;

5. Override the CreateChildControls method

protected override void CreateChildControls()

{

            //establish a path to the web service

            string webServicePath = “http://localhost/WebServices/SimpleWebService.asmx”; 

            try

{

//TextBox label

Literal textboxLabel = new Literal();

textboxLabel.Text = “”Type the name of a Employee: “;

this.Controls.Add(textboxLabel);

 

//TextBox to extend with the AutoComplete AJAX behaviour. Note: this is a normal asp textbox

TextBox textbox = new TextBox();

textbox.Attributes.Add(“id”, “SelectEmployeeTextBox”);

this.Controls.Add(textbox);

 

//autocomplete AJAX behaviour

AutoCompleteExtender autoComplete = new AutoCompleteExtender();

autoComplete.MinimumPrefixLength = 1;

autoComplete.ServicePath = webServicePath;

autoComplete.ServiceMethod = “GetEmployees”;

autoComplete.TargetControlID = “SelectEmployeeTextBox”;

this.Controls.Add(autoComplete);

}

catch(Exception ex)

{

                Literal errMsg = new Literal();

                errMsg.Text = ex.Message;

                this.Controls.Add(errMsg);

}

}

6. This ends our AutoComplete Web Part. Now all we have to do deploy to the web applications bin directory or GAC, add a safe control entry, recycle the app pool, add the Web Part to the gallery and then add to your WSS page.
7. Type the letters “mar” in the textbox to see the Web Part in action.

So, now you have AJAX’ed your WSS site, created a Web Part and implemented the AutoCompleteExtender control which I think provides great functionality for any WSS site.