Web developers notes,programming tutorials.

AJAX - Asynchronous Javascript and XML provides a wide range of reliability in ASP.Net 2.0 evolution.

The AJAX Controls are been provided to enable the developer to create pages will less postback and to increase the productivity.

The AJAX plays a vital role in the recent world and it happens to be the most needed thing in Web Development.

Here comes a TABContainer Control an AJAX Sample Control for ASP.Net 2.0.

DESCRIPTION

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.

TABS CONTAINER PROPERTIES

The TABS CONTAINER is initilaized by the following code.

/>

TabContainer Properties

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

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

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.

The Accordion can also be databound. Simply specify a data source through the DataSource or DataSourceID properties and then set your data items in the HeaderTemplate and ContentTemplate properties.

Prototype framework enables you to deal with Ajax calls in a very easy and fun way that is also safe (cross-browser). Besides simple requests, this module also deals in a smart way with JavaScript code returned from a server and provides helper classes for polling.

The biggest part of the Prototype framework are its DOM extensions. Prototype adds many convenience methods to elements returned by the $() function: for instance, you can write $(’comments’).addClassName(’active’).show() to get the element with the ID ‘comments’, add a class name to it and show it (if it was previously hidden). The ‘comments’ element didn’t have those methods in native JavaScript; how is this possible? This document reveals some clever hacks found in Prototype.

Using the $() function

The $() function is a handy shortcut to the all-too-frequent document.getElementById() function of the DOM. Like the DOM function, this one returns the element that has the id passed as an argument.

function test(){
var d = $(’myDiv’);
alert(d.innerHTML);
d.hide();
d.show();
d.addClassName(’active’);
}

Using the $F() function

The $F() function is another welcome shortcut. It returns the value of any field input control, like text boxes or drop-down lists. The function can take as argument either the element id or the element object itself.

function test3()
{
alert(  $F(’userName’)  );
}