AJAX ModalPopup Demonstration

The ModalPopup extender allows a page to display content to the user in a "modal" manner which prevents the user from interacting with the rest of the page. The modal content can be any hierarchy of controls and is displayed above a background that can have a custom style applied to it. When displayed, only the modal content can be interacted with; clicking on the rest of the page does nothing. When the user is done interacting with the modal content, a click of an OK/Cancel control dismisses the modal content and optionally runs custom script. The custom script will typically be used to apply whatever changes were made while the modal mode was active. If a postback is required, simply allow the OK/Cancel control to postback and the page to re-render. You can also absolutely position a modal popup by setting the X and Y properties. By default it is centered on the page, however if just X or Y is specified then it is centered vertically or horizontally.
ModalPopup Properties

The control above is initialized with this code. The display on the modal popup element is set to none to avoid a flicker on render. The italic properties are optional:

<ajaxToolkit:ModalPopupExtender ID="MPE" runat="server"
    TargetControlID="LinkButton1"
    PopupControlID="Panel1"
    BackgroundCssClass="modalBackground" 
    DropShadow="true" 
    OkControlID="OkButton" 
    OnOkScript="onOk()"
    CancelControlID="CancelButton" 
    PopupDragHandleControlID="Panel3" />

• TargetControlID - The ID of the element that activates the modal popup
• PopupControlID - The ID of the element to display as a modal popup
• BackgroundCssClass - The CSS class to apply to the background when the modal popup is displayed
• DropShadow - True to automatically add a drop-shadow to the modal popup
• OkControlID - The ID of the element that dismisses the modal popup
• OnOkScript - Script to run when the modal popup is dismissed with the OkControlID
• CancelControlID - The ID of the element that cancels the modal popup
• OnCancelScript - Script to run when the modal popup is dismissed with the CancelControlID
• PopupDragHandleControlID - The ID of the embedded element that contains the popup header/title which will be used as a drag handle
• X - The X coordinate of the top/left corner of the modal popup (the popup will be centered horizontally if not specified)
• Y - The Y coordinate of the top/left corner of the modal popup (the popup will be centered vertically if not specified)
• RepositionMode - The setting that determines if the popup needs to be repositioned when the window is resized or scrolled.

AJAX AutoComplete Demonstration

AutoComplete is an ASP.NET AJAX extender that can be attached to any TextBox control, and will associate that control with a popup panel to display words that begin with the prefix typed into the textbox.
AutoComplete Properties :
The textbox is linked with an AutoCompleteExtender which is initialized with this code. Theitalic properties are optional:

<ajaxToolkit:AutoCompleteExtender 
    runat="server" 
    ID="autoComplete1" 
    TargetControlID="myTextBox"
    ServiceMethod="GetCompletionList"
    ServicePath="AutoComplete.asmx"
    MinimumPrefixLength="2" 
    CompletionInterval="1000"
    EnableCaching="true"
    CompletionSetCount="20" 
    CompletionListCssClass="autocomplete_completionListElement" 
    CompletionListItemCssClass="autocomplete_listItem" 
    CompletionListHighlightedItemCssClass="autocomplete_highlightedListItem"
    DelimiterCharacters=";, :"
    ShowOnlyCurrentWordInCompletionListItem="true">
        <Animations>
            <OnShow> ... </OnShow>
            <OnHide> ... </OnHide>
        </Animations>
</ajaxToolkit:AutoCompleteExtender>
    

• TargetControlID - The TextBox control where the user types content to be automatically completed
• ServiceMethod - The web service method to be called. The signature of this method must match the following:

  [System.Web.Services.WebMethod]
  [System.Web.Script.Services.ScriptMethod]
  public string[] GetCompletionList(string prefixText, int count) { ... }

  Note that you can replace "GetCompletionList" with a name of your choice, but the return type and parameter name and type must exactly match, including case.
• ServicePath - The path to the web service that the extender will pull the word\sentence completions from. If this is not provided, the service method should be a page method.
• ContextKey - User/page specific context provided to an optional overload of the web method described by ServiceMethod/ServicePath. If the context key is used, it should have the same signature with an additional parameter named contextKey of type string:

  [System.Web.Services.WebMethod]
  [System.Web.Script.Services.ScriptMethod]
  public string[] GetCompletionList(
      string prefixText, int count, string contextKey) { ... }

  Note that you can replace "GetCompletionList" with a name of your choice, but the return type and parameter name and type must exactly match, including case.
• UseContextKey - Whether or not the ContextKey property should be used. This will be automatically enabled if the ContextKey property is ever set (on either the client or the server). If the context key is used, it should have the same signature with an additional parameter named contextKey of type string (as described above).
• MinimumPrefixLength - Minimum number of characters that must be entered before getting suggestions from the web service.
• CompletionInterval - Time in milliseconds when the timer will kick in to get suggestions using the web service.
• EnableCaching - Whether client side caching is enabled.
• CompletionSetCount - Number of suggestions to be retrieved from the web service.
• CompletionListCssClass - Css Class that will be used to style the completion list flyout.
• CompletionListItemCssClass - Css Class that will be used to style an item in the AutoComplete list flyout.
• CompletionListHighlightedItemCssClass - Css Class that will be used to style a highlighted item in the AutoComplete list flyout.
• DelimiterCharacters - Specifies one or more character(s) used to separate words. The text in the AutoComplete textbox is tokenized using these characters and the webservice completes the last token.
• FirstRowSelected - Determines if the first option in the AutoComplete list will be selected by default.
• ShowOnlyCurrentWordInCompletionListItem - If true and DelimiterCharacters are specified, then the AutoComplete list items display suggestions for the current word to be completed and do not display the rest of the tokens.
• Animations - Generic animations for the AutoComplete extender. See the Using Animations walkthrough and Animation Reference for more details.
  • OnShow - The OnShow animation will be played each time the AutoComplete completion list is displayed. The completion list will be positioned correctly but hidden. The animation can use <HideAction Visible="true" /> to display the completion list along with any other visual effects.
  • OnHide - The OnHide animation will be played each time the AutoComplete completion list is hidden.