AutoSuggestMenu uses Microsoft Ajax Extensions to retreive suggestions from the server.
You can download the latest version of "Microsoft Ajax Extenstions" from here.
There are two methods you could use:
- PageMethods - add GetSuggestions code to the code behind of the page that contains AutoSuggestMenu
- WebService - re-use GetSuggestions functionality for one or multiple pages
How to Use PageMethods
To use page methods - you need to have the following code on your ASPX page:
<asp:ScriptManager ID="scriptManager" EnablePageMethods="true" runat="server"/>
<asp:TextBox id="txtCity" MaxLength="100" Columns="30" runat="server"/>
<Custom:AutoSuggestMenu id="asmCity"
TargetControlID="txtCity"
runat="server"/>
Please make sure that EnablePageMethods is set to true in ScriptManager.
In code behind you will need to implement GetSuggestions method.
Name of this method can be changed using AutoSuggestMenu.onGetSuggestions property.
Here is what code-behind will look like:
using System.Collections.Generic;
using System.Web.Services;
using ENTech.WebControls;
...
[WebMethod()]
public static string GetSuggestions(string keyword, bool usePaging, int pageIndex, int pageSize)
{
List<AutoSuggestMenuItem> menuItems;
//Load suggestions. Take paging into account if usePageing is true.
//Convert suggestions list into JSON format and return
return AutoSuggestMenu.ConvertMenuItemsToJSON(menuItems, totalResults);
}
For more details code-behind of Demo1 example available in download.
How to use WebService
First you need to add WebService class to your project. To do that:
- Right click on the web directory where you would like web service to reside
- Select Add New Item
- Select "Web Service" item type and specify web service name. Click OK
- You will now have "<Web Service Name>.asmx" in specified directory and "<Web Service Name>.cs" code-behind in /App_Code
Then you need to link AutoSuggestMenu to a web service method.
To do that add service reference to ScriptManager declaration and then specify appropriate
webservice method in AutoSuggestMenu.OnGetSuggestions.
The code in you web page (ASPX) will look like:
...
<asp:ScriptManager ID="scriptManager" runat="server">
<Services>
<asp:ServiceReference Path="~/TestWebService.asmx" />
</Services>
</asp:ScriptManager>
...
<asp:TextBox id="txtCity" MaxLength="100" Columns="30" runat="server"/>
<Custom:AutoSuggestMenu id="asmCity"
TargetControlID="txtCity"
UsePageMethods="false"
OnGetSuggestions="TestWebService.GetCitySuggestions"
runat="server"/>
Lastly declare WebMethod that you specifed in AutoSuggestMenu in "<Web Service Name>.cs".
Make sure you add [ScriptService] to web service class declaration.
The method will look pretty much like the code behind in PageMethods approach:
using System.Collections.Generic;
using System.Web.Services;
using ENTech.WebControls;
...
[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
[ScriptService]
public class TestWebService : System.Web.Services.WebService
{
...
[WebMethod()]
public static string GetCitySuggestions(string keyword, bool usePaging, int pageIndex, int pageSize)
{
List<AutoSuggestMenuItem> menuItems;
//Load suggestions. Take paging into account if usePageing is true.
//Convert suggestions list into JSON format and return
return AutoSuggestMenu.ConvertMenuItemsToJSON(menuItems, totalResults);
}
...
}
CSS
There are four CSS classes that control the look of suggest menu.
You can cusomize them by modifiying 'AutoSuggestMenu.css'.
The classes are:
|
Name
|
Description
|
|
.asmMenu
|
The look of the whole menu and how the items are positioned within it.
|
|
.asmMenuItem
|
Describes how each menu item is displayed.
|
|
.asmSelMenuItem
|
CSS Class for selected menu item.
|
|
.asmNavigationLink
|
For displaying "next page"/"previous page" links when paging is used.
|