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.
Subscribe To
Posts
All Comments
Thursday, July 29, 2010
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
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.
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"
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.
· 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 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.
Wednesday, July 28, 2010
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 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.
Subscribe to:
Posts (Atom)