AJAXttorial
AJAXttorial
Click on the
links below to view documentation and tutorials for each of the controls.
• Accordion Control
o Reference
o Creating a Simple Accordion
• AlwaysVisible Control
o Reference
o Displaying a Fixed Panel
• Animation Control
o Reference
o Creating a Yellow Fade Effect
• AsyncFileUpload Control
o Reference
• AutoComplete Control
o Reference
o Displaying a Simple Auto-Complete TextBox
• Calendar Control
o Reference
o Displaying a Simple Popup Calendar
• CascadingDropdown Control
o Reference
• CollapsiblePanel Control
o Reference
• ColorPicker Control
• ComboBox Control
• ConfirmButton Control
o Reference
• DragPanel Control
o Reference
• DropDown Control
• DropShadow Control
• DynamicPopulate Control
o Reference
• FilteredTextBox Control
• HoverMenu Control
• HTMLEditor Control
• ListSearch Control
• MaskedEdit Control
• ModalPopup Control
• MultiHandleSlider Control
• MutuallyExclusiveCheckBox Control
• NoBot Control
• NumericUpDown Control
• PagingBulletedList Control
• PasswordStrength Control
• Popup Control
• Rating Control
• ReorderList Control
• Resizable Control
• RoundedCorners Control
• Seadragon Control
• Slider Control
• SlideShow Control
• TabContainer and TabPanel Controls
• TextBoxWatermark Control
• ToggleButton Control
• UpdatePanelAnimation Control
• ValidatorCallout Control
Like most of the extenders in the AJAX Control Toolkit, the Accordion control
is written using an extender. The extender requires input in a specific
hierarchy of container elements (like div elements). Therefore, the Accordion
and AccordionPane controls are used to generate the expected input for the
extender. The extender can also be used on its own if you provide
appropriate input.
The Accordion control can also be data-bound. To bind the control, specify a
data source using the DataSource orDataSourceID properties, and then
set the data items in
the HeaderTemplate and ContentTemplate properties. You must call
the DataBind method to bind the control to the data.
To learn how to install the Ajax Control Toolkit, see the Ajax Control
Toolkit page.
Add a ToolkitScriptManager
Before you can use any of the Ajax Control Toolkit controls in a page, you
first need to add a ToolkitScriptManager to the page. You can drag the
ToolkitScriptManager from the Visual Studio Toolbox window onto the page.
The ToolkitScriptManager is located in the Ajax Control Toolkit tab under
the Toolbox.
view plaincopy to clipboardprint?
Add an Accordion
Next, in source view, you need to add an Accordion control. You can drag the
Accordion control from the Toolbox or type the tag yourself:
view plaincopy to clipboardprint?
Add AccordionPanes
Next, in source view, add one or more AccordionPane controls. The Accordion
displays a single AccordionPane at a time. Notice that each AccordionPane
contains both a header and content tag.
Notice that the page contains the definition of four Cascading Style Sheet
classes named accordion, accordionHeader, accordionHeaderSelected, and
accordionContent. These styles are applied to the Accordion control by
setting the CssClass, HeaderCssClass, HeaderSelectedCssClass, and
ContentCssClass properties.
////
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor
congue massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus
malesuada libero, sit amet commodo magna eros quis urna.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor
congue massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus
malesuada libero, sit amet commodo magna eros quis urna.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor
congue massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus
malesuada libero, sit amet commodo magna eros quis urna.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor
congue massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus
malesuada libero, sit amet commodo magna eros quis urna.
///////