AJAX

By B.KANNA BABU

AJAX
The name AJAX was coined by Jesse James Garrett in 2005 Ajax is Asynchronous javascript and Xml AJAX is a technique for producing faster ,more interaxctive and usable webpages without pagerefreshment. AJAX was developed by five main components HTML,JAVASCRIPT,CSS,XML ,XMLHTTP REQUEST. AJAX is not a technology it is a combination of technologies.

 XMLHTTP Request:this object allows asynchronous exchange of data between the server and the client. It is an API that uses javascript to transfer the data like xml using HTTP protocol. MS developed it in 2000 as a part of outllok web access.

Synchrous request and Response

Synchrous request and Response

In ordinary webpages when the request is made the user has to wait for the response and there may be a chance of causing disturbance to the users work. Every time it will reloading the webpage. for Synchronous request we can make use of HTTP Request object.

Asynchrous request and Response

Asynchrous request and Response

Whenever client gives the request to the server and server retrieves the data from the database and update it in the same page. Here only the particular part of the webpage will get updated without disturbing the rest of the page and meanwhile it allows user to send more requests to the server. Here the response will be received in the form of plain text or xml format. Ajax helps us to create more interactive with web applications. With the help of the Ajax we can handle Asynchronous requests and responses

Browser support
Any browser that supports Xml Http request object can be used to see the Ajax enabled webpage. Ex: internet Explorer Browser,Mozilla FireFox,Apple Safari, Google Chrome, Opera etc.. The developer has to struggle to implement javascript code at client side to make the webpage as ajax enabled.

 To reduce burden on the developer we can make use of appropriate Ajax framework according to the server side technology used for ASP.net. We can make use of ajax framework called ASP.net Ajax .it is not the part of ASP.net.it is a separate framework which is build upon ASP.net technology. With the help of ASP.net Ajax we can make the ASP.net pages as Ajax enabled.

How To Download Ajax Toolkit

www.codeplex.com www.msdn.com www.asp.net

How to add AJAX Tool kit to Toolbox

Components in AJAX
Asp.net Ajax contains two components

Server side Components Client side Components

Server side Components

It is given in the form of ASP.net Ajax Extensions . It provides list of server side controls by which we can make asp.net webpage as Ajax enabled. The server side component is useful for ASP.net developers.

Client side Components

It is given in the form of MS Ajax library it is useful to the other web technologies people. It provides list of JavaScript classes.

 Script Manager: it is a server side control which is responsible to generate the client side code to make the asp.net webpage as Ajax enabled It is responsible to decide which portion of the webpage must be rendered for the Asynchronous request. There can be only one script Manager within a webpage.and should be first control. This control will provide complete JavaScript required for AJAX implementation.

script manager

script manager proxy

this is similar to script manager it can be used when webpage requires more than one script manager. This requirement comes in master pages Script manager of master page cannot be used for child controls this requires Script manager proxy.

Update panel
Update panel is a container for set of controls this will send request to server using xmlHttpRequest component . Only controls in update panel can be updated to server information.

Update panel
It is used to increase some portion of the webpage for which asynchronous request need to be sent and response must be received. We can make use of number of update panels in a webpage. The content of the webpage must be place inside the content template of update panel. Always update panel control must be placed after script manager

 Take two update panels and drag label and button in both the update panels And drag label and button outside the update panel Observe?

Update panel example1

<asp:ScriptManager ID="ScriptManager1" runat="server"> </asp:ScriptManager> <asp:UpdatePanel ID="UpdatePanel1" runat="server"> <ContentTemplate> <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label> <asp:Button ID="Button1" runat="server" Text="Button" /> </ContentTemplate> </asp:UpdatePane> <asp:Label ID="Label2 runat="server Text="Label"></asp:Label>

protected void Button1_Click1(object sender, EventArgs e) { Label1.Text = "hi" + System.DateTime.Now.ToLongDateString(); Label2.Text = hello" + System.DateTime.Now.ToLongDateString(); }

observation
The controls that are available within the update panel only will fire whenever user clicks on the button. i.e. both the update panel controls will be loaded. But whenever user clicks on any button outside the update panel then the entire page will be loaded including the controls that are available within update panel and and outside update panel.

Requirement
only update panel label to be submitted when user clicks on button other update panel controls should not be submitted This requires setting update panel mode to

conditional

 Asynchronous postback trigger will provide update panel controls to control [action] outside the update panel.

Update panel example2

<asp:ScriptManager ID="ScriptManager1" runat="server"> </asp:ScriptManager> <asp:UpdatePanel ID="UpdatePanel1" runat="server"> <ContentTemplate> <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label> <asp:Label ID="Label3" runat="server" Text="Label"></asp:Label> <asp:Button ID="Button1" runat="server" Text="Button" /> </ContentTemplate> <Triggers> <asp:AsyncPostBackTrigger ControlID="Button2" /> </Triggers> </asp:UpdatePanel> <asp:Button ID="Button2" runat="server" Text="Button" onclick="Button2_Click" /> <asp:Label ID="Label2" runat="server" Text="Label"></asp:Label>

protected void Button1_Click(object sender, EventArgs e) { Label1.Text = "hi" + System.DateTime.Now.ToLongDateString(); Label2.Text = hello" +System.DateTime.Now.ToLongDateString(); Label3.Text = hru" + System.DateTime.Now.ToLongDateString(); } protected void Button2_Click(object sender, EventArgs e) { Label1.Text = "hello" + System.DateTime.Now.ToLongDateString(); Label2.Text = hello" + System.DateTime.Now.ToLongDateString(); Label3.Text = hru" + System.DateTime.Now.ToLongDateString(); }

Example to sort the data without page submission

SOURCE CODE
<div> <asp:ScriptManager ID="ScriptManager1" runat="server"> </asp:ScriptManager> <asp:Label ID="Label1" runat="server" Font-Bold="True" Text="Label"></asp:Label> <asp:UpdatePanel ID="UpdatePanel1" runat="server"> <ContentTemplate> <asp:GridView ID="gv1" runat="server" AllowSorting="True" onselectedindexchanged="gv1_SelectedIndexChanged" onsorting="gv1_Sorting"></asp:GridView> </ContentTemplate> </asp:UpdatePanel> </div>

protected void Page_Load(object sender, EventArgs e) { Label1.Text = "page time:" + DateTime.Now.ToLongTimeString(); FillGrid("empno"); } public void FillGrid(string empname) { SqlConnection con = new SqlConnection(ConfigurationManager.ConnectionStrings["constr"].ToStri ng()); SqlDataAdapter da = new SqlDataAdapter("select * from employee order by"+" "+empname, con); DataSet ds = new DataSet(); da.Fill(ds, "employee"); gv1.DataSource = ds; gv1.DataBind(); }

protected void gv1_Sorting(object sender, GridViewSortEventArgs e) { FillGrid(e.SortExpression); Label1.Text = "page time:" + DateTime.Now.ToLongTimeString(); }

Timer Control
Timer control will send request to server at regular intervals without page submission Timer control will have Tick event

 Update progress will display text /image when task is performed on server one task is finished text/image will disappear. It is used to increase some portion of the webpage for which asynchronous request need to be sent and response must be received. We can make use of number of update panels in a webpage. The content of the webpage must be place inside the content template of update panel. Always update panel control must be placed after script manager.

Update progress

Calendar Extender: <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox> <cc1:CalendarExtender ID="TextBox1_CalendarExtender" runat="server" Enabled="True" TargetControlID="TextBox1" Format="MMMM d,yyyy" PopupButtonID="Image1"> </cc1:CalendarExtender> <asp:Image ID="Image1" runat="server" Height="19px" ImageUrl="~/images/calender1.bmp" /> <br /> <asp:ScriptManager ID="ScriptManager1" runat="server"> </asp:ScriptManager>

ACCORDION
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 postback

Accordion properties
Headercss class: formatting will be applied for pane heading if it is collapsed state. HeaderselectedCssclass:formatting will be applied for expanded pane heading Contentcss class:formatting applied for pane content info Transitionduration:will specify pane info presentation wiothin particular time period. Fade transitions :will display pane content info in a faded manner.

<head runat="server"> <title>Untitled Page</title> <style type="text/css"> .c1 { background-color:Gray;color:Black;font-size:xx-large; } .c2 { background-color:Yellow;color:Blue;font-size:xx-large; } </style>

ACCORDION
<div> <asp:ScriptManager ID="ScriptManager1" runat="server"> </asp:ScriptManager> <cc1:Accordion ID="Accordion1" runat="server" FadeTransitions="true" AutoSize="None" HeaderCssClass="c1" ContentCssClass="c2" > <Panes > <cc1:AccordionPane ID="AccordionPane1" HeaderCssClass="header" ContentCssClass="content" runat="server" ForeColor="blue" BackColor ="red"> <Header>HOME</Header>

<Content> <asp:Panel ID="Panel1" runat="server" GroupingText ="Deatails of Accordian"> Copy some text here to display in Home page </asp:Panel> </Content> </cc1:AccordionPane> </Panes>

<Panes > <cc1:AccordionPane ID="AccordionPane2" HeaderCssClass="header" ContentCssClass="content" runat="server" ForeColor="green" BackColor ="red"> <Header >ABOUTUS</Header> <Content> <asp:Panel ID="Panel2" runat="server" GroupingText ="Deatails of Accordian"> Copy some text here to display in ABOUTUs page </asp:Panel> </Content> </cc1:AccordionPane> </Panes>

<Panes > <cc1:AccordionPane HeaderCssClass="header" ContentCssClass="content" ID="AccordionPane3" runat="server" ForeColor="Yellow" BackColor ="red"> <Header>CONTACTUS</Header> <Content> <asp:Panel ID="Panel3" runat="server" GroupingText ="Deatails of Accordian">

Place some image you cannot modify the properties of the image at designtime go to source and write the code for image and set the imageurl property .add a image in solution explorer <asp:Image ID="Image1" runat="server" ImageUrl="~/images/1.png" /> </asp:Panel> </Content> </cc1:AccordionPane> </Panes> </cc1:Accordion> </div>

PASSWORD STRENGTH
<asp:ScriptManager ID="ScriptManager1" runat="server"> </asp:ScriptManager> <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label> <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox> <asp:TextBox ID="TextBox2" runat="server"></asp:TextBox> <cc1:PasswordStrength ID="PasswordStrength1" runat="server" HelpStatusLabelID="Label1" MinimumSymbolCharacters="1" PreferredPasswordLength="7" TargetControlID="TextBox2"> </cc1:PasswordStrength>

TextBoxWatermarkExtender
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox> <br /> <asp:ScriptManager ID="ScriptManager1" runat="server"> </asp:ScriptManager> <cc1:TextBoxWatermarkExtender ID="TextBoxWatermarkExtender1" runat="server" TargetControlID="TextBox1" WatermarkText="Username"> </cc1:TextBoxWatermarkExtender>

ConfirmButtonExtender
<div> <asp:Button ID="Button1" runat="server" Text="Button" onclick="Button1_Click" /> <asp:ScriptManager ID="ScriptManager1" runat="server"> </asp:ScriptManager> <cc1:ConfirmButtonExtender ID="ConfirmButtonExtender1" runat="server" ConfirmText="ARE YOU SURE YOU WANT TO CLCIK THIS" TargetControlID="button1"> </cc1:ConfirmButtonExtender> </div>

FilteredTextBoxExtender
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox> <asp:ScriptManager ID="ScriptManager1" runat="server"> </asp:ScriptManager> <cc1:FilteredTextBoxExtender ID="FilteredTextBoxExtender1" runat="server" TargetControlID="TextBox1" FilterType="Numbers"> </cc1:FilteredTextBoxExtender>

PasswordStrength
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 indicator is displayed when the user begins typing into the TextBox and is hidden from view once the TextBox loses focus.

PasswordStrength
<asp:ScriptManager ID="ScriptManager1" runat="server"> </asp:ScriptManager>

<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox><br /> <asp:Label ID="helpLabel" runat="server"></asp:Label><br />

<asp:TextBox ID="TextBox2" runat="server"></asp:TextBox><br /> <asp:Label ID="helpLabel2" runat="server"></asp:Label> <cc1:PasswordStrength ID="PasswordStrength1" runat="server" TargetControlID="TextBox1" MinimumNumericCharacters="4" MinimumSymbolCharacters="3" PreferredPasswordLength="8" HelpStatusLabelID="helpLabel"> </cc1:PasswordStrength> <cc1:PasswordStrength ID="PasswordStrength2" runat="server" TargetControlID="TextBox2" MinimumNumericCharacters="2" MinimumSymbolCharacters="3" PreferredPasswordLength="7" RequiresUpperAndLowerCaseCharacters="True" StrengthIndicatorType="BarIndicator" HelpStatusLabelID="helpLabel2"> </cc1:PasswordStrength>

AnimationExtender1
<asp:ScriptManager ID="ScriptManager1" runat="server"> </asp:ScriptManager> <asp:Button ID="btnTarget" runat="server" Text="Animate Me" OnClientClick="return false;" /> <cc1:AnimationExtender ID="AnimationExtender1" runat="server" TargetControlID="btnTarget"> <Animations> <OnLoad><StyleAction Attribute="backgroundColor" Value="#fff000" /></OnLoad> <OnClick><StyleAction Attribute="backgroundColor" Value="blue" /></OnClick> <OnMouseOver><StyleAction Attribute="backgroundColor" Value="blue" /></OnMouseOver> <OnMouseOut><StyleAction Attribute="backgroundColor" Value="green" /></OnMouseOut> <OnHoverOver><StyleAction Attribute="color" Value="blue" /></OnHoverOver> <OnHoverOut><StyleAction Attribute="color" Value="yellow" /></OnHoverOut> </Animations> </cc1:AnimationExtender>

DROPDOWN EXTENDER
It is ASP.net Ajax extender that can be attached to almost any Asp.net control to display the control in dropdown menu fashion
<asp:LinkButton ID="LinkButton1" runat="server">LinkButton</asp:LinkButton> <asp:ScriptManager ID="ScriptManager1" runat="server"> </asp:ScriptManager> <cc1:DropDownExtender ID="DropDownExtender1" runat="server" TargetControlID="LinkButton1" > </cc1:DropDownExtender>

Tab Container
It is a collection of tab panels Each tab can be displayed certain information. Tabpanel contains two templates Header Template:it will diplay the heading Content template :is used to place the controls

<asp:ScriptManager ID="ScriptManager1" runat="server"> </asp:ScriptManager> <cc1:TabContainer ID="TabContainer1" runat="server"> <cc1:TabPanel ID="tb1" runat="server"> <HeaderTemplate> news </HeaderTemplate> <ContentTemplate> <asp:Panel ID="Panel1" runat="server"> hi ia mkanna </asp:Panel> </ContentTemplate>

</cc1:TabPanel> <cc1:TabPanel ID="TabPanel2" runat="server"> <HeaderTemplate> news </HeaderTemplate> <ContentTemplate> <asp:Panel ID="Panel2" runat="server"> hi how r u </asp:Panel> </ContentTemplate> </cc1:TabPanel> </cc1:TabContainer>

 ASP.NET AJAX is a free framework for quickly creating efficient and interactive Web applications that work across all popular browsers. Asynchronous requests can be made asynchronously or synchronously both techniques allow web page to be updated without refreshing it anything useful the user can do while processing request? if yes then use asynchronous, otherwise use synchronous JavaScript typically JavaScript is used on the client-side (in the browser) only programming language supported out-of-the-box by most web browsers can use any language on server-side that can accept HTTP requests and return HTTP responses XML

AJAX

ToolKit Download
http://www.asp.net/AJAX/downloads

LifeCycle
Browser Event Server Request Server Response Browser Update

DataTypes
Integer String Double Boolean DateTime DataSet DataTable Custom classes

AJAX Controls
1.Update panel 2.Password Strength 3.Calender 4.DropDown 5.DropShadow 6.FilteredTextBox 7.HoverMenu 8.NumericUpDown 9.TextBoxWaterMark 10.RoundedControl

ScriptManager
You must use a ScriptManager control on a page to enable the following AJAX features of ASP.NET: Partial-page rendering, which enables regions on the page to be independently refreshed without a postback. JavaScript proxy classes for Web services, which enable you to use client script to access Web services and specially marked methods in ASP.NET pages. It does this by exposing the Web services and page methods as strongly typed objects. JavaScript classes to access ASP.NET authentication, profile, and roles application services.

TextBoxWatermarkExtender

<div> <asp:ScriptManager ID="ScriptManager1" runat="server"> </asp:ScriptManager> <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox> <br /> <cc1:TextBoxWatermarkExtender ID="TextBoxWatermarkExtender1" runat="server" TargetControlID="TextBox1" WatermarkText="ENTER USERNAME" > </cc1:TextBoxWatermarkExtender> <asp:TextBox ID="TextBox2" runat="server"></asp:TextBox> <br /> <cc1:TextBoxWatermarkExtender ID="TextBoxWatermarkExtender2" runat="server" TargetControlID="TextBox2" WatermarkText="ENTER PASSWORD"> </cc1:TextBoxWatermarkExtender> <asp:Button ID="Button1" runat="server" Text="Button" /> <br /> <asp:TextBox ID="TextBox3" runat="server"></asp:TextBox>

CALENDER EXTENDER

<div> <asp:ScriptManager ID="ScriptManager1" runat="server"> </asp:ScriptManager> <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox> <cc1:CalendarExtender ID="CalendarExtender1" runat="server" TargetControlID="TextBox1"> </cc1:CalendarExtender> </div>

CALENDER EXTENDER
<asp:TextBox ID="TextBox2" runat="server"></asp:TextBox> <asp:Image ID="Image1" runat="server" /> <cc1:CalendarExtender ID="CalendarExtender2" runat="server" TargetControlID="TextBox2" PopupButtonID="Image1"> </cc1:CalendarExtender>

Filtered textbox
<div> <asp:ScriptManager ID="ScriptManager1" runat="server"> </asp:ScriptManager> <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox> <cc1:FilteredTextBoxExtender ID="FilteredTextBoxExtender1" runat="server" TargetControlID="TextBox1" FilterType="Numbers"> </cc1:FilteredTextBoxExtender> </div>

TOGGLE BUTTON EXTENDER

This can be attached to checkbox to display one image for checked and one image for unchecked. <asp:ScriptManager ID="ScriptManager1" runat="server"> </asp:ScriptManager> <asp:CheckBox ID="CheckBox1" runat="server"/> <cc1:ToggleButtonExtender ID="ToggleButtonExtender1" ImageWidth="200" ImageHeight="200" runat="server" TargetControlID="CheckBox1" CheckedImageUrl="~/images/a.jpg" UncheckedImageUrl="~/images/aa.jpg"> </cc1:ToggleButtonExtender>

Collapsable panel extender

<asp:Panel ID="Panel1" runat="server"> <asp:Image ID="Image1" runat="server" /> <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label> </asp:Panel> <asp:Panel ID="Panel2" runat="server"> <asp:Image ID="Image2" runat="server" /> <cc1:CollapsiblePanelExtender ID="CollapsiblePanelExtender1" runat="server" TargetControlID="panel2" CollapseControlID="Panel1" CollapsedText="speakers{show details}" ExpandControlID="Panel1" ExpandedText="speakersinfo{hide details}" ExpandedImage="~/images/Zui79f0.jpg" CollapsedImage="~/images/Zwwk520.jpg" ImageControlID="Image1" TextLabelID="Label1" Collapsed="true"> </cc1:CollapsiblePanelExtender> </asp:Panel> <asp:ScriptManager ID="ScriptManager1" runat="server"> </asp:ScriptManager>

properties
Filter Type=numbers,characters Target controlid=TextBox1 Valid Characters=some alphabets or some numbers Invalid charcters=some expressions

HOVER MENU

<div> <asp:ScriptManager ID="ScriptManager1" runat="server"> </asp:ScriptManager> <cc1:HoverMenuExtender ID="HoverMenuExtender1" runat="server" TargetControlID="BTNPRODUCT" PopupControlID="Panel1" PopupPosition="Bottom"> </cc1:HoverMenuExtender> <asp:Panel ID="Panel1" runat="server"> <asp:LinkButton ID="LinkButton1" runat="server">LinkButton</asp:LinkButton> <asp:LinkButton ID="LinkButton2" runat="server">LinkButton</asp:LinkButton> </asp:Panel> <asp:LinkButton ID="BTNPRODUCT" runat="server">KANNA</asp:LinkButton> </div>

<div> <asp:ScriptManager ID="ScriptManager1" runat="server"> </asp:ScriptManager> <asp:UpdatePanel ID="UpdatePanel1" runat="server"> <ContentTemplate> <asp:Label ID="lbl1" runat="server"></asp:Label> <asp:Button ID="btn1" runat="server" onclick="btn1_Click" Width="245px" Height="90px" Text="button"/> </ContentTemplate> </asp:UpdatePanel> <asp:Label ID="Label1" runat="server"></asp:Label> </div>

protected void btn1_Click(object sender, EventArgs e) { lbl1.Text = "hi" + System.DateTime.Now.ToLongDat eString(); Label1.Text = "mygo" + System.DateTime.Now.ToLongDat eString(); }

<asp:ScriptManager ID="ScriptManager1" runat="server"> </asp:ScriptManager> <asp:UpdatePanel ID="UpdatePanel1" runat="server"> <ContentTemplate> <asp:Label ID="lbl1" runat="server"></asp:Label> <asp:Button ID="btn1" runat="server" onclick="btn1_Click" Width="115px"/> </ContentTemplate> <Triggers> <asp:AsyncPostBackTrigger ControlID="Button2"/> </Triggers> </asp:UpdatePanel> <asp:Button ID="Button2" runat="server" Width="115px" onclick="Button2_Click"/> <asp:Label ID="Label1" runat="server"></asp:Label>

protected void btn1_Click(object sender, EventArgs e) { lbl1.Text = "hi"+System.DateTime.Now.ToLongDateString(); Label1.Text ="mygo"+System.DateTime.Now.ToLongDateStrin g(); } protected void Button2_Click(object sender, EventArgs e) { lbl1.Text = "hi" + System.DateTime.Now.ToLongDateString(); Label1.Text = "mygo" + System.DateTime.Now.ToLongDateString(); }

PasswordStrength
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 indicator is displayed when the user begins typing into the TextBox and is hidden from view once the TextBox loses focus.

Properties
<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;cs sClass5 CalculationWeightings="50;15;15;20" />

Calender
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.

Properties
<ajaxToolkit:Calendar runat="server" TargetControlID="Date1" CssClass="ClassName" Format="MMMM d, yyyy" PopupButtonID="Image1" /> TargetControlID - The ID of the TextBox to extend with the calendar. CssClass - Name of the CSS class used to style the calendar. See the Calendar Theming section for more information. Format Format String used to display the selected date. PopupButtonID - The ID of a control to show the calendar popup when clicked. If this value is not set, the calendar will pop up when the textbox receives focus. PopupPosition - Indicates where the calendar popup should appear at the BottomLeft(default), BottomRight, TopLeft, TopRight, Left or Right of the TextBox. SelectedDate - Indicates the date the Calendar extender is initialized with.

Filtered TextBox
FilteredTextBox is an extender which prevents a user from entering invalid characters into a text box. Note that since this effect can be avoided by deactivating JavaScript, you should use this extender as a convenience for your users, but you must never expect that the data being sent to the server consists of "valid" chars only. FilteredTextBox Properties <ajaxToolkit:FilteredTextBoxExtender ID="ftbe" runat="server" TargetControlID="TextBox3" FilterType="Custom, Numbers" ValidChars="+-=/*()." />

NumericUPDown
It will attach up and down buttons to textboxes for navigating between values NumericUpDown is an ASP.NET AJAX extender that can be attached to an ASP.NET TextBox control to add "up" and "down" buttons that increment and decrement the value in the TextBox. The increment and decrement can be simple +1/-1 arithmetic, they can cycle through a provided list of values (like the months of the year), or they can call a Web Service to determine the next value.

Properties
<ajaxToolkit:NumericUpDownExtender ID="NUD1" runat="server" TargetControlID="TextBox1" Width="100" RefValues="January;February;March;April" TargetButtonDownID="Button1" TargetButtonUpID="Button2" ServiceDownPath="WebService1.asmx" ServiceDownMethod="PrevValue" ServiceUpPath="WebService1.asmx" ServiceUpMethod="NextValue" Tag="1" /> TargetControlID - The ID of the TextBox to modify Width - Combined size of the TextBox and Up/Down buttons (min value 25). This property is not used if you provide custom buttons. RefValues - A list of strings separated by semicolons (;) to be used as an enumeration by NumericUpDown Step - Step used for simple numeric incrementing and decrementing. The default value is 1. TargetButtonDownID/TargetButtonUpID - Reference to custom Up/Down buttons

MASKED EDIT EXTENDER

It will apply mask for textbox Properties: Masktype-number Mask-\$9{4} Masktype-date mask-99/99/9999 Control to validate Invalid value messageinvalid date

ListSearchExtender
<div>
Click on this ListBox and start typing to search for an entry: <asp:ScriptManager ID="ScriptManager1" runat="server"> </asp:ScriptManager> <asp:ListBox ID="ListBox1" runat="server"></asp:ListBox> <cc1:ListSearchExtender ID="ListSearchExtender1" runat="server" TargetControlID="ListBox1" PromptCssClass="ListSearchExtenderPrompt"> </cc1:ListSearchExtender> <asp:DropDownList ID="DropDownList1" runat="server"> </asp:DropDownList> <cc1:ListSearchExtender ID="ListSearchExtender2" runat="server" TargetControlID="DropDownList1" PromptCssClass="ListSearchExtenderPrompt"> </cc1:ListSearchExtender> </div>

protected override void OnLoad(EventArgs e) { base.OnLoad(e); ListBox1.DataSource = GetWordListText(); ListBox1.DataBind(); DropDownList1.DataSource = GetWordListText(); DropDownList1.DataBind(); } private static string[] wordListText; public string[] GetWordListText() { // This is the NATO phonetic alphabet (http://en.wikipedia.org/wiki/NATO_phonetic_alphabet) // and was chosen for its size, non-specificity, and presence of multiple words with the same // starting letter.

if (null == wordListText) { string[] tempWordListText = new string[] {"Alfa","Alpha","Bravo","Charlie","Delta", "Echo","Foxtrot","Golf","Hotel","India", "Juliett","Juliet","Kilo","Lima","Mike", "November","Oscar", "Papa","Quebec","Romeo", "Sierra","Tango","Uniform","Victor","Whiskey", "X-ray","Xray","Yankee","Zulu","Zero","Nadazero", "One","Unaone","Two","Bissotwo","Three","Terrathree", "Four","Kartefour","Five","Pantafive","Six","Soxisix", "Seven","Setteseven","Eight","Oktoeight","Nine", "Novenine"}; Array.Sort(tempWordListText); wordListText = tempWordListText; } return wordListText; }