ValidatorCallout is an ASP.NET AJAX extender that enhances the functionality of existing ASP.NET validators. To use this control, add an input field and a validator control as you normally would. Then add the ValidatorCallout and set its TargetControlID property to reference the validator control.

The control above is initialized with this code. The italic properties are optional:

<ajaxToolkit:ValidatorCalloutExtender

    runat="Server"

    ID="PNReqE"

    TargetControlID="PNReq"

    Width="350px"

    HighlightCssClass="highlight"

    WarningIconImageUrl="warning.gif"

    CloseImageUrl="close.gif" />

    * TargetControlID - The ID of the Validator to extend

    * Width - The width of the callout

    * CssClass - Name of the CSS class used to style the ValidatorCallout. See the ValidatorCallout Theming section for more information.

    * HighlightCssClass - A CssClass to apply to the invalid field

    * WarningIconImageUrl - The path to a custom warning icon image

    * CloseImageUrl - The path to a custom close image

    * Animations - Generic animations for the ValidatorCallout extender. See the Using Animations walkthrough and Animation Reference for more details.

          o OnShow - The OnShow animation will be played each time the validation popup is displayed. The popup will be positioned correctly but hidden. The animation can use <HideAction Visible="true" /> to display the popup along with any other visual effects.

          o OnHide - The OnHide animation will be played each time the validation popup is hidden.

ValidatorCallout Known Issues:

The callouts do not currently display automatically after a server post-back and will only work for custom validators which utilize client-side validation. Even after a post-back the callout will display when the form is re-validated when a postback is attempted again.

ValidatorCallout Theming

You can change the look and feel of the ValidatorCallout using the ValidatorCallout CssClass property. The ValidatorCallout has a predefined set of CSS classes that can be overridden. It has a default style which is embedded as a WebResource and is a part of the Toolkit assembly that has styles set for all the sub-classes. You can find the default styles in the Toolkit solution in the "AjaxControlToolkit\ValidatorCallout\ValidatorCallout.css" file. If your CssClass does not provide values for any of those then it falls back to the default value. In the example above the default style is used. To customize the same the user would have to set the CssClass property to the name of the CSS style and define the styles for the individual classes so that the various elements in a ValidatorCallout control can be styled accordingly. For example, if the CssClass property was set to "CustomValidatorCalloutStyle", this is how the css to style the border and background color would look:

.CustomValidatorCalloutStyle div,

.CustomValidatorCalloutStyle td {

    border:solid 1px blue; background-color: #ADD8E6;

}

ValidatorCallout Css classes:

    * .ajax__validatorcallout_popup_table: The popup table.

    * .ajax__validatorcallout_popup_table_row: The popup table row.

    * .ajax__validatorcallout_callout_cell: The callout cell.

    * .ajax__validatorcallout_callout_table: The table in the callout cell.

    * .ajax__validatorcallout_callout_table_row: The callout table row.

    * .ajax__validatorcallout_error_message_cell: The error message cell.

    * .ajax__validatorcallout_icon_cell: The warning icon cell.

    * .ajax__validatorcallout_close_button_cell: The close button cell.

    * .ajax__validatorcallout_arrow_cell: The arror cell.

    * .ajax__validatorcallout_innerdiv: Inner div of a cell. Used in the close button cell and the arrow cell.

The UpdatePanelAnimationExtender is a simple extender that allows you to utilize the powerful animation framework with existing pages in an easy, declarative fashion. It is used to play animations both while an UpdatePanel is updating and after it has finished updating.

It is important to note that because of the UpdatePanel architecture, the OnUpdating animation will always play when any partial postback starts, but the OnUpdated animation will only play at the end of a partial postback if its UpdatePanel was changed (note: setting the UpdatePanel's UpdateMode="Always" will ensure the OnUpdated animation plays when every partial postback completes).

The animations to be played are declaratively specified using XML. You can read the Using Animations walkthrough for more details about creating these generic animation declarations, as well as other ways to use the animation framework. The framework provides a lot of useful animations to handle movement, resizing, fading, etc. All the animations and their properties are described in the Animation Reference.

The UpdatePanel animation behavior can be applied with the following extender (the italic properties are optional, and the ellipses represent a generic animation description):

<ajaxToolkit:UpdatePanelAnimationExtender ID="ae"

  runat="server" TargetControlID="up">

     <Animations>

        <OnUpdating> ... </OnUpdating>

        <OnUpdated> ... </OnUpdated>

    </Animations>

</ajaxToolkit:UpdatePanelAnimationExtender>

    * TargetControlID - ID of the UpdatePanel whose updates are used to play the animations (this is also the default target of the animations)

    * OnUpdating - Generic animation played as when any UpdatePanel begins updating

    * OnUpdated - Generic animation played after the UpdatePanel has finished updating (but only if the UpdatePanel was changed)

ToggleButton is an ASP.NET AJAX extender that can be attached to an ASP.NET CheckBox control. ToggleButton enables the use of custom images to show the state of the CheckBox. The behavior of the CheckBox is unaffected.

The control above is initialized with this code. The italic properties are optional:

<ajaxToolkit:ToggleButtonExtender ID="ToggleEx" runat="server"

    TargetControlID="CheckBox1"

    ImageWidth="19"

    ImageHeight="19"

    CheckedImageAlternateText="Check"

    UncheckedImageAlternateText="UnCheck"

    UncheckedImageUrl="ToggleButton_Unchecked.gif"

    CheckedImageUrl="ToggleButton_Checked.gif" />

    * TargetControlID - The ID of the CheckBox to modify

    * ImageHeight\ImageWidth - The height and width of the image

    * CheckedImageUrl - the URL of the image to show when the toggle button is in the checked state.

    * UncheckedImageUrl - the URL of the image to show when the toggle button is in the unchecked state.

    * DisabledCheckedImageUrl - the URL of the image to show when the toggle button is disabled and in the checked state.

    * DisabledUncheckedImageUrl - the URL of the image to show when the toggle button is disabled and in the unchecked state.

    * CheckedImageOverUrl - the URL of the image to show when the toggle button is in the checked state and the mouse is over the button.

    * UncheckedImageOverUrl - the URL of the image to show when the toggle button is in the unchecked state and the mouse is over the button.

    * CheckedImageAlternateText - the alt text to show when the toggle button is in the checked state.

    * UncheckedImageAlternateText - the alt text to show when the toggle button is in the unchecked state.

    * CheckedImageOverAlternateText - the alt text to show when the toggle button is in the checked state and the mouse is over the button.

    * UncheckedImageOverAlternateText - the alt text to show when the toggle button is in the unchecked state and the mouse is over the button.

    * ImageHeight/ImageWidth - The height and width, respectively, of the image that will be displayed.

TextBoxWatermark is an ASP.NET AJAX extender that can be attached to an ASP.NET TextBox control to get "watermark" behavior. When a watermarked TextBox is empty, it displays a message to the user with a custom CSS style. Once the user has typed some text into the TextBox, the watermarked appearance goes away. The typical purpose of a watermark is to provide more information to the user about the TextBox itself without cluttering up the rest of the page.

The control above is initialized with this code. The italic properties are optional:

<ajaxToolkit:TextBoxWatermarkExtender ID="TBWE2" runat="server"

    TargetControlID="TextBox1"

    WatermarkText="Type First Name Here"

    WatermarkCssClass="watermarked" />

    * TargetControlID - The ID of the TextBox to operate on

    * WatermarkText - The text to show when the control has no value

    * WatermarkCssClass - The CSS class to apply to the TextBox when it has no value (e.g. the watermark text is shown).

TabContainer is an ASP.NET AJAX Control which creates a set of Tabs that can be used to organize page content. A TabContainer is a host for a number of TabPanel controls.

Each TabPanel defines its HeaderText or HeaderTemplate as well as a ContentTemplate that defines its content. The most recent tab should remain selected after a postback, and the Enabled state of tabs should remain after a postback as well.

The control above is initialized with this code. The italic properties are optional:

<ajaxToolkit:TabContainer runat="server"

        OnClientActiveTabChanged="ClientFunction"

        Height="150px">

    <ajaxToolkit:TabPanel runat="server"

        HeaderText="Signature and Bio"

        <ContentTemplate>

            ...

        </ContentTemplate>

    />

</ajaxToolkit:TabContainer>

    * ActiveTabChanged (Event) - Fired on the server side when a tab is changed after a postback

    * OnClientActiveTabChanged - The name of a javascript function to attach to the client-side tabChanged event

    * CssClass - A css class override used to define a custom look and feel for the tabs. See the Tabs Theming section for more details.

    * ActiveTabIndex - The first tab to show

    * Height - sets the height of the body of the tabs (does not include the TabPanel headers)

    * Width - sets the width of the body of the tabs

    * ScrollBars - Whether to display scrollbars (None, Horizontal, Vertical, Both, Auto) in the body of the TabContainer

    * TabStripPlacement - Whether to render the tabs on top of the container or below (Top, Bottom)

TabPanel Properties:

    * Enabled - Whether to display the Tab for the TabPanel by default. This can be changed on the client.

    * OnClientClick - The name of a javascript function to attach to the client-side click event of the tab.

    * HeaderText - The text to display in the Tab

    * HeaderTemplate - A TemplateInstance.Single ITemplate to use to render the header

    * ContentTemplate - A TemplateInstance.Single ITemplate to use to render the body

You can change the look and feel of Tabs using the Tabs CssClass property. Tabs has a predefined set of CSS classes that can be overridden. It has a default style which is embedded as a WebResource and is a part of the Toolkit assembly that has styles set for all the sub-classes. You can find the default styles in the Toolkit solution in the "AjaxControlToolkit\Tabs\Tabs.css" file. If your CssClass does not provide values for any of those then it falls back to the default value. In the example above the default style is used. To customize the same the user would have to set the CssClass property to the name of the CSS style and define the styles for the individual classes so that the various elements in a Tab control can be styled accordingly. For example if the CssClass property was set to "CustomTabStyle" this is how the css to style the tab header would look:

.CustomTabStyle .ajax__tab_header {

    font-family:verdana,tahoma,helvetica;

    font-size:11px;

    background:url(images/tab-line.gif) repeat-x bottom;

}

    * .ajax__tab_header: A container element that wraps all of the tabs at the top of the TabContainer. Child CSS classes:.ajax__tab_outer.

    * .ajax__tab_outer: An outer element of a tab, often used to set the left-side background image of the tab.Child CSS classes: .ajax__tab_inner.

    * .ajax__tab_inner: An inner element of a tab, often used to set the right-side image of the tab. Child CSS classes:.ajax__tab_tab.

    * .ajax__tab_tab: An element of the tab that contains the text content. Child CSS classes:none.

    * .ajax__tab_body: A container element that wraps the area where a TabPanel is displayed. Child CSS classes: none.

    * .ajax__tab_hover . This is applied to a tab when the mouse is hovering over. Child CSS classes:.ajax__tab_outer.

    * .ajax__tab_active: This is applied to a tab when it is the currently selected tab. Child CSS classes:.ajax__tab_outer.

SlideShow is an extender that targets image controls. You can provide it with buttons to hit previous, next and play. You can configure the slideshow to play automatically on render, allow it loop through the images in a round robin fashion and also set the interval for slide transitions. You can use a page method to supply images to the slide show or use a webservice. In the sample above we have provided you with a slideshow that plays automatically on render and loops around to the first picture if you hit next on the last picture and vice versa if you hit previous on the first picture. The slideshow transitions pictures after 3 seconds.

The control above is initialized with this code. The italic properties are optional:

<ajaxToolkit:SlideShowExtender ID="SlideShowExtender1" runat="server"

    TargetControlID="Image1"

    SlideShowServiceMethod="GetSlides"

    AutoPlay="true"

    ImageTitleLabelID="imageTitle"

    ImageDescriptionLabelID="imageDescription"

    NextButtonID="nextButton"

    PlayButtonText="Play"

    StopButtonText="Stop"

    PreviousButtonID="prevButton"

    PlayButtonID="playButton"

    Loop="true" />

    * SlideShowServicePath - Path to the webservice that the extender will pull the images from.

    * SlideShowServiceMethod - The webservice method that will be called to supply images. The signature of the method must match this:

          [System.Web.Services.WebMethod]

          [System.Web.Script.Services.ScriptMethod]

          public AjaxControlToolkit.Slide[] GetSlides() { ... }

      Note that you can replace "GetSlides" with a name of your choice, but the return type and parameter name and type must exactly match, including case.

    * 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 AjaxControlToolkit.Slide[] GetSlides(string contextKey) { ... }

      Note that you can replace "GetSlides" 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).

    * NextButtonID - ID of the button that will allow you to see the next picture.

    * PlayButtonID - ID of the button that will allow you to play/stop the slideshow.

    * PreviousButtonID - ID of the button that will allow you to see the previous picture.

    * PlayButtonText - The text to be shown in the play button to play the slideshow.

    * StopButtonText - The text to be shown in the play button to stop the slideshow.

    * PlayInterval - Interval in milliseconds between slide transitions in play mode.

    * ImageTitleLabelID - ID of Label displaying current picture's title.

    * ImageDescriptionLabelID - ID of Label describing current picture.

    * Loop - Setting this to true will allow you to view images in a round-robin fashion.

    * AutoPlay - Setting this to true will play the slideshow automatically on render.

The Slider extender allows to upgrade an asp:TextBox to a graphical slider that allows the user to choose a numeric value from a finite range. The Slider's orientation can be horizontal or vertical and it can also act as a "discrete" slider, allowing only a specified number of values within its range.

If the developer doesn't specify any parameters, the Slider is rendered with the default layout shown in the demonstration and its range of values goes from 0 to 100. The Slider's layout can be customized by providing CSS classes for the Slider's rail and handle. If handle animation is enabled, the handle slides to the specified point on the rail with a nice animation effect.

When a value is chosen using the Slider, it is automatically persisted during full or partial postbacks. The developer can continue to reference the asp:TextBox to get and set the Slider's value.

The Slider's value can be dynamically displayed in another asp:TextBox or an asp:Label. If a TextBox is used, the Slider's value can be updated through the bound TextBox.

By declaring the extended TextBox as a trigger for an UpdatePanel, the Slider can fire the update whenever the handle is released. By setting the RaiseChangeOnlyOnMouseUp to false, the update will be fired as soon as the Slider's value changes.

The TooltipText property allows to display some text when the mouse pointer hovers the slider's handle. A {0} placeholder in the text is replaced by the current value of the slider.

The controls above are initialized with this code. The italic properties are optional:

<ajaxToolkit:SliderExtender ID="SliderExtender1" runat="server"

    TargetControlID="Slider1"

    Minimum="-100"

    Maximum="100"

    BoundControlID="Slider1_BoundControl"

    Steps="5" />

<ajaxToolkit:SliderExtender ID="SliderExtender2" runat="server"

    TargetControlID="Slider2"

    BoundControlID="Slider2_BoundControl"

    Orientation="Vertical"

    EnableHandleAnimation="true" />

    * Minimum - Minimum value allowed.

    * Maximum - Maximum value allowed.

    * Decimals - Number of decimal digits for the value.

    * Steps - Number of discrete values inside the slider's range.

    * Value - Current value of the slider

    * EnableHandleAnimation - Enable/disable the handle animation.

    * HandleAnimationDuration - Duration of the handle animation, in milliseconds.

    * RailCssClass - CSS class for the slider's rail.

    * HandleCssClass - CSS class for the slider's handle.

    * HandleImageURL - URL of the image to display as the slider's handle.

    * Length - Width/height of a horizontal/vertical slider when the default layout is used.

    * BoundControlID - ID of the TextBox or Label that dynamically displays the slider's value.

    * RaiseChangeOnlyOnMouseUp - If true, fires the change event on the extended TextBox only when the left mouse button is released.

    * TooltipText - Text to display in a tooltip when the handle is hovered. The {0} placeholder in the text is replaced with the current value of the slider.

    * TextBox visibility. The asp:TextBox that the Slider is upgrading will be visible during the page loading, so it is usable if JavaScript is not enabled on the browser. Depending on your requirements, you can prevent the asp:TextBox from being visible by setting its display mode to "none".

    * Inline - Block. While the TextBox is rendered as an inline element, the Slider will be rendered as a block element. Consider using floats or a table when designing that portion of layout. The CSS inline-block display mode is not supported by Internet Explorer 6.

    * CSS. When using custom CSS classes for the Slider's rail and handle, it's recommended to specify positioning. The rail should have position:relative while the handle should have position:absolute.

      If a CSS class for the slider's rail is provided, the developer can choose to provide a CSS class for the handle or the URL to an image to display as the handle.

      Borders should be added to a wrapping <div>.

The Seadragon control can be used for interactively viewing images. Use your mouse to pan and zoom around the image.

Learn how to create images that work with the Seadragon control by visiting the Microsoft Live Labs website at http://livelabs.com/seadragon-ajax/.

First example above is initialized with this code.

<ajaxToolkit:Seadragon ID="Seadragon"

            runat="server"

            SourceUrl="sample.xml">

            CssClass="seadragon"

</ajaxToolkit:Seadragon>

Second example above is initialized with this code.

<ajaxToolkit:Seadragon ID="Seadragon2"

  runat="server"

  CssClass="seadragon"

  SourceUrl="dzc_output.xml">

  <ControlsCollection>

    <ajaxToolkit:SeadragonControl runat="server"

      Anchor="TOP_RIGHT">

      <asp:Menu runat="server" ...>

        set menu style

        <Items>

          <asp:MenuItem Text="Menu" Value="Menu" />

          <asp:MenuItem Text="Control" Value="Control" />

          <asp:MenuItem Text="Over" Value="Over" />

          <asp:MenuItem Text="Seadragon" Value="Seadragon" />

        </Items>

      </asp:Menu>

    </ajaxToolkit:SeadragonControl>

  </ControlsCollection>

  <OverlaysCollection>

    <ajaxToolkit:SeadragonScalableOverlay

      runat="server"

      Rect-Height="0.24"

      Rect-Width="0.26"

      CssClass="overlay"

      Rect-Point-X="0.14"

      Rect-Point-Y="0.06"    

    </ajaxToolkit:SeadragonScalableOverlay>

  </OverlaysCollection>

</ajaxToolkit:Seadragon>

    * animationTime - The amount of time in seconds that animations should last. Default is 1.5.

    * blendTime - The amount of time in seconds that new tiles take to blend from transparent to opaque. Default is 0.5.

    * alwaysBlend - Whether tiles should always blend in and out, not just when they're first loaded. Default is false.

    * autoHideControls - Whether controls should get automatically hidden when the user's mouse is off the viewer and the image has stopped animating. Default is true.

    * immediateRender - Whether the most appropriate tiles should always be rendered first, before any lower-res tiles are rendered. This loses the "sharpening" effect and instead creates a very visible "tiling" effect. Default is false.

    * minZoomDimension - The minimum size (in screen pixels) of either dimension that can result from zooming out. Default is 16.

    * maxZoomPixelRatio - The maximum pixel ratio (screen pixel to content pixel) that can result from zooming in. Default is 4.

    * visibilityRatio - The minimum portion of the viewport that must show visible content in both dimensions. Default is 0.1.

    * springStiffness - Determines how sharply the springs used for animations move. Default is 5.0.

    * imageLoaderLimit - The maximum number of concurrent image downloads that can be performed by each viewer. Default is 2.

    * clickTimeThreshold - The maximum number of milliseconds that can pass between a mousedown and a mouseup for the action to still be considered a "quick" click. Default is 200.

    * clickDistThreshold - The maximum number of pixels the mouse can move between a mousedown and a mouseup for the action to still be considered a "quick" click. Default is 5.

    * zoomPerClick - The factor by which images should zoom when clicked on. Default is 2.

    * zoomPerSecond - The factor by which images should zoom over each second when the zoom buttons are held down. Default is 2.

    * sourceUrl - The path for all UI images. This can be absolute or relative. If relative, it must be relative to the HTML page. A change to this value will only affect new viewers. Default is "img/".

    * showNavigationControl - Whether navigation buttons should be shown.

ResizableControl is an extender that attaches to any element on a web page and allows the user to resize that control with a handle that attaches to lower-right corner of the control. The resize handle lets the user resize the element as if it were a window. The appearance of the resize handle can be specified by the page designer with a CSS style. The content within the element can use CSS styles to automatically resize to fit the new dimensions. Alternatively, ResizableControl exposes two events (onresizing and onresize) that the page designer can attach custom script to in order to enable more complex layout logic. Element dimensions are preserved across postbacks to the server and "size" properties accessible on both the client and server can be used to enable custom resize behaviors. ResizableControl can optionally limit the maximum and minimum width and height of the target control so that resizing can be constrained by the page author (for example, to limit scrolling to only the horizontal dimension).

The controls above are initialized with code like this. The italic properties are optional:

<ajaxToolkit:ResizableControlExtender ID="RCE" runat="server"

    TargetControlID="PanelImage"

    HandleCssClass="handleImage"

    ResizableCssClass="resizingImage"

    MinimumWidth="50"

    MinimumHeight="20"

    MaximumWidth="260"

    MaximumHeight="130"

    OnClientResize="OnClientResizeImage"

    HandleOffsetX="3"

    HandleOffsetY="3" />

    * TargetControlID - The ID of the element that becomes resizable

    * HandleCssClass - The name of the CSS class to apply to the resize handle

    * ResizableCssClass - The name of the CSS class to apply to the element when resizing

    * MinimumWidth/MinimumHeight - Minimum dimensions of the resizable element

    * MaximumWidth/MaximumHeight - Maximum dimensions of the resizable element

    * OnClientResizeBegin - Event fired when the element starts being resized

    * OnClientResizing - Event fired as the element is being resized

    * OnClientResize - Event fired when the element has been resized

    * HandleOffsetX/HandleOffsetY - Offsets to apply to the location of the resize handle

ReorderList is an ASP.NET AJAX control that implements a bulleted, data-bound list with items that can be reordered interactively. To reorder the items in the list, the user simply drags the item's control bar to its new location. Graphical feedback is shown where the item will be placed as it is dragged by the user. The data source is updated after the item is dropped in its new location.

When bound to data, the ReorderList control will behave like many other databound controls. If the data you are displaying has a field that determines sort order (e.g. the select query is sorted by this column), and that column is of an integer type, the ReorderList can automatically perform reorders if its SortOrderField property is set. The ReorderList can also bind to any data source that implements IList (such as Arrays).

The ReorderList control is different than the other samples here because it is an ASP.NET server control that is aware of ASP.NET AJAX behaviors. Rather than extending existing controls on the page, it delivers a rich client experience directly and still has a traditional post-back server model for interacting with the application.

The ReorderList can handle reorders in two ways, either via a callback or via a postback. For a callback, no page postback happens on a reorder. This is useful if the data is only to be ordered. If the data items are to be deleted or edited, a full postback needs to occur to sync the server side state with the client side state. The PostbackOnReorder property enables this.

The control above is initialized with this code. The italic properties are optional:

<ajaxToolkit:ReorderList ID="ReorderList1" runat="server"

    DataSourceID="ObjectDataSource1"

    DragHandleAlignment="Left"

    ItemInsertLocation="Beginning"

    DataKeyField="ItemID"

    SortOrderField="Priority"

    AllowReorder="true">

      <ItemTemplate>...</ItemTemplate>

      <ReorderTemplate>...</ReorderTemplate>

      <DragHandleTemplate>...</DragHandleTemplate>

      <InsertItemTemplate>...</InsertItemTemplate>

</ajaxToolkit:ReorderList>

    * DataSourceID - The DataSource to use to populate this control

    * DataKeyField - The primary key field for the data

    * SortOrderField - The field that represents the sort order of the items.

    * ItemInsertLocation - Determines where new items are inserted into the list, can be Beginning or End

    * DragHandleAlignment - Where the drag handle should be relative to the item row - can be "Top", "Bottom", "Left", or "Right"

    * AllowReorder - whether to allow drag/drop reordering. This is automatically set to true if a ReorderTemplate is present

    * ItemTemplate - The template to display for items in the list

    * EditItemTemplate - The template do display for a row that is in edit mode

    * ReorderTemplate - The template to use to show the drop location when doing a reorder operation. This template is not data bindable.

    * InsertItemTemplate - The template to show for adding new items to the list.

    * DragHandleTemplate - The template for the drag handle that the user clicks and drags to reorder items.

    * EmptyListTemplate - The template to show when the list has no data. This item is not data-bindable.

    * PostbackOnReorder - Determines if reorders initiate a postback or callback. To use any edit or delete functionality of a data-bound list, postbacks must be enabled.

The Rating control provides an intuitive rating experience that allows users to select the number of stars that represents their rating. The page designer can specify the initial rating, the maximum rating to allow, the alignment and direction of the stars, and custom styles for the different states a star can have. Rating also supports a ClientCallBack event that allows custom code to run after the user has rated something.

The control above is initialized with this code. The italic properties are optional:

<ajaxToolkit:Rating ID="ThaiRating" runat="server"

    CurrentRating="2"

    MaxRating="5"

    StarCssClass="ratingStar"

    WaitingStarCssClass="savedRatingStar"

    FilledStarCssClass="filledRatingStar"

    EmptyStarCssClass="emptyRatingStar"

    OnChanged="ThaiRating_Changed" />

    * AutoPostBack - True to cause a postback on rating item click.

    * CurrentRating - Initial rating value

    * MaxRating - Maximum rating value

    * ReadOnly - Whether or not the rating can be changed

    * StarCssClass - CSS class for a visible star

    * WaitingStarCssClass - CSS class for a star in waiting mode

    * FilledStarCssClass - CSS class for star in filled mode

    * EmptyStarCssClass - CSS class for a star in empty mode

    * RatingAlign - Alignment of the stars (Vertical or Horizontal)

    * RatingDirection - Orientation of the stars (LeftToRightTopToBottom or RightToLeftBottomToTop)

    * OnChanged - ClientCallBack event to fire when the rating is changed

    * Tag - A custom parameter to pass to the ClientCallBack

PasswordStrength is an ASP.NET AJAX extender that can be attached to an ASP.NET TextBox control used for the entry of passwords. The PasswordStrength extender shows the strength of the password in the TextBox and updates itself as the user types the password. The indicator can display the strength of the password as a text message or with a progress bar indicator. The styling and position of both types of indicators is configurable. The required strength of the password is also configurable, allowing the page author to tailor the password strength requirements to their needs. The text messages that describe the current strength of the password can also be configured and their default values have localization support built-in. The second and third extenders' strings are being pulled from Toolkit resources files. We do not have strings for all languages currently so they may show non-localized values for some languages. A help indicator can be used to provide explicit instructions about what changes are required to achieve a strong password. The indicator is displayed when the user begins typing into the TextBox and is hidden from view once the TextBox loses focus.

The control above is initialized with this code. The italic properties are optional:

<ajaxToolkit:PasswordStrength ID="PS" runat="server"

    TargetControlID="TextBox1"

    DisplayPosition="RightSide"

    StrengthIndicatorType="Text"

    PreferredPasswordLength="10"

    PrefixText="Strength:"

    TextCssClass="TextIndicator_TextBox1"

    MinimumNumericCharacters="0"

    MinimumSymbolCharacters="0"

    RequiresUpperAndLowerCaseCharacters="false"

    TextStrengthDescriptions="Very Poor;Weak;Average;Strong;Excellent"

    TextStrengthDescriptionStyles="cssClass1;cssClass2;cssClass3;cssClass4;cssClass5

    CalculationWeightings="50;15;15;20" />

    * TargetControlID - ID of the TextBox to attach to

    * DisplayPosition - Positioning of the strength indicator relative to the target control

    * StrengthIndicatorType - Strength indicator type (Text or BarIndicator)

    * PreferredPasswordLength - Preferred length of the password

    * PrefixText - Text prefixed to the display text when StrengthIndicatorType=Text

    * TextCssClass - CSS class applied to the text display when StrengthIndicatorType=Text

    * MinimumNumericCharacters - Minimum number of numeric characters

    * MinimumSymbolCharacters - Minimum number of symbol characters (ex: $ ^ *)

    * RequiresUpperAndLowerCaseCharacters - Specifies whether mixed case characters are required

    * MinimumLowerCaseCharacters - Only in effect if RequiresUpperAndLowerCaseCharacters property is true. Specifies the minimum number of lowercase characters required when requiring mixed case characters as part of your password strength considerations.

    * MinimumUpperCaseCharacters - Only in effect if RequiresUpperAndLowerCaseCharacters property is true. Specifies the minimum number of uppercase characters required when requiring mixed case characters as part of your password strength considerations.

    * TextStrengthDescriptions - List of semi-colon separated descriptions used when StrengthIndicatorType=Text (Minimum of 2, maximum of 10; order is weakest to strongest)

    * CalculationWeightings - List of semi-colon separated numeric values used to determine the weighting of a strength characteristic. There must be 4 values specified which must total 100. The default weighting values are defined as 50;15;15;20. This corresponds to password length is 50% of the strength calculation, Numeric criteria is 15% of strength calculation, casing criteria is 15% of calculation, and symbol criteria is 20% of calculation. So the format is 'A;B;C;D' where A = length weighting, B = numeric weighting, C = casing weighting, D = symbol weighting.

    * BarBorderCssClass - CSS class applied to the bar indicator's border when StrengthIndicatorType=BarIndicator

    * BarIndicatorCssClass - CSS class applied to the bar indicator's inner bar when StrengthIndicatorType=BarIndicator

    * StrengthStyles - List of semi-colon separated CSS classes that are used depending on the password's strength. This property will override the BarIndicatorCssClass / TextIndicatorCssClass property if present. The BarIndicatorCssClass / TextIndicatorCssClass property differs in that it attributes one CSS style to the BarIndicator or Text Strength indicator (depending on which type is chosen) regardless of password strength. This property will cause the style to change based on the password strength and also to the number of styles specified in this property. For example, if 2 styles are defined like StrengthStyles="style1;style2" then style1 is applied when the password strength is less than 50%, and style2 is applied when password strength is >= 50%. This property can have up to 10 styles.

    * HelpStatusLabelID - Control ID of the label used to display help text

    * HelpHandleCssClass - CSS class applied to the help element used to display a dialog box describing the password requirements

    * HelpHandlePosition - Positioning of the help handle element relative to the target control

PagingBulletedList is an ASP.NET AJAX extender that can be attached to an ASP.NET BulletedList control and provide client-side sorted paging. It is very flexible and lets you specify either the number of characters used in the heading indices or the maximum number of items to display per index. If the input is not sorted (either on the server or client), it will generated more header indices but still function appropriately.

The control above is initialized with this code. The italic properties are optional:

<ajaxToolkit:PagingBulletedListExtender ID="PBLE1" runat="server"

    TargetControlID="BulletedList1"

    ClientSort="true"

    IndexSize="1"

    MaxItemPerPage="20"

    Separator=" - "

    SelectIndexCssClass="selectIndex"

    UnselectIndexCssClass="unSelectIndex" />

    * TargetControlID - The ID of the BulletedList to page

    * ClientSort - Whether or not the items should be sorted client-side

    * IndexSize - Number of characters in the index headings (ignored if MaxItemPerPage is set)

    * MaxItemPerPage - Maximum number of items per page (ignores the IndexSize property)

    * Separator - Separator text to be placed between indices

    * SelectIndexCssClass - CSS class for the selected index.

    * UnselectIndexCssClass - CSS class for indices that aren't selected