MSDN Magazine - February 2008 - (Page 48) hidden field. The completion list associated with a given prefix is stored into an internal array using the prefix as the key. Then it is retrieved whenever the same prefix is isolated in the textbox buffer. As a result, if the user types the same prefix repeatedly, no new request is placed over the wire to the back-end service. Client-side caching is clearly more effective than server-side caching, which would save you a few round-trips to the database but not round-trips to the Web server. In the code shown in Figure 4, the service loads all customers in the database and stores the list in the ASP.NET cache. It then retrieves the list of customers from there and filters the names that match the prefix. As mentioned, the Web service you use to provide suggestions has to be an ASP.NET AJAX script service and will talk to the client via JSON. You’ll need to decide if the service will be publicly available to SOAP clients as well. ASP.NET AJAX services have dual functionalities by default—both JSON and SOAP. You can turn off SOAP clients by adding the following to the web.config file of the host application: Styling the AutoComplete Extender The AutoComplete extender supports properties through which you indicate the CSS classes to be used to style parts of the control. In particular, you can style the overall flyout region including borders and background color. You can also use different settings for all items and the selected item. No predefined style is supplied for the alternating item. By default, the first element in the dropdown completion list is not selected. The FirstRowSelected property, though, can be used to force the automatic selection of the first item. The completion list shows up after the specified number of milliseconds has elapsed. This is controlled via the CompletionInterval property and set to one second by default. After that time has elapsed, the extender places the call to the service to get the list of suggestions. Figure 4 Sample Suggestion Service using using using using using using using System; System.Web; System.Web.Services; System.Web.Services.Protocols; System.Data; System.Data.SqlClient; System.Web.Script.Services; With ASP.NET 3.5, you can also bind the AutoComplete extender to a Windows® Communication Foundation (WCF) service using a service (SVC) endpoint. The extender uses the following JavaScript code to place the call: Sys.Net.WebServiceProxy.invoke( this.get_servicePath(), this.get_serviceMethod(), false, params, Function.createDelegate(this, this._onMethodComplete), Function.createDelegate(this, this._onMethodFailed), text); [WebService(Namespace = “MsdnMag.Articles”)] [ScriptService] public class SuggestionService : System.Web.Services.WebService { [WebMethod] public string[] GetSuggestions(string prefixText, int count) { DataView data = GetData(); data = FilterData(data, prefixText); int totalCount = data.Count; if (data.Count > count) totalCount = count; string[] suggestions = new string[totalCount]; int i = 0; foreach (DataRowView row in data) { suggestions[i++] = (string) row[“companyname”]; if (i >= count) break; } } return suggestions; For the WebServiceProxy class in the Microsoft AJAX client library, all that matters is that the specified endpoint can successfully handle requests with the content-type request header set to “application/json; charset=utf-8”. To create a WCF service for providing suggestions, you need a class similar to the following: [ServiceContract(Namespace = “MsdnMag.Services”)] [AspNetCompatibilityRequirements( RequirementsMode = AspNetCompatibilityRequirementsMode.Allowed)] public class MySuggestionService { [OperationContract] public string[] GetSuggestions(string prefixText, int count) { } } private DataView GetData() { DataView view = (DataView)HttpContext.Current.Cache[“Suggestions”]; if (view == null) { SqlDataAdapter adapter = new SqlDataAdapter( “SELECT * FROM customers”, “ ”); DataTable table = new DataTable(); adapter.Fill(table); view = table.DefaultView; } } HttpContext.Current.Cache[“Suggestions”] = view; In addition, you need an SVC endpoint, as shown here: return view; To register the service, you can add an explicit endpoint to the serviceModel section of the web.config file using the webHttpBinding binding model. Or, you can specify the Factory attribute in the @ ServiceHost directive and make it point to the following class: System.ServiceModel.Activation.WebScriptServiceHostFactory } private DataView FilterData(DataView view, string prefix) { view.RowFilter = String.Format(“companyname LIKE ‘{0}%’”, prefix); return view; } 48 msdnmagazine Cutting Edge
For optimal viewing of this digital publication, please enable JavaScript and then refresh the page. If you would like to try to load the digital publication without using Flash Player detection, please click here.