What is ASP.NET AJAX?

ASP.NET AJAX is a free framework for building a new generation of richer, more interactive, highly personalized cross-browser web applications. This new web development technology from Microsoft integrates cross-browser client script libraries with the ASP.NET 2.0 server-based development framework. In addition, ASP.NET AJAX offers you the same type of development platform for client-based web pages that ASP.NET offers for server-based pages. And because ASP.NET AJAX is an extension of ASP.NET, it is fully integrated with server-based services. ASP.NET AJAX makes it possible to easily take advantage of AJAX techniques on the web and enables you to create ASP.NET pages with a rich, responsive UI and server communication. However, AJAX isn't just for ASP.NET. You can take advantage of the rich client framework to easily build client-centric web applications that integrate with any backend data provider and run on most modern browsers.
Fade Transitions: AutoSize: NoneLimitFill
function toggleFade() {
var behavior = $find('ctl00_SampleContent_MyAccordion_AccordionExtender');
if (behavior) {
behavior.set_FadeTransitions(!behavior.get_FadeTransitions());
}
}
function changeAutoSize() {
var behavior = $find('ctl00_SampleContent_MyAccordion_AccordionExtender');
var ctrl = $get('autosize');
if (behavior) {
var size = 'None';
switch (ctrl.selectedIndex) {
case 0 :
behavior.get_element().style.height = 'auto';
size = AjaxControlToolkit.AutoSize.None;
break;
case 1 :
behavior.get_element().style.height = '400px';
size = AjaxControlToolkit.AutoSize.Limit;
break;
case 2 :
behavior.get_element().style.height = '400px';
size = AjaxControlToolkit.AutoSize.Fill;
break;
}
behavior.set_AutoSize(size);
}
if (document.focus) {
document.focus();
}
}
Accordion Description
The Accordion is a web control that allows you to provide multiple panes and display them one at a time. It is like having several CollapsiblePanels where only one can be expanded at a time. The Accordion is implemented as a web control that contains AccordionPane web controls. Each AccordionPane control has a template for its Header and its Content. We keep track of the selected pane so it stays visible across postbacks.
It also supports three AutoSize modes so it can fit in a variety of layouts.
· None - The Accordion grows/shrinks without restriction. This can cause other elements on your page to move up and down with it.
· Limit - The Accordion never grows larger than the value specified by its Height property. This will cause the content to scroll if it is too large to be displayed.
· Fill - The Accordion always stays the exact same size as its Height property. This will cause the content to be expanded or shrunk if it isn't the right size.
The Accordion is written using an extender like most of the other extenders in the AJAX Control Toolkit. The extender expects its input in a very specific hierarchy of container elements (like divs), so the Accordion and AccordionPane web controls are used to generate the expected input for the extender. The extender can also be used on its own if you provide it appropriate input.

AsyncFileUpload Description

AsyncFileUpload is an ASP.NET AJAX Control that allows you asynchronously upload files to server. The file uploading results can be checked both in the server and client sides.
You can save the uploaded file by calling the SaveAs() method in a handler for the server UploadedComplete event. AsyncFileUpload Events, Properties and Methods

omplete Description

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.

The dropdown with candidate words supplied by a web service is positioned on the bottom left of the text box.

In the sample above, the textbox is associated with an AutoCompleteExtender that pulls words that start with the contents of the textbox using a web service.

When you have typed more content than the specified minimum word length, a popup will show words or phrases starting with that value. Caching is turned on, so typing the same prefix multiple times results in only one call to the web service.

Calendar Description

Calendar is an ASP.NET AJAX extender that can be attached to any ASP.NET TextBox control. It provides client-side date-picking functionality with customizable date format and UI in a popup control. You can interact with the calendar by clicking on a day to set the date, or the "Today" link to set the current date.

In addition, the left and right arrows can be used to move forward or back a month. By clicking on the title of the calendar you can change the view from Days in the current month, to Months in the current year. Another click will switch to Years in the current Decade. This action allows you to easily jump to dates in the past or the future from within the calendar control.

The page uses the culture setting English (United States) which was specified by the browser. The page properties have Culture="auto" and UICulture="auto" set to enable the same. See this MSDN article for more information. The ScriptManager on this Calendar demo page has EnableScriptGlobalization="true" and EnableScriptLocalization="true"

CollapsiblePanel Properties

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

· TargetControlID - the Panel to operate expand and collapse.
· CollapsedSize - The size of the target, in pixels, when it is in the collapsed state.
· ExpandedSize - The size of the target, in pixels, when it is in the opened state.
· Collapsed - Specifies that the object should initially be collapsed or expanded. Set this to match your initial size. In this case, we initially set the panel to a height of 0 to match the CollapsedSize property, so when the page first renders, we don't see the panel expanded.
· AutoCollapse - True to automatically collapse when the mouse is moved off the panel.
· AutoExpand - True to automatically expand when the mouse is moved over the panel.
· ScrollContents - True to add a scrollbar if the contents are larger than the panel itself. False to just clip the contents.
· ExpandControlID/CollapseControlID - The controls that will expand or collapse the panel on a click, respectively. If these values are the same, the panel will automatically toggle its state on each click.
· TextLabelID - The ID of a label control where the "status text" for the panel will be placed. The panel will replace the internal HTML of this control (e.g. any HTML between the tags).
· CollapsedText - The text to show in the control specified by TextLabelID when the panel is collapsed. This text is also used as the alternate text of the image if ImageControlID is set.
· ExpandedText - The text to show in the control specified by TextLabelID when the panel is opened. This text is also used as the alternate text of the image if ImageControlID is set.
· ImageControlID - The ID of an Image control where an icon indicating the collapsed status of the panel will be placed. The extender will replace the source of this Image with the CollapsedImage and ExpandedImage urls as appropriate. If the ExpandedText or CollapsedText properties are set, they are used as the alternate text for the image.
· CollapsedImage - The path to an image used by ImageControlID when the panel is collapsed
· ExpandedImage - The path to an image used by ImageControlID when the panel is expanded
· ExpandDirection - can be "Vertical" or "Horizontal" to determine whether the panel expands top-to-bottom or left-to-right.

CascadingDropDown Description

CascadingDropDown is an ASP.NET AJAX extender that can be attached to an ASP.NET DropDownList control to get automatic population of a set of DropDownList controls. Each time the selection of one the DropDownList controls changes, the CascadingDropDown makes a call to a specified web service to retrieve the list of values for the next DropDownList in the set.

CascadingDropDown enables a common scenario in which the contents of one list depends on the selection of another list and does so without having to embed the entire data set in the page or transfer it to the client at all. All the logic about the contents of the set of DropDownList controls lives on the server in a web service. This web service can use any suitable method for storing and looking up the relevant data. The sample web service used here reads the data set from a simple hierarchical XML data file. The sample data file shows that the DropDownList items can have distinct names and value (values are optional in the sample). There is also a walkthrough showing how to use a CascadingDropDown with a database.

CascadingDropDown Description

CascadingDropDown is an ASP.NET AJAX extender that can be attached to an ASP.NET DropDownList control to get automatic population of a set of DropDownList controls. Each time the selection of one the DropDownList controls changes, the CascadingDropDown makes a call to a specified web service to retrieve the list of values for the next DropDownList in the set.

CascadingDropDown enables a common scenario in which the contents of one list depends on the selection of another list and does so without having to embed the entire data set in the page or transfer it to the client at all. All the logic about the contents of the set of DropDownList controls lives on the server in a web service. This web service can use any suitable method for storing and looking up the relevant data. The sample web service used here reads the data set from a simple hierarchical XML data file. The sample data file shows that the DropDownList items can have distinct names and value (values are optional in the sample). There is also a walkthrough showing how to use a CascadingDropDown with a database.

CollapsiblePanel Properties

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

· TargetControlID - the Panel to operate expand and collapse.
· CollapsedSize - The size of the target, in pixels, when it is in the collapsed state.
· ExpandedSize - The size of the target, in pixels, when it is in the opened state.
· Collapsed - Specifies that the object should initially be collapsed or expanded. Set this to match your initial size. In this case, we initially set the panel to a height of 0 to match the CollapsedSize property, so when the page first renders, we don't see the panel expanded.
· AutoCollapse - True to automatically collapse when the mouse is moved off the panel.
· AutoExpand - True to automatically expand when the mouse is moved over the panel.
· ScrollContents - True to add a scrollbar if the contents are larger than the panel itself. False to just clip the contents.
· ExpandControlID/CollapseControlID - The controls that will expand or collapse the panel on a click, respectively. If these values are the same, the panel will automatically toggle its state on each click.
· TextLabelID - The ID of a label control where the "status text" for the panel will be placed. The panel will replace the internal HTML of this control (e.g. any HTML between the tags).
· CollapsedText - The text to show in the control specified by TextLabelID when the panel is collapsed. This text is also used as the alternate text of the image if ImageControlID is set.
· ExpandedText - The text to show in the control specified by TextLabelID when the panel is opened. This text is also used as the alternate text of the image if ImageControlID is set.
· ImageControlID - The ID of an Image control where an icon indicating the collapsed status of the panel will be placed. The extender will replace the source of this Image with the CollapsedImage and ExpandedImage urls as appropriate. If the ExpandedText or CollapsedText properties are set, they are used as the alternate text for the image.
· CollapsedImage - The path to an image used by ImageControlID when the panel is collapsed
· ExpandedImage - The path to an image used by ImageControlID when the panel is expanded
· ExpandDirection - can be "Vertical" or "Horizontal" to determine whether the panel expands top-to-bottom or left-to-right.

CascadingDropDown Description

CascadingDropDown is an ASP.NET AJAX extender that can be attached to an ASP.NET DropDownList control to get automatic population of a set of DropDownList controls. Each time the selection of one the DropDownList controls changes, the CascadingDropDown makes a call to a specified web service to retrieve the list of values for the next DropDownList in the set.
CascadingDropDown enables a common scenario in which the contents of one list depends on the selection of another list and does so without having to embed the entire data set in the page or transfer it to the client at all. All the logic about the contents of the set of DropDownList controls lives on the server in a web service. This web service can use any suitable method for storing and looking up the relevant data. The sample web service used here reads the data set from a simple hierarchical XML data file. The sample data file shows that the DropDownList items can have distinct names and value (values are optional in the sample). There is also a walkthrough showing how to use a CascadingDropDown with a database

CascadingDropDown Properties

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

· TargetControlID - The ID of the DropDownList to populate.
· Category - The name of the category this DropDownList represents.
· PromptText - Optional text to display before the user has selected a value from the DropDownList.
· PromptValue - Optional value set when PromptText is displayed.
· EmptyText - Optional text to display when the DropDownList has no data to display.
· EmptyValue - Optional value set when EmptyText is displayed.
· LoadingText - Optional text to display while the data for the DropDownList is being loaded.
· ServicePath - Path to a web service that returns the data used to populate the DropDownList. This property should be left null if ServiceMethod refers to a page method. The web service should be decorated with the System.Web.Script.Services.ScriptService attribute.
· ServiceMethod - Web service method that returns the data used to populate the DropDownList. The signature of this method must match the following:
· [System.Web.Services.WebMethod]· [System.Web.Script.Services.ScriptMethod]· public CascadingDropDownNameValue[] GetDropDownContents(
string knownCategoryValues, string category) { ... }
Note that you can replace "GetDropDownContents" with a naming 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 CascadingDropDownNameValue[] GetDropDownContents(
string knownCategoryValues, string category, string contextKey) { ... }
Note that you can replace "GetDropDownContents" 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).
· ParentControlID - Optional ID of the parent DropDownList that controls the contents of this DropDownList.
· SelectedValue - Optional value to select by default. This needs to exactly match the string representation of a value in the DropDownList.

ComboBox Description

ComboBox is an ASP.NET AJAX control that, like the AutoCompleteExtender, combines the flexibility of a TextBox with a list of options that users are able to choose from. It borrows many of its properties, behaviors, and naming conventions from the Windows Forms ComboBox control, and is derived from the same base class as the ListBox, BulletedList, and DropDownList web controls. In fact, a ComboBox is best described as a DropDownList that can be typed directly into like a TextBox.

Working with a ComboBox in code is also a lot like working with a DropDownList. It has all of the same properties and events as a DropDownList, with a few additional ComboBox-specific properties and events. Firstly, it can be configured to either prevent or allow user-typed text that does not match an item in the list. When user-typed text does match an item in the list, the ComboBox can also be configured to auto-complete the text based on the first matched item in the list, to show the list and highlight the first matched item, or to do both simultaneously. When user-typed text does not match an item in the list, the ComboBox raises ItemInserting and ItemInserted events which can be handled during postback. Other than these special behaviors, the ComboBox behaves essentially like a DropDownList.
The ComboBox is intended as a supplement to, rather than a replacement for, the AutoCompleteExtender. Though there are many scenarios where either could be used to satisfy the same user interface requirements, there are scenarios where one control could offer particular advantages or disadvantages compared to the other:
· Data Binding - The ComboBox can bind to data source controls like SqlDataSource and ObjectDataSource, and to runtime objects that implement IListSource, IEnumerable, or IDataSource. Like the DropDownList, the ComboBox also has an Items collection that can be manipulated declaratively and/or programmatically. The AutoCompleteExtender can only get its item list from a web service or page method. When it is possible and more convenient to bind to a data source control, runtime object, or declared item list, the ComboBox may be a better choice than the AutoCompleteExtender.
· Restricting User-Typed Text - Another feature of the ComboBox is that it can restrict input so that an item in the list is always selected after a postback (as long as the Items collection is not empty). The AutoCompleteExtender allows users to type anything into the TextBox being extended, even if the typed text doesn't match any options returned by the extender's ServiceMethod. A ComboBox may be a better fit for user interfaces which require a predetermined item be selected from the list (like a foreign key input).
· Composite Items - Items in a ComboBox, like items in a DropDownList, have both Text and Value properties. The only user input value offered by the AutoCompleteExtender is the Text property of the TextBox being extended. If the items in your list can be modeled with different Text and Value properties, the ComboBox may provide a better match for the data items being listed (again, foreign keys can be a good example of this).
· Long Item Lists / Multiple Input Controls - All of the items in a ComboBox's list will be rendered to the web page it exists in. The AutoCompleteExtender, on the other hand, retrieves items from its ServiceMethod after the page is rendered. When your ComboBox contains a rather long list of items, or when you have a relatively large number of ComboBoxes on the same page (or within the same UpdatePanel), load times could be slowed down significantly. When ComboBoxes perform slowly because of the amount of markup they must render to the browser, an AutoCompleteExtender can be used instead to increase performance.
· Partial Auto-Completion - The auto-complete feature of the ComboBox will only match items that start with the first user-typed character. An AutoCompleteExtender's ServiceMethod, on the other hand, can be configured to match items where the user-typed text lies somewhere after the first character in the item. A ComboBox cannot be used in application scenarios that require items to be "partially matched" like this.
· Multiple Item Selection - The ComboBox, like the DropDownList, will only allow one item to be selected at a time. The AutoCompleteExtender can be configured to allow users to select multiple items simultaneously (using the AutoCompleteExtender's DelimiterCharacters property), like a ListBox or CheckBoxList. When users must have the ability to submit multiple items in a single postback, the AutoCompleteExtender should be used instead of the ComboBox.

oBox Properties

The control above is initialized with this code. The italic properties are optional:
... ...
· DropDownStyle - Determines whether the user is allowed to enter text that does not match an item in the list, and whether the list is always displayed. If "DropDownList" is specified, users are not allowed to enter text that does not match an item in the list. When "DropDown" (the default value) is specified, any text is allowed. If "Simple" is specified, any text is allowed and the list is always displayed regardless of the AutoCompleteMode property value.
· AutoCompleteMode - Determines how the ComboBox automatically completes the text that is typed into it. When "Suggest" is specified, the ComboBox will show the list, highlight the first matched item, and if necessary, scroll the list to show the highlighted item. If "Append" is specified, the ComboBox will append the remainder of the first matched item to the user-typed text and highlight the appended text. When "SuggestAppend" is specified, both of the above behaviors are applied. If "None" (the default value) is specified, the ComboBox's auto-complete behaviors are disabled.
· CaseSensitive - Specifies whether user-typed text is matched to items in the list in a case-sensitive manner. The default is "false".
· RenderMode - Specifies whether the ComboBox is rendered as an "Inline" or "Block" level HTML element. The default is "Inline".
· ItemInsertLocation - Determines whether to "Append" or "Prepend" new items when they are inserted into the list, or whether to insert them in an "Ordinal" manner (alphabetically) based on the item Text or Value. The default is "Append".
· ListItemHoverCssClass - When specified, replaces the default styles applied to highlighted items in the list with a custom css class.
· ListItem - One or more child controls used to declare items that will be added to the ComboBox list. When bound to a data source, all declared ListItems will be removed unless the AppendDataBoundItems property is set to "true".

ConfirmButton DescriptionConfirmButton Description
ConfirmButton is a simple extender that catches clicks on a button (or any instance of a type derived from Button) and displays a message to the user. If the "OK" button is clicked, the button or link functions normally. If not, the click is trapped and the button will not perform its default submit behavior; optionally, a client script is executed if the OnClientCancel property is set. This is useful for delete links or anything else that requires confirmation from the user.

DescriptionConfirmButton Description

ConfirmButton is a simple extender that catches clicks on a button (or any instance of a type derived from Button) and displays a message to the user. If the "OK" button is clicked, the button or link functions normally. If not, the click is trapped and the button will not perform its default submit behavior; optionally, a client script is executed if the OnClientCancel property is set. This is useful for delete links or anything else that requires confirmation from the user.

HoverMenu Description

HoverMenu is an ASP.NET AJAX extender that can be attached to any ASP.NET WebControl, and will associate that control with a popup panel do display additional content. When the user moves the mouse cursor over the main control two things happen:
1. The popup panel is displayed at a position specified by the page developer (at the left, right, top, or bottom of the main control)
2. Optionally, a CSS style is applied to the control to specify it as "hot"
In the sample above, an ASP.NET GridView is populated with data from a database. In each row of the GridView, a HoverMenu associates the content of the row with a Panel containing links that operate on that row.

Mouse over the GridView above to see this behavior. Upon choosing "Edit", the row will go into edit mode, and you'll notice the menu will appear to the right of the content, demonstrating the ability to choose the popup position

HoverMenu Properties

Each row of the GridView above contains a HoverMenu which is initialized with this code. The italic properties are optional:

· TargetControlID - The control that the extender is targeting. When the mouse cursor is over this control, the hover menu popup will be displayed.
· PopupControlID - The ID of the control to display when mouse is over the target control. In this case, it's just a simple panel with two links:
· · ·
·

· HoverCssClass - The CSS class to apply to the target when the hover menu popup is visible.
· PopupPostion - Where the popup should be positioned relative to the target control. Can be Left (Default), Right, Top, Bottom, Center.
· OffsetX/OffsetY - The number of pixels to offset the Popup from it's default position, as specified by PopupPosition. So if you want it to popup to the left of the target and have a 5px space between the popup and the target, the value should be "-5".
· HoverDelay - The time, in milliseconds, before the popup displays after hovering over the target control. Default is 0.
· PopDelay - The time, in milliseconds, for the popup to remain visible after the mouse moves away from the target control. Default is 100.
· Animations - Generic animations for the HoverMenu extender. See the Using Animations walkthrough and Animation Reference for more details.
· OnShow - The OnShow animation will be played each time the hover menu is displayed. The hover menu will be positioned correctly but hidden. The animation can use to display the hover menu along with any other visual effects.
· OnHide - The OnHide animation will be played each time the hover menu is hidden.

dotnet subject

New concepts on dotnet