Building a SharePoint Service Application to Provide Auto-completion Services for AJAX-enabled Rich User Controls – Part 3 & 4
Part One – The Service Application
Part Two – The Service Application’s Admin Interface
Part Three – The WCF Service Endpoint
Part Four – The User Application Page
Browse Complete Source Code
Download Visual Studio 2010 Solution
Update 10/29/09: Added Powershell cmdlets to create, retrieve and update properties of the demo service application. Refer to the accompanying sample project for details.
Part Three – The WCF Service Endpoint
In this step, I’ll revisit the AutoCompletionServiceApplication class. In order for this class to provide ASP.NET AJAX auto completion services, I’ll start by decorating it with the AspNetCompatibilityRequirements attribute.
Next, I cause AutoCompletionServiceApplication to implement the IYouCompleteMeService interface and its required methods. These methods will provide auto-completion data to the AJAX-enabled input controls I’ll create in the next step.
Note that I’ve created a helper class to handle supplying data to the service methods. The actual data resides in a simple, albeit lengthy text file. CitiesHelper reads said data and performs simple Linq queries to filter on the correct city and state names. CiteiesHelper uses a singleton pattern to avoid excessive file I/O and memory usage. In a real-world production scenario, a more robust SQL database to house this data could have been provisioned along with the Service Application. However, for the purposes of this demonstration a simple text file will do fine. Refer to the accompanying project for the complete CitiesHelper code listing.
Part Four – The User Application Page
Download the ASP.NET AJAX Control Toolkit
The ASP.NET AJAX Control Toolkit is an open-source project built on top of the Microsoft ASP.NET AJAX framework. It is a joint effort between Microsoft and the ASP.NET AJAX community that provides a powerful infrastructure to write reusable, customizable and extensible ASP.NET AJAX extenders and controls, as well as a rich array of controls that can be used out of the box to create an interactive Web experience. I’m going to use the toolkit’s AutoCompleteExtender to transform a plain old SharePoint InputFormTextBox into an AJAX enabled overnight sensation!
- I’ll create a folder called Dependencies in the same directory as the Visual Studio solution file. I’ll need to download the ASP.NET AJAX Control Toolkit binaries from this URL and add the AjaxControlToolkit.dll to the Dependencies folder.
- http://www.asp.net/ajax/downloads/
Add a New Project and Test Page
In Visual Studio, I’m going to add a new SharePoint Empty Project to the solution and name it AutoCompletionDemoTest. This time, I’m sure to target a regular SharePoint content application (not Central Admin as before) from the SharePoint Customization Wizard.
I add a reference to the downloaded AjaxControlToolkit.dll from the AutoCompletionDemoTest project.
Next, I add a reference to System.Web.Extensions .NET framework assembly from the AutoCompletionDemoTest project.
I also add a project reference to the AutoCompletionDemo project from the AutoCompletionDemoTest project.
The AutoCompletionDemo project is only going to contain one test page. I’m going to add a new SharePoint Application page to the project and name it appropriately enough Test.aspx.
The main content section of Test.aspx is going to contain a placeholder for the map along with text input boxes for the user to key-in city and state names.
Test.aspx also contains a few Javascript methods to help with retrieving and formatting the map control based on users’ city and state input.
In code-behind file Test.aspx.cs is where I’m going to add control extenders for the page’s two text input controls. These extenders will handle communicate with the WCF service’s GetStates and GetCitiesForState web methods to provide suggested auto-completion data.
To tie everything together, I’ll also add a GetServicesEndpointPath helper method the test page’s code-behind. This method will go through the Auto Completion Service Application’s proxy to determine the default service endpoint.
Bringing It All Together
From Visual Studio, I’m going to re-deploy the AutocompleteDemo service application project to Central Admin to ensure the WCF endpoint’s logic is in place.
Next, I’ll deploy the AutocompleteDemoTest test project to a SharePoint content application.
To see the end result, I can browse to Test.aspx in my SharePoint Content Application by visiting the URL:
http://[myserver]/_LAYOUTS/AutoCompletionDemoTest/test.aspx
