Add AutoCompleteExtender to ASP.NET AJAX Web Site

There are migration guides on the ASP.NET AJAX homepage detailing how to convert Web Sites originally coded against the Atlas CTP to ASP.NET AJAX 1.0 Beta2.  Unfortunately at this time, the AutoCompleteExtender is only included in the ASP.NET AJAX Futures November CTP but it's relatively straightforward to add the AutoCompleteExtender to an AJAX Web Site.

1. Add a reference to the Microsoft.Extensions.Preview assembly, usually located in C:\Program Files\Microsoft ASP.NET\ASP.NET 2.0 AJAX Extensions\v1.0.61025. 

2. Add the elements below to the configuration\system.web\pages\controls element of the web.config file.

<add tagPrefix="asp" namespace="Microsoft.Web.Preview.UI" assembly="Microsoft.Web.Preview"/>

<add tagPrefix="asp" namespace="Microsoft.Web.Preview.UI.Controls" assembly="Microsoft.Web.Preview"/>

 

3. Add the ScriptManager, TextBox and AutoCompleteExtender controls to the Web Form.

 

<form id="form1" runat="server">

  <asp:ScriptManager ID="ScriptManager1" runat="server" />

  <div>

    <asp:TextBox ID="txtCity" runat="server" />

    <asp:AutoCompleteExtender ID="autoCity" runat="server" CompletionSetCount="8" TargetControlID="txtCity" MinimumPrefixLength="1" ServiceMethod="GetCities" ServicePath="AutoCompleteService.asmx"/>

  </div>

</form>

 

4. Finally, add the Web Service that the AutoCompleteExtender will call, making sure that the Place code in seperate file checkbox is unchecked so the code is inline.  The WebMethod needs to accept the prefixText and count as parameters, returning the valid list as a string array.  Also note the inclusion of the Microsoft.Web.Script.Services.ScriptService attribute on the class definition.

 

<%@ WebService Language="C#" Class="AutoCompleteService" %>

 

using System;

using System.Collections;

using System.Web;

using System.Web.Services;

using System.Web.Services.Protocols;

 

[Microsoft.Web.Script.Services.ScriptService]

public class AutoCompleteService  : System.Web.Services.WebService {

 

    [WebMethod]

    public string[] GetCities(string prefixText, int count)

    {

 

        string[] autoCompleteWordList = { "Canberra", "Sydney", "Darwin", "Brisbane", "Adelaide", "Hobart", "Melbourne", "Perth" };

        Array.Sort(autoCompleteWordList, new CaseInsensitiveComparer());

        int index = Array.BinarySearch(autoCompleteWordList, prefixText, new CaseInsensitiveComparer());

        if (index < 0)

        {

            index = ~index;

        }

 

        int matchingCount;

        for (matchingCount = 0; matchingCount < count && index + matchingCount < autoCompleteWordList.Length; matchingCount++)

        {

            if (!autoCompleteWordList[index + matchingCount].StartsWith(prefixText, StringComparison.CurrentCultureIgnoreCase))

            {

                break;

            }

        }

 

        String[] returnCities = new string[matchingCount];

        if (matchingCount > 0)

        {

            Array.Copy(autoCompleteWordList, index, returnCities, 0, matchingCount);

        }

        return returnCities;

    }

}

Maintaining GridView Scroll Position in an ASP.NET AJAX UpdatePanel

Sometimes, it is inappropriate to use the paging feature of the ASP.NET GridView.  Instead, a scrolling grid is more applicable and enclosing the GridView in a <div> tag with the overflow style applied ensures that the over-sized element is clipped and that scroll bars are displayed.

<asp:UpdatePanel ID="updateGrid" runat="server" UpdateMode="Conditional">
    <ContentTemplate>

        <input type="hidden" id="hdnScrollTop" runat="server" value="0" />

        <div id="divScroll" style="width:350px;height:200px; overflow-x:hidden; overflow-y:scroll;" onscroll="$get('hdnScrollTop').value = this.scrollTop;">
            <asp:gridview id="grdOrders" runat="server" width="95%" datasourceid="objDataSource" cellpadding="3" GridLines="Horizontal">
                <Columns>
                    <asp:CommandField ShowSelectButton="True" />
                </Columns>
            </asp:gridview>  
        </div>
    </ContentTemplate>
</asp:UpdatePanel>

It is slightly more complex to persist the scroll position during an syschronous postback using ASP.NET AJAX.  It's necessary to store the scrollTop property of the div tag in a hidden field using the client side onscroll event.  Note the use of the Sys.UI.DomElement $get method, which is a shortcut to the getElementById method. It's also important that the hidden input element has the runat="server" attribute so the element can be accessed during the pageLoaded function.

<asp:ScriptManager ID="scriptManager" runat="server" EnablePartialRendering="True" />
<script type="text/javascript" language="javascript">
    var prm = Sys.WebForms.PageRequestManager.getInstance();
    prm.add_pageLoaded(pageLoaded);
    prm.add_beginRequest(beginRequest);
    var postbackElement;

    function beginRequest(sender, args) {
        postbackElement = args.get_postBackElement();
    }

    function pageLoaded(sender, args) {
        var updatedPanels = args.get_panelsUpdated();
        if (typeof(postbackElement) == "undefined") {
            return;
        }
        if (postbackElement.id.toLowerCase().indexOf('grdorders') > -1) {
            $get("divScroll").scrollTop = $get("hdnScrollTop").value;
        }
     }
</script>

In order that the scroll position of the div can be reset after a postback, it is first necessary to add a reference to the PageRequestManager.  To use the PageRequestManager class in client script, you must first have a ScriptManager server control on the page. To access the PageRequestManager class, you must have the EnablePartialRendering set to true (the default) on the ScriptManager control. When EnablePartialRendering is set to true, the MicrosoftAjaxWebForms.js file that contains the PageRequestManager class is included as a script resource for the page.  Once you have the current instance of the PageRequestManager, you can access all of its methods, properties, and events such as beginRequest and pageLoaded.

The beginRequest event is raised before the processing of an asynchronous postback begins and the postback is sent to the server.  Here we get a reference to the element that has raised the postback. 

The pageLoaded event is raised after all content on the page is refreshed.  The function initially determines if the page has been posted back by checking the typeof the postbackElement.  If the postback was raised by a our GridView, the scrollTop property of our div tag is set to the value stored in the hidden field.

Client Page Life-cycle Events are also integral to Customizing Error Handling in Partial-Page Updates.