Ajax Notes Full

What is AJAX?
Ajax (Asynchronous JavaScript and XML) is a

new paradigm introduced in 2005. To use Ajax,
able to trade data, with a web server, without
having to load a new page. The purpose of Ajax is
that of giving the illusion that websites are
responsive. It achieves this by processing requests
which involve the sending and receiving of small
packets of data without refreshing the web
browser. Ajax is a technique for creating fast and
dynamic web pages. In other words, Ajax allows
web pages to be updated asynchronously by
exchanging small amounts of data with the server
behind the scenes. This means that it is possible to
update parts of a web page, without reloading the
whole page.
Examples of applications using AJAX: Google Maps,
Gmail, Youtube, and Facebook tabs.
Why Use AJAX?
In traditional JavaScript coding to get any
information from a database or a file on the server,
or send user information to a server, its important
to make an HTML form and GET or POST data to
the server. Wait for the server to respond, then a
new page will load with the results when clicking
Ok button to send the information. Because the
server returns a new page each time . With AJAX,
your JavaScript communicates directly with the

server, through the JavaScript XMLHttpRequest
object With an HTTP request, a web page can
make a request to, and get a response from a web
server - without reloading the page. The user will
stay on the same page, and he will not notice that
scripts request pages, or send data to a server in
the background. By using the XMLHttpRequest
object, a web developer can update a page with
data from the server after the page has loaded.
The XMLHttpRequest object is supported in
Internet Explorer 5.0+, Safari 1.2, Mozilla 1.0 /
Firefox, Opera 8+, and Netscape 7.
How Ajax Work?
History Of Ajax
During browser innovation, Netscape added a

feature known as LiveScript (LiveScript
became JavaScript and grew more powerful,),
allowed people to put small scripts in web
pages so that they could continue to do things
after youd downloaded them.
Ajax came when the Internet Explorer
introduced the concept of IFrame element.
Microsoft introduced another technique, called
as Microsofts Remote Scripting that
technique involved the pulling of data through
means of Java Applet which communicated
with the client side using scripting language

like JavaScript.
As soon Microsoft introduced new

XMLHttpRequest object that acts as an
ActiveX control in the Internet Explorer. Finally,
in the year 2006, the W3C (World Wide Web
Consortium) announced the release of the first
draft that included the specification for the
object (XMLHttpRequest) and made it an
official web standard.
AJAX (first coined in the year 2005) is not a
new programming language but a relatively
new technique for creating faster, better and
dynamic web applications. If you have the
basic understanding of HTML, XHTML, XML and
JavaScript languages then you can have a go
with AJAX
AJAX is basically based on the following web
standard, XML HTML JavaScript CSS.
Ajax Architecture in ASP. Net
Server Script, A script is a program or set of

instructions that is interpreted or carried out by
another program rather than by the processor. A
CGI script is an example of a server-side script .
Microsoft Ajax Library, There are different
library and applications:
1.
2.
3.
Base Class Library

Script Code Library
Asynchronous Communications, transfer
data asynchronously.
4.
Browser Capability
5.
Browsers (IE, Firefox etc.)
ASP.Net Ajax Extensions, Ajax Extensions

provide controls in build with .Net framework.
1. Ajax Server Control
2. Application
3. Asynchronous Communication
First Program
1. Open new ASP.NET Web Site then click
OK.
4.
5. 2. Open Tool Box and drag ScriptManager and
UpdatePanel from AJAX Extensions. Then drag
label and Button, named UsingAjax. Open
properties window of UpdatePanel. Go to
Triggers property and click on collection then
add the controlID (Button name, which you
want to make a AJAX part) and select Event

(Click). Added one another button outside the
UpdatePannel ,named WithoutAjax and a
added another Label.
6.
7.
8. 3. Paste the code in .cs file of the
application
protected void with_ajax_Click1(object sender,
EventArgs e)
{
Label1.Text = DateTime.Now.ToString();
}
protected void without_ajax_Click(object sender,
EventArgs e)
{
Label2.Text = DateTime.Now.ToString();
}
9. 4. Debug the application
10.
11.
Clicking on "Using Ajax Button" ,only
first time (label) will be updated without
reloading whole page.
12.
Clicking on "Without Ajax Button", whole
page Reloaded.
Ajax Controls
You drop the controls to your page (Default.aspx)
from the Tab Ajax Extensions.
1. ScriptManager Control
Client script for AJAX-enable ASP.NET Web pages
managed by ScriptManager control . ScriptManager
control registered the client script for the Microsoft
Ajax Library with the page. Script manager support
features such as
1.
Partial-page rendering to the browser
2.
Web-service calls.
2. ScriptManagerProxy Control
When a ScriptManager control is already defined in
a parent element (or master page or host page
already contains a ScriptManager control) then
used ScriptManagerProxy control to enables nested
components and user control to add service and
script.
3. Timer control
The ASP.NET AJAX Timer control
1.
Performed Postbacks of pages at defined

intervals.
2.
Timer control with an UpdatePanel control,
enable partial-page updates at a defined
interval.
3.
If you want to post the whole page, used

Timer Control.
4.
The Timer control requires specific settings

in a web.config file in order to function
correctly.
5.
If your application does not contain the

required web.config file, errors appear in the
Design view of the page where the control
would have appeared.
4. UpdatePanel control
Which area on web page you want to partial
update, used under the UpdatePanel control. Don't
wrap your entire page within an UpdatePanel. You
may use several panels on your page. UpdatePanel
control is the most important control in the
ASP.NET AJAX package. It will AJAX controls
contained within it, allowed to partial rendering of
the area on the web page.
5. UpdateProgress Control
UpdateProgress control provides status information
about partial-page updates in UpdatePanel
controls. UpdateProgress control provides, to
customize the content. When a partial-page update
is very fast, you can specify a delay before the
UpdateProgress control is displayed.
ScriptManager Control
Client script for AJAX-enable ASP.NET Web pages
managed by ScriptManager control . ScriptManager
control registered the client script for the Microsoft
Ajax Library with the page. Script manager support
features such as
1.
Partial-page rendering to the browser
2.
Web-service calls.
Dragging ScriptManager from Ajax extension.

<%@ Page Language="C#"
AutoEventWireup="true"
CodeFile="Default.aspx.cs"
Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD
XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1transitional.dtd">
<html
xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Untitled Page</title>
</head>
<body>
<form id="form1" runat="server">
<div>
</div>
<asp:ScriptManager ID="ScriptManager1"
runat="server">
</asp:ScriptManager>
</form>
</body>
</html>
The ASP. NET controls UpdatePanel,

UpdateProgress, and Timer needed a
ScriptManager control in order to support partialpage rendering. To view the property window, right
click to the ScriptManager control and select
Properties. Several property opened.
ScriptManagerProxy Control
When a ScriptManager control is already defined

in a parent element (or master page or host page
already contains a ScriptManager control) then
used ScriptManagerProxy control to enables
nested components and user control to add service
and script.
When you use the ScriptManagerProxy control,
added to the script and service collections defined

by the ScriptManager control. If you do not used
specific scripts and services on every page that
includes a particular ScriptManager control. Add
them to individual pages by using the
ScriptManagerProxy control and remove those
scripts and services from ScriptManager Control.
The ScriptManagerProxy control requires specific
settings in a web.config file in order to function
correctly.
Timer control
The ASP. NET AJAX Timer control
1.
Performed Postbacks of pages at defined

intervals.
2.
Timer control with an UpdatePanel control,
enable partial-page updates at a defined
interval.
3.
If you want to post the whole page, used

Timer Control.
4.
The Timer control requires specific settings

in a web.config file in order to function
correctly.
5.
If your application does not contain the

required web.config file, errors appear in the
Design view of the page where the control
would have appeared.
How to use Timer Control

1. Drag ScriptManager Control, UpdatePanel
and label from toolbox. After this add a timer
control.
2. Open the properties of Update panel. Click

on collection.
3.Select controlID and give the name of your

Timer control and choose the event.
Click OK
4.Paste the code in the Default.aspx.cs file on

your Website
using
using
using
using
using
using
using
System;
System.Configuration;
System.Data;
System.Linq;
System.Web;
System.Web.Security;
System.Web.UI;
using
System.Web.UI.HtmlControls;
using
System.Web.UI.WebControls;
using
System.Web.UI.WebControls.W
ebParts;
using System.Xml.Linq;
public partial class _Default :
System.Web.UI.Page
{
protected void
Page_Load(object sender,
EventArgs e)
{
}
protected void
Timer1_Tick1(object sender,
EventArgs e)
{
Label1.Text =
System.DateTime.Now.ToString
();
}
}
5. The design view of your Website
<!DOCTYPE html PUBLIC

"-//W3C//DTD XHTML 1.0
Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/
xhtml1-transitional.dtd">
<html
xmlns="http://www.w3.org/1999/xht
ml">
</head>
<body>
<form id="form1"
runat="server">
<div>
<asp:ScriptManager
ID="ScriptManager1"
runat="server">
</div>
<asp:UpdatePanel
ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:Label ID="Label1"
runat="server"></asp:Label>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger
ControlID="Timer1"
EventName="Tick" />
</Triggers>
</asp:UpdatePanel>
<asp:Timer ID="Timer1"
runat="server"
ontick="Timer1_Tick1"
Interval="60">
</asp:Timer>
</form>
</body>
</html>
6. Debug the Application
UpdatePanel control
Which area on web page you want to partial

update, used under the UpdatePanel control. Don't
wrap your entire page within an UpdatePanel. You
may use several panels on your page. UpdatePanel
control is the most important control in the
ASP.NET AJAX package. It will AJAX controls
contained within it, allowed to partial rendering of
the area on the web page.
The <asp:UpdatePanel> tag has two childtags:
1. ContentTemplate, The ContentTemplate tag
holds the content of the panel. The content are
anything that you would normally put on your
page, from web controls
2. Triggers tags, The Triggers tag allows you to
define certain triggers which will make the panel
update there contents. The following example will
show the use of both childtags.
Go to properties of UpdatePanel control, click
on Triggers a new window open. Add
controls, which you want to make a part of
web page for partial rendering.
Click Ok
"http://www.w3.org/TR/xhtml1/DTD/xhtml1
-transitional.dtd">
<html
xmlns="http://www.w3.org/1999/xhtml">
</head>
<body>

<div>
<asp:ScriptManager
ID="ScriptManager1" runat="server">
<asp:UpdatePanel ID="UpdatePanel1"
runat="server">
<Triggers>
ControlID="Button1" EventName="Click">
</asp:AsyncPostBackTrigger>
ControlID="TextBox1" EventName="Load">
ControlID="TextBox2">
</Triggers>
</asp:UpdatePanel>
</div>
<p>
<asp:TextBox ID="TextBox1"
runat="server"></asp:TextBox>
runat="server"
style="top: 84px; left: 255px;
position: absolute; height: 22px; width:
128px">
</asp:TextBox>
</p>
<p>
<asp:Button ID="Button1"
runat="server"
position: absolute; height: 26px; width:
56px"
Text="Button" />
</p>
</form>
</body>
</html>
UpdateProgress Control
UpdateProgress control provides status information
about partial-page updates in UpdatePanel
controls. UpdateProgress control provides, to
customize the content. When a partial-page update
is very fast, you can specify a delay before the
UpdateProgress control is displayed.
Example
1.Open a new Website. Add ScriptManager,
updatePanel and UpdateProgress in order.
Drag a button (named Update) control on

your webpage.
2. Go to UpdatePanel Control Properties and

add the Update Button to UpdatePanelTrigger
Collection.
3. Design Code (Default.aspx)

<html
xmlns="http://www.w3.org/1999/xhtml"
>
<title>UpdateProgress
Control</title>
</head>
<body>
<form id="UpdateProgress"
runat="server">
<div>
<asp:ScriptManager
<asp:UpdatePanel
<Triggers>
ControlID="update_bt"
EventName="Click">
</Triggers>
</asp:UpdatePanel>
<asp:Button ID="update_bt"
runat="server" Text="Update" />
</div>
<p> </p>
<asp:UpdateProgress
ID="UpdateProgress1" runat="server">
<ProgressTemplate><img
src="face.jpg" width="300"
height="300" /></ProgressTemplate>
</asp:UpdateProgress>
</form>
</body>
</html>
<ProgressTemplate> property used to gets or
sets the template, which defined the content
of the UpdateProgress control.
On Update Button Click (.cs Code)
protected void
update_bt_Click(object
sender, EventArgs e)
{
System.Threading.Thread.S
leep(5000);
}
4. Debug the Application
Note: When Click on Update Button, the image will

be appear for 5 sec. You can increase the time to
increment the value in sleep method
(System.Threading.Thread.Sleep(5000)).
Ajax Control Toolkit Download and Install
1. Download Ajax Control Toolkit
2. How to Install Ajax Controls in .Net Framework
Step 1. Open new Website and right click on Tool
Box, choose Add tab option as shown in below
Image.
Step 2. Written the name of Your Ajax control tab.
Step 3. Right click on Ajax control tab Click on the

Choose Items option, a new window of Choose
Toolbox Items be open.
Step 4. Click on Browse.. button , and find Ajax

Control Toolkit Folder (Which you downloaded)
and select AjaxControlToolkit.dll file. Click on Open
button then click OK.
Step 5. Controls are Downloaded. You can see in

your Ajax control Tab.
AjaxToolkitExtender Controls
1. Accordion Control
2. AlwaysVisibleControl
3. Animation Control
4. AsyncFileUpload Control
5. AutoComplete Control
6. Calendar Control
7. CascadingDropDown Control
8. TextBoxWatermark
9. HoverMenu Control
10.
ConfirmButton Control
11.
Rating Control
12.
ToggleButton Control
13.
Tabs Control
14.
Slider Control
15.
DragPanel Control
16.
DropDown Control
17.
CollapsiblePanel Control
18.
DropShadow Control
19.
FilteredTextBox Control
20.
RoundedCorners Control
21.
ResizableControl
22.
PopupControl
23.
ListSearchExtender Control
24.
MaskedEdit Control
25.
ValidatorCallout Control
26.
PasswordStrength Control
27.
SlideShow Control
28.
MutuallyExclusiveCheckBox Control
29.
NumericUpDown Control
30.
ModalPopupExtender
31.
MultiHandleSliderExtender Control
32.
Mutually Exclusive Check Box
33.
NoBot Control
34.
ReorderList Control
35.
AnimationExtender Control
36.
MaskedEditExtender Control
Accordion Control
Accordion control provide multiple panes, only one
of them is visible at a time another can be opened
by clicking the header. It is like having several
CollapsiblePanels. Each AccordionPane control has
a template for its Header and its Content.
Supports three AutoSize modes
1. None - The Accordion grows/shrinks without
restriction.
2. Limit - The Accordion never grows larger than
the value specified by its Height property.
3. Fill - The Accordion always stays the exact same
size as its Height property.
How to Use Accordion Control
Step 1. Drag Accordion Control from Ajax
Control tab. Add Pane property and
AccordionPane Control to this control (your
no of choice).
<%@ Register
Assembly="AjaxControlToolkit"
Namespace="AjaxControlToolkit"
TagPrefix="cc1" %>
"http://www.w3.org/TR/xhtml1/DTD/xht
ml1-transitional.dtd">
<html
>
<title>Accordion Control</title>
</head>
<body>
<form id="Accordion Control"
runat="server">
<div>
<asp:ScriptManager
</div>
<cc1:Accordion ID="Accordion1"
runat="server" AutoSize="None"
FadeTransitions="true"
TransitionDuration="250"
FramesPerSecond="40"
RequireOpenedPane="false"
SuppressHeaderPostbacks="true"
BorderStyle="Solid" BorderColor="Black"
Width="300">
<Panes>
<cc1:AccordionPane
ID="AccordionPane1" runat="server"
BorderStyle="Solid">
<Header><h3>Er.Anil</h3></Header>
<Content>Anil is a Good
Programmer.....</Content>
</cc1:AccordionPane>
<cc1:AccordionPane
<Header><h3>Er.
Ashish</h3></Header>
<Content>Ashish is a...</Content>
<cc1:AccordionPane
<Header><h3>Er.
Kamal</h3></Header>
<Content>Kamal is
a......</Content>
</Panes>
</cc1:Accordion>
</form>
</body>
</html>
Step 2. Debug the application. By default first
Header opened.
Clicking on Ashish
Clicking on Kamal
AlwaysVisibleControl
To display the control above all the page content
that always visible use AlwaysVisible Control,
whether you scroll the page upwards or
downwards.
AlwaysVisible Control Properties
1. TargetControlID: ID of control for this
extender to always make visible.
2. HorizontalOffset: Default is 0 pixels, distance
to the HorizontalSide edge of the browser in pixels.
3. HorizontalSide: Default is Left, horizontal edge
of the browser (either Left, Center, or Right) used
to anchor the target control.
4. VerticalOffset: Default is 0 pixels, distance to
the VerticalSide edge of the browser to the target
control from the same side.
5. VerticalSide: Default is Top, vertical edge of
the browser (either Top, Middle, or Bottom) to the
target control.
6. ScrollEffectDuration: Default is .1 second,

scrolling effect to last when the target control is
repositioned in second.
7. UseAnimation: Default is false, Whether or not
to animate the element into position.
Animation Control
Animation Control Provide easily adding animation
effects to web pages. It plays animations whenever
a specific event like OnLoad, OnClick,
OnMouseOver, or OnMouseOut is raised by the
target control.
The sample below demonstrates a composite
animation consisting of four primary animation
actions, done in parallel:
1.
Move (to move the panel to its final
location)
2.
Resize (to change the size of the panel)
3.
4.
Fade (to fade the text in/out)

Color (the flyout changes from gray to
white and the text pulses red)
Animation Control Properties

1.
2.
OnHoverOut
TargetControlID
3.
OnMouseOver
4.
OnClick
5.
OnHoverOver
6.
OnMouseOut
7.
OnLoad
AsyncFileUpload Control
AsyncFileUpload Control is an ASP.NET AJAX
Control. To asynchronously upload files to the
server you can used this control.. Uploading file
results be checked on both sides (Client side and
server side). SaveAs() is calling for to save the
uploading file.
Events
1.
2.
UploadedComplete
UploadedFileError
Properties
1.
2.
CompleteBackColor
ContentType
3.
ErrorBackColor
4.
FileContent
5.
FileName
6.
HasFile
7.
OnClientUploadComplete
8.
OnClientUploadError
9.
OnClientUploadStarted
10.
PostedFile
11.
ThrobberID
12.
UploaderStyle
13.
UploadingBackColor
14.
Width
Methods
1.
SaveAs(string filename)
AutoComplete Control
AutoComplete Control is offer to suggestion for
the user and it can be attached to any TextBox
Control, associate that control with a popup panel
to display words that begin with the prefix typed
into the textbox. Dropdown lists of candidate
words is positioned on the bottom left of the text
box supplied by a web service.
AutoComplete Properties
TargetControlID
ServiceMethod
ServicePath
ContextKey
UseContextKey
MinimumPrefixLength
CompletionInterval
EnableCaching
CompletionSetCount
CompletionListCssClass
CompletionListItemCssClass.
CompletionListHighlightedItemCssClass
DelimiterCharacters
FirstRowSelected
ShowOnlyCurrentWordInCompletionListItem
Animations
How To Use AutoComplete Control

Step 1. Drag a TextBox From Tool Box. Click
on Add Extender
Step 2. A small window opened, select

AutoComplete Extender. Press OK, control be
added.
Step 3. Open solution Explorer and add Web

Service (through Add Existing Item).
Design Code (Default.aspx).

<%@ Register
assembly="AjaxControlToolkit"
namespace="AjaxControlToolkit"
tagprefix="cc1" %>
Transitional//EN"
<html
ml">
<title>AutoComplete</title>
</head>
<body>
<form id="AutoComplete"
runat="server">
<div>
</div>
<asp:ScriptManager
ID="ScriptManager1"
runat="server">
runat="server"
position: absolute; height: 22px;
width:
128px"></asp:TextBox>
<cc1:AutoCompleteExtender
ID="TextBox1_AutoCompleteExtende
r" runat="server"
TargetControlID="TextBox1"
ServiceMethod="GetCompletionList"
ServicePath="ToolkitTestService.asm
x"
MinimumPrefixLength="2"
CompletionInterval="1000"
EnableCaching="true"
CompletionSetCount="20" >
</cc1:AutoCompleteExtender>
</form>
</body>
</html>
1. Used Property and set the path of Web Service
File (ServicePath="ToolkitTestService.asmx").
2. (MinimumPrefixLength="2" ) Set this property
2, means the suggestion window will open after
entered two character
3. (CompletionSetCount="20") This property will
set the no of suggestion showen in window.
Step 4. Debug the Application and enter
character in TextBox. New suggestion
window opened.
Calendar Control
Calendar Control is an ASP.NET AJAX extender
control, provides client-side date-picking
functionality with customizable date format, that
can be attached to any ASP.NET TextBox control.
The left and right arrows can be used to move
forward or back a month to months in the current
year.
Properties
1.
2.
TargetControlID
CssClass
3.
Format
4.
PopupButtonID
5.
PopupPosition
6.
SelectedDate
Calendar CssClass property provide to change look

and feel of your Calendar. Calendar has a
predefined set of CSS classes .
Calendar Css Classes
1.
2.
ajax__calendar_container
.ajax__calendar_header
3.
.ajax__calendar_prev
4.
.ajax__calendar_title
5.
.ajax__calendar_next
6.
.ajax__calendar_body
7.
.ajax__calendar_days
8.
.ajax__calendar_dayname
9.
.ajax__calendar_day
10.
.ajax__calendar_months
11.
.ajax__calendar_month
12.
.ajax__calendar_years
13.
.ajax__calendar_year
14.
.ajax__calendar_footer
15.
.ajax__calendar_today
16.
.ajax__calendar_hover
17.
.ajax__calendar_active
18.
.ajax__calendar_other
How to use Calendar

Step 1. Drag a Text Box from Tool Box tab
and click on Add Extender.
Step 2. New Window open now add Calendar

Control. Press Ok
Design Code (Default.aspx)

<%@ Register
tagprefix="cc1" %>
Transitional//EN"
"http://www.w3.org/TR/xhtml1/DT
D/xhtml1-transitional.dtd">
<html
xmlns="http://www.w3.org/1999/x
html">
</head>
<body>
<form id="form1"
runat="server">
<div>
<asp:ScriptManager
ID="ScriptManager1"
runat="server">
runat="server"
width:
<cc1:CalendarExtender
ID="TextBox1_CalendarExtender"
runat="server"
Enabled="True"
TargetControlID="TextBox1">
</cc1:CalendarExtender>
</div>
<p>
runat="server" Text="Select
Date"></asp:Label>
</p>
</form>
</body>
</html>
You can change your date format in textbox
using Property like shown in Diagram.
Step 3. Debug the Application. Output will be
Click on desire date to show in text box.
CascadingDropDown Control
CascadingDropDown Control provides the

functionality to populate the Dropdownlist
control in a sequence of
relation to each other.
Cascading Dropdown control works with a web
service.
Web service returns the result according to the
call made by CascadingDropdown extender
control.
One dropdown call the web service method on
its selected index change event.
First dropdown fills the associates dropdown
control with results retrieved from that web
service method.
The sample web service used to reads the
data from a simple hierarchical XML data file.
Properties
1.
TargetControlID
2.
Category
3.
PromptText
4.
PromptValue
5.
EmptyText
6.
EmptyValue
7.
LoadingText
8.
ServicePath
9.
ServiceMethod
10.
ContextKey
11.
UseContextKey
12.
ParentControlID
13.
SelectedValue
How to use CascadingDropDown Control

TextBoxWatermark Control
1.
This Control attached to an ASP.NET

TextBox control to get "watermark" behavior
on the web Page.
2.
Purpose of this control to provide more
information to user.
Properties
1.
TargetControlID, Control ID.
2.
WatermarkText, The text to show when the

control has no value
3.
WatermarkCssClass, The CSS class to

apply to the TextBox.
Step.1 Drag ScriptManager Control and add a

two Text Box . Click on First Text Box and click on
Add Extender.
Step 2. Above process is repeat for the Second

Text Box (Same as above). Add a button and Two
Label on page for show the text which user enter
in Text Box. Paste the Below code on button Click
(Default.aspx.cs).
protected void
Button1_Click(object sender,
EventArgs e)
{
Label1.Text = "Hello!!!!" +
"" +TextBox1.Text.ToString();
Label2.Text = "" +
TextBox2.Text.ToString();
}
The Design Code (Default.aspx)
<%@ Register
tagprefix="cc1" %>
Transitional//EN"
<html
html">
<style type="text/css">
.style2
{
width: 100%;
}
</style>
</head>
<body>
<form id="form1"
runat="server">
<div>
<asp:ScriptManager
ID="ScriptManager1"
runat="server">
runat="server"
width:223px"></asp:TextBox>
runat="server"
width:
<cc1:TextBoxWatermarkExtender
ID="TextBox2_TextBoxWatermarkE
xtender"
runat="server"
Enabled="True"
WatermarkText="Enter Your
Second Name..">
</cc1:TextBoxWatermarkExtender>
runat="server"
style="top: 134px; left:
294px; position: absolute; height:
26px;
width: 56px"
Text="Submit"
onclick="Button1_Click" />
</div>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
</form>
</body>
</html>
Step 3. Debug the Application. Output Will Be
Enter text in Textbox
HoverMenu Control
1.
HoverMenu is an ASP.NET AJAX extender

that can be attached to any ASP.NET
WebControl.
2.
We Associate Panel (Web Controls) to this
control, these control visible when mouse over
the HoverMenu Control.
3.
Popup position has been decided by

Developer.
Properties
1. TargetControlID: Control ID of HoverMenu
Control.
2. PopupControlID: ID of the control which
display when mouse over on the HoverMenu
Control..
3. HoverCssClass: Css class.
4. PopupPostion: Popup should be positioned
relative to the target control
5. OffsetX/OffsetY: The number of pixels to
offset the Popup from it's default position
6. HoverDelay: The time, in milliseconds, before
the popup display.
7. PopDelay: The time, in milliseconds, for the
popup to remain visible.
8. Animations: Generic animations for the
HoverMenu extender.
How to Use HoverMenu Control

Step 1. Add Script manager and a HoverMenu
Control to your page. Add a Link Button Control
and Pass the ID of this link Button to the
HoverMenu Control Property
(TargetControlID="LinkButton1").
Step 2. Add a Control Panel and two other Link

Button Control in the Panel. Copy the Panel ID and
paste in the property of HoverMenu Control
(PopupControlID="Panel1" ). This property show
the popup control when mouse over the
HoverMenu control (means Link Button).
The Design Code (Default.aspx).

<%@ Register
TagPrefix="cc1" %>
Transitional//EN"
<html
xmlns="http://www.w3.org/1999/
xhtml">
<title>HoverMenu</title>
</head>
<body>
<form id="HoverMenu"
runat="server">
<div>
<asp:ScriptManager
ID="ScriptManager1"
runat="server">
</div>
<cc1:HoverMenuExtender
ID="HoverMenuExtender1"
runat="server"
TargetControlID="LinkButton1"
PopupControlID="Panel1"
PopDelay="100"
HoverDelay="100"
PopupPosition="bottom">
</cc1:HoverMenuExtender>
<asp:LinkButton
ID="LinkButton1" runat="server"
FontSize="Larger">R4R</asp:LinkButt
on>
<asp:Panel ID="Panel1"
runat="server"
BackColor="#FF9900">
<asp:LinkButton
PostBackUrl="http://r4rtechsoft.co
m/">About Us</asp:LinkButton>
<asp:LinkButton
PostBackUrl="http://r4r.co.in/">Po
rtal</asp:LinkButton>
</asp:Panel>
</form>
</body>
</html>
Step 3. Debug the application. Mouse over the

R4R Link, two other Links Open.
ConfirmButton Control
1. This control work like a java script confirm box.
2. ConfirmButton is a simple extender, that clicks
on a button and displays a message to the
user. If the "OK" button is clicked, the button
or link functions normally. If not then perform
its default submit behavior. Optionally, a client
script is executed if the OnClientCancel

property is set.
Properties
1. TargetControlID: ID of the control for this
extender be operate.
2. ConfirmText: The text is show when u want
to confirm.
3. OnClientCancel: Client side script, which you
want to show on Cancel button click
4. ConfirmOnFormSubmit: Boolean value true
or false.
5. DisplayModalPopupID
How to use ConfirmButton Control
Step 1. Add ScriptManager and a Button
Control. Go to Button task and click on Add
Extender.
Step 2. A Small Window open, select

ConfirmButtonExtender and click on Ok.
Step 3. Add a Panel control and two

LinkButton Control. On Button Click
(Default.aspx.cs) code.
public partial class _Default :
System.Web.UI.Page
{
protected void
Page_Load(object sender,
EventArgs e)
{
Panel1.Visible = false;
}
protected void
EventArgs e)
{
Panel1.Visible = true;
}
}
When Page be Laded Panel Control is invisible.

When user click on button, a confirm box be open
if click Ok then panel be visible. If click on Cancel
panel is invisible. Client Side Script is Possible on
Cancel Click.
Design Code

<%@ Register
namespace="AjaxControlToolki
t"
tagprefix="cc1" %>
Transitional//EN"
"http://www.w3.org/TR/xhtml
1/DTD/xhtml1transitional.dtd">
<html
xmlns="http://www.w3.org/19
99/xhtml">
<title>ConfirmButton</title>
</head>
<body>
<form id="ConfirmButton"
runat="server">
<cc1:ToolkitScriptManager
ID="ToolkitScriptManager1"
runat="server">
</cc1:ToolkitScriptManager>
runat="server" Text="R4R
SoftTech."
onclick="Button1_Click"
/>
runat="server">
<asp:LinkButton
runat="server"
PostBackUrl="http://r4rtechsof
t.com/">
About Us</asp:LinkButton>
<asp:LinkButton
runat="server"
PostBackUrl="http://www.r4r.c
o.in/">
Portal</asp:LinkButton>
</asp:Panel>
<cc1:ConfirmButtonExtender
ID="Button1_ConfirmButtonEx
tender" runat="server"
ConfirmText="Are u Sure..."
Enabled="True"
TargetControlID="Button1">
</cc1:ConfirmButtonExtender
>
</form>
</body>
</html>
Step 4. Debug the Application, Click on Button
If Click on Ok then
If Click on Cancel. No action perform on

Button Click.
Rating Control
The Rating control provides an intuitive rating
experience that allows users to select the number
of stars that represents their rating. Rating Control
is useful for those who need to show ratings in
ASP.NET more graphically.
Properties
1. AutoPostBack: True to cause a postback on
rating item click.
2. CurrentRating: Initial rating value
3. MaxRating: Maximum rating value
4. ReadOnly:Whether or not the rating can be

changed
5. StarCssClass: CSS class for a visible star
6. WaitingStarCssClass: CSS class for a star in
waiting mode
7. FilledStarCssClass: CSS class for star in filled
mode
8. EmptyStarCssClass: CSS class for a star in
empty mode
9. RatingAlign: Alignment of the stars (Vertical
or Horizontal)
10.
RatingDirection: Orientation of the stars
(LeftToRightTopToBottom or
RightToLeftBottomToTop)
11.
OnChanged: ClientCallBack event to fire
when the rating is changed
12.
Tag: A custom parameter to pass to the
ClientCallBack
ToggleButton Control
ToggleButton is an ASP.NET AJAX extender that can
be attached to an ASP.NET CheckBox control,
enables the use of custom images to show the

state of the CheckBox. Image attached at the place
of CheckBoxes.
Properties
1. TargetControlID: The ID of the CheckBox.
2. ImageHeight\ImageWidth: The height and
width of the image
3. CheckedImageUrl: The URL of the image
when the toggle button is in the checked state.
4. UncheckedImageUrl: The URL of the image
when the toggle button is in the unchecked
state.
5. DisabledCheckedImageUrl: The URL of the
image to show when the toggle button is
disabled and in the checked state.
6. DisabledUncheckedImageUrl: The URL of
the image when the toggle button is disabled
and in the unchecked state.
7. CheckedImageOverUrl: The URL of the
image when the toggle button is in the checked
state and the mouse is over the button.
8. UncheckedImageOverUrl: The URL of the
image when the toggle button is in the
unchecked state and the mouse is over the
button.
9. CheckedImageAlternateText: The alt text

when the toggle button is in the checked state.
10.
UncheckedImageAlternateText: The alt
text when the toggle button is in the
unchecked state.
11.
CheckedImageOverAlternateText: The
alt text to show when the toggle button is in
the checked state and the mouse is over the
button.
12.
UncheckedImageOverAlternateText:
The alt text when the toggle button is in the
unchecked state and the mouse is over the
button.
How to use ToggleButton
Step 1. Add ScriptManager and a two
CheckBox Control from Tool Box. Click on Add
Extender.
Step 2. A new Small window open. Select

ToggleButtonExtender and click on Ok. The
Extender control will be added.
This Step 1 and step 2 again repeat for
Second CheckBox.
Step 3. Add two LinkButton in front of

CheckBoxes and One Label, to show the
information when user action perform. Set
the URL of LinkButtons as your choice.

<%@ Register
TagPrefix="cc1" %>
Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/x
html1-transitional.dtd">
<html
ml">
<title>ToggleButton</title>
</head>
<body>
<form id="ToggleButton"
runat="server">
<div>
<asp:ScriptManager
</div>
<asp:CheckBox ID="CheckBox1"
runat="server"
oncheckedchanged="CheckBox1_Chec
kedChanged" />
<cc1:ToggleButtonExtender
ID="CheckBox1_ToggleButtonExtender
" runat="server"
Enabled="True"
CheckedImageUrl="ToggleButton_Chec
ked.gif"
TargetControlID="CheckBox1"
UncheckedImageUrl="ToggleButton_U
nchecked.gif"
CheckedImageAlternateText="Check"
UncheckedImageAlternateText="Unche
ck"
ImageHeight="20"
ImageWidth="20">
</cc1:ToggleButtonExtender>
<asp:LinkButton ID="LinkButton1"
runat="server" ForeColor="#FF3300"
PostBackUrl="http://www.helloanilyad
av.blogspot.com/">I like Anil
</asp:LinkButton>
<br />
runat="server" />
<cc1:ToggleButtonExtender
ID="CheckBox2_ToggleButtonExtender
" runat="server"
Enabled="True"
TargetControlID="CheckBox2"
CheckedImageUrl="ToggleButton_Chec
ked.gif"
CheckedImageAlternateText="Check"
UncheckedImageAlternateText="Unche
ck"
ImageHeight="20"
ImageWidth="20"
UncheckedImageUrl="ToggleButton_U
nchecked.gif">
</cc1:ToggleButtonExtender>
runat="server"
width: 56px"
Text="Submit" />
<asp:LinkButton ID="LinkButton2"
runat="server" ForeColor="#FF3300"
PostBackUrl="http://www.facebook.co
m/#!/pages/First-GirlFriend/152726921431770"
>I Like FGF</asp:LinkButton>
<p>
</p>
<p>
</p>
</form>
</body>
</html>
On Button Click Code (Default.aspx.cs)
protected void Button1_Click(object
{
Label3.Text= string.Format("You {0}

Like <b>Anil</b> and you {1} like
<b>FGF</b>",
(CheckBox1.Checked ? "do" : "do
not"),(CheckBox2.Checked ? "do" : "do
not"));
}
Step 4. Debug the Application, the web page

show like below.
Check on Images (ChekBoxes). Click the

Submit Button, Message will show like below.
Tabs Control
1.
Tabs Controls creates a set of Tabs that can

be used to organize page content.
2.
A TabContainer is a host for a number of
TabPanel controls.
3.
Each TabPanel defines its HeaderText or

HeaderTemplate as well as a ContentTemplate
that defines its content.
TabContainer Properties
1. ActiveTabChanged (Event): Fired on the

server side.
2. OnClientActiveTabChanged: The name of a
JavaScript function to attach to the client-side
tabChanged event
3. CssClass: A css class override used to define a
custom look and feel for the tabs.
4. ActiveTabIndex: The first tab to show
5. Height: Sets the height of the body of the
tabs but it does not include the TabPanel
headers.
6. Width: Sets the width of the body of the tabs.
7. TabStripPlacement:Whether to render the
tabs on top of the container or below (Top,
Bottom).
TabPanel Properties
1. Enabled: Whether to display the Tab for the
TabPanel by default.
2. OnClientClick:The name of a JavaScript
function to attach to the client-side click event
of the tab.
3. HeaderText: The text to display in the Tab
4. HeaderTemplate
5. ContentTemplate
How to use Tabs Control
Step 1. Drag a ScriptManager and a TabContainer
Control from Ajax Control tab. Add three TabPanels
to the TabContainer and named as Personal
Information, Professional Information and Show
All respectively.
Add Three label and three TextBoxes to the
Personal Information tab.
Add Three label and three TextBoxes to the
Professional Information tab.
Add Six Label and one Button Control to the Show
All tab. Add a UpdatePanel and trigger the Button
control show below figure.
Step 2. Click on properties and select Triggers

Property, a Small window open. Click on Add
Button of this window and Select ControlID then
Press Ok. Button control Trigger to the
UpdatePanel.

<%@ Register
tagprefix="cc1" %>
Transitional//EN"
<html
ml">
.style1 {
width: 100%;
}
</style>
</head>
<body>
<div>
<cc1:ToolkitScriptManager
ID="ToolkitScriptManager1"
runat="server">
</cc1:ToolkitScriptManager>
</div>
<cc1:TabContainer
ID="TabContainer1" runat="server"
ActiveTabIndex="0"
Height="150px" Width="353px"
BackColor="#CC9900"
BorderColor="#CC3300"
BorderStyle="Groove">
<cc1:TabPanel ID="TabPanel1"
runat="server" HeaderText="Personal
Information"
Font-Bold="True">
<ContentTemplate>
<table>
<tr>
<td>
First Name:
</td><td><asp:TextBox
ID="TextBox1"
runat="server"></asp:TextBox></td>
</tr>
<tr>
<td>Second Name:</td>
<td><asp:TextBox ID="TextBox2"
</tr>
<tr>
<td>Age:</td>
</tr>
</table>
</ContentTemplate>
</cc1:TabPanel>
runat="server"
HeaderText="Professional Information"
Font-Bold="True">
<ContentTemplate>
<table>
<tr><td>Company Name:</td>
</tr>
<tr><td>Phone Number:</td>
</tr>
<tr><td>Email ID: </td>
</tr>
</table>
</ContentTemplate>
</cc1:TabPanel>
runat="server" HeaderText="Show All"
BorderColor="#993300" FontBold="True">
<HeaderTemplate> Show
All</HeaderTemplate>
<ContentTemplate>
runat="server" Text="Click To Show
All"
<asp:UpdatePanel
<ContentTemplate>
<table>
<tr><td><asp:Label ID="Label1"
runat="server"
Text=""></asp:Label></td>
</tr>
runat="server"
</tr>
<tr><td> <asp:Label ID="Label3"
runat="server"
</tr>
runat="server"
</tr>
<tr><td> <asp:Label ID="Label5"
runat="server"
</tr>
</table>
</ContentTemplate>
<Triggers>
ControlID="Button1"
EventName="Click" />
</Triggers>
</asp:UpdatePanel>
</ContentTemplate>
</cc1:TabPanel>
</cc1:TabContainer>
</form>
</body>
</html>
On Button Click (Default.aspx.cs) Code
{
Label1.Text = ("Name: " + "" +
TextBox1.Text +
TextBox2.Text).ToString();
Label2.Text = ("Age: " + ""
+TextBox3.Text.ToString());
Label3.Text = ("Your Company
Name: " + "" +
TextBox4.Text).ToString();
Label4.Text = ("Contact No.:" +
"" + TextBox5.Text).ToString();
Label5.Text = ("Email ID:" + ""
+ TextBox6.Text).ToString();
}
Step 3. Debug the Application. Enter Your

Information.
Click on Button, show all information without

full page PostBack.
Slider Control
Slider Control allowed the user to choose a
numeric value from a finite range, min and max
value is created by Developer. The Slider's layout
can be customized to using CSS classes for the
Slider's rail and handle. If handle animation is
enabled, the handle slides to the specified point on
the rail with a nice animation effect. The Slider's
value can be dynamically displayed in another

asp:TextBox or an asp:Label. If a TextBox is used,
the Slider's value can be updated through the
bound TextBox.
Properties
1. Minimum: Minimum value allowed.
2. Maximum: Maximum value allowed.
3. Decimals: Number of decimal digits for the
value.
4. Steps: Number of discrete values inside the
slider's range.
5. Value: Current value of the slider
6. EnableHandleAnimation: Enable/disable the
handle animation.
7. HandleAnimationDuration: Duration of the
handle animation, in milliseconds.
8. RailCssClass: CSS class for the slider's rail.
9. HandleCssClass: CSS class for the slider's
handle.
10.
HandleImageURL: URL of the image to
display as the slider's handle.
11.
Length: Width/height of a
horizontal/vertical slider when the default
layout is used.
12.
BoundControlID: ID of the TextBox or
Label that dynamically displays the slider's
value.
13.
RaiseChangeOnlyOnMouseUp: If true,
fires the change event on the extended
TextBox only when the left mouse button is
released.
How To Use Slider Control
Step 1. Drag ScriptManager and two

TextBoxes from Tool Box.
Step 2. Add Slider Control from AjaxToolKit

and Click on Add Extender..
A new small window open, select

SliderExtender and click on Ok.
After click ok the page view like this. You can

Remove the Extender Control Clicking on
Remove Extender.
Design view of the page

<%@ Register
TagPrefix="cc1" %>
Transitional//EN"
<html
xhtml">
<title>Slider</title>
</head>
<body>
<form id="Slider"
runat="server">
<div>
<asp:ScriptManager
ID="ScriptManager1"
runat="server">
</div>
<cc1:SliderExtender
ID="SliderExtender1"
runat="server"
BoundControlID="TextBox2"
</cc1:SliderExtender>
runat="server"

width:
</form>
</body>
</html>
(BoundControlID="TextBox2"): ID of the
TextBox that dynamically displays the
slider's value.
Step 3. Debug the application
Due to Sliding bar the value be changed in

Second TextBox.
DragPanel Control
The DragPanel extender control provide facility to
drag controls. ASP. Net provide to use "drag
handle", means the control which is draggable. The
user easily drag control around whole web page.
Properties
1. TargetControlID: The ID of a Panel to make
draggable.
2. DragHandleID: The ID of a control, served as

a drag handle for the panel. When the user
clicks and drags this control, the panel will
move.
How To Use DragPanel
Step 1. Drag ScripManager and Panel Control on
the page. Click on Add Extender
A small window Open
Select DragPanelExtender and click on Ok
Step 2. Drag two more Panel. Select one Panel

and copy the Control ID to the DragPanelExtender
Property "DragHandleID="Panel2" ",means this
Panel is the "DragHandle" for the Panel1 which
Drag on the Web Page.
Design Code(Default.aspx)
<%@ Register
namespace="AjaxControlToolki
t"
tagprefix="cc1" %>
Transitional//EN"
"http://www.w3.org/TR/xhtml
1/DTD/xhtml1transitional.dtd">
<html
xmlns="http://www.w3.org/19
99/xhtml">
<title>DragPanel</title>
</head>
<body>
<form id="DragPanel"
runat="server">
<div>
<asp:ScriptManager
ID="ScriptManager1"
runat="server">
</div>
runat="server" Width="250px"
style="z-index: 20;">
<asp:Panel
ID="Panel2"
runat="server"
Width="100%" Height="20px"
BorderStyle="Solid"
BorderWidth="2px"
BorderColor="black">
<div>   &n
bsp;
<font
color="#0066FF"><b>

ASP.Net With
C#</b></font> </div>
</asp:Panel>
<asp:Panel
ID="Panel3" runat="server"
Width="100%"
Height="250px"
Style="overflow:
scroll;" BackColor="#0B3D73"
ForeColor="whitesmoke"
BorderWidth="2px"
BorderColor="black"
<div>
<p>
ASP .NET built on .net
framework. Asp .net is a web
development tool.
Asp .net is offered by
Microsoft.
We can built dynamic
websites by using asp .net.
Asp .net was first
released in January 2002 with
version 1.0 of the .net
framework.
It is the successor of
Microsoft's ASP. .NET
Framework consists of many

class libraries,
support multiple
languages and a common
execution platform. Asp .net is
a program run in
IIS server.
Asp .net is also called
Asp+.
</p>
</div>
</asp:Panel>
</asp:Panel>
<cc1:DragPanelExtender
ID="Panel1_DragPanelExtende
r" runat="server"
DragHandleID="Panel2"
TargetControlID="Panel1" />
<script
type="text/javascript">
function
setBodyHeightToContentHeight
()
{
document.body.style.height
=
Math.max(document.documen
tElement.scrollHeight,
document.body.scrollHeight)
+"px";
}
setBodyHeightToContentHeight
();
</script>
</form>
</body>
</html>
In order to be able to fix the panel on the

web page and stay where you have dropped,
you have to add the JavaScript before the end
of the body tag.
<script type="text/javascript">
function
setBodyHeightToContentHeight()
{
document.body.style.height =
Math.max(document.documentEleme
nt.scrollHeight,
document.body.scrollHeight)
+"px";
}
setBodyHeightToContentHeight();
</script>
The view of the Page When adding Color and
Visualization effect in the Panel like Show in
Design Code.
Step 3. Debug the Application.
You Can Drag and fix Panel anywhere on

Page.
DropDown Control
1.
DropDown is an ASP.NET AJAX extender

that can be attached to almost any ASP.NET
control
2.
It provide a SharePoint-style drop-down
menu, displayed menu is any another panel or
control.
Properties
TargetControlID: The ID of the control which

needs a drop-down.
DropDownControlID: The ID of the control
which will be displayed as the dropdown.
Animations: Generic animations for the
DropDown extender. Animation reference for
more details:
OnShow: The OnShow animation will be
played each time the dropdown is displayed.
OnHide: The OnHide animation will be played
each time the dropdown is hidden.
How to Use DropDownExtender Control

Step 1. Drag ScriptManager and a Label
Control from Tool Box. Click on Add Extender.
A new Small Window Open. Select

DropdownExtender and click on Ok.
Step 2. Drag a ListBox Control, Copy there

ControlID of ListBox and Paste it into
DropDownExtender Property
(DropDownControlID="ListBox1"). ListBox be
show when Click on Extender Control. As
shown in below Fig.
Step 3. Add items in ListBox as Shown in

DesignCode. Drag a UpdatePanel. Select a
Label (Label3) Control in UpdatePanel and
open properties of UpdatePanel.
Click on Triggers and go to Collection, a

window open click on Add button and Select
Control
and Event on which the information show on

Label3.
Step 4. To show Information write in the .CS

Code (Default.aspx.cs) on
ListBox1_SelectedIndexChanged event of
ListBox, due to this when user click on List
Box item, Label3 Show all information.
protected void
ListBox1_SelectedIndexChanged(ob
ject sender, EventArgs e)
{
Label2.Text = TextBox1.Text
+","+" "+ "you selected course "
+ ListBox1.SelectedItem.Text;
}
Now add TextBox and a Label Control on your

page. Design Code of page (Default.aspx).
<%@ Register
tagprefix="cc1" %>
Transitional//EN"
<html
ml">
<title>DropDown</title>
</head>
<body>
<form id="DropDown"
runat="server">
<div>
<asp:ScriptManager
ID="ScriptManager1"
runat="server">
</div>
runat="server" Text="Enter Your
Name: "
FontBold="True"></asp:Label><asp:Text
Box
ID="TextBox1"
<br />
runat="server" Text="Please Select
your course......"
Font-Bold="True" FontNames="Times New Roman"
ForeColor="#993300"
TabIndex="1"></asp:Label>
<asp:ListBox ID="ListBox1"
runat="server" AutoPostBack="True"
onselectedindexchanged="ListBox1_S
electedIndexChanged"
ontextchanged="ListBox1_TextChang
ed" Font-Bold="False">
<asp:ListItem>C# with .Net
Framework</asp:ListItem>
<asp:ListItem>Java</asp:ListItem>
<asp:ListItem>ASP.Net with
C#</asp:ListItem>
<asp:ListItem>Networking</asp:ListI
tem>
</asp:ListBox>
<cc1:DropDownExtender
ID="Label1_DropDownExtender"
runat="server"
DropArrowBackColor="AliceBlue"
DropDownControlID="ListBox1"
DynamicServicePath=""
Enabled="True"
TargetControlID="Label1">
</cc1:DropDownExtender>
<p>
</p>
<asp:UpdatePanel
<ContentTemplate>
runat="server" FontBold="False"></asp:Label>
</ContentTemplate>
<Triggers>
ControlID="ListBox1"
EventName="SelectedIndexChanged"
/>
</Triggers>
</asp:UpdatePanel>
</form>
</body>
</html>
The Design view of your Application is the
Step 5. Debug the Application. Enter name

and select Course.
CollapsiblePanel Control
1.
The CollapsiblePanel is a very flexible

extender for any Web page.
2.
Its allows, to easily add sections on your
web page, which you want to make Collapsible.
3.
This extender targets any ASP.NET Panel

control.
4.
Which Control is Expandable for the page

and which part make collapsible for the page
its totally depend on the developer.
Properties
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.
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:
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.
CollapsedText: The text to show in the
control specified by TextLabelID when the
panel is collapsed.
ExpandedText: The text to show in the
control specified by TextLabelID when the
panel is opened.
ImageControlID: The ID of an Image control
where an icon indicating the collapsed status of
the panel will be placed.
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.
How to Use CollapsiblePanel Control

Step 1. In this Example, we add two
CollapsiblePanelExtender Control. First is for the
entering Information and second is the Showing
Information, which entered by the user.
First drag a ScriptManager. Add two Panel for
Entering Information CollapsiblePanelExtender ,
thease step are showing in fig.
Click on Add Extender, A new window is Open
Click on ok.
Step 2. Copy the Control ID of the panel which
you want to Collapsed and paste this ID in
property, CollapseControlID="Panel2", of
CollapsePanelExtender Control. Add two label in
this Panel and make one label to its Text label, for
this copy the Label ID and paste it to the property
of (TextLabelID="Label5") CollapsePanelExtender
Control. Add four Label and four TextBoxes to the
Second Panel.
Step 3. For Second CollapsePanel (Personal
Information) Step2 repeated, For more help see
Design Code (Default.aspx).
Add a Button Control to submit Information.

<%@ Register
TagPrefix="cc1" %>
Transitional//EN"
<html
ml">
<title>CollapsiblePanel</title>
</head>
<body>
<form id="CollapsiblePanel"
runat="server">
<div>
<asp:ScriptManager
ID="ScriptManager1"
runat="server">
</div>
//For Enter Information Panel
runat="server" BorderColor="Black"
BorderWidth="2px"
BackColor="#CCCCCC"
Width="300px">
<table><tr>
<td><asp:Label ID="Label6"
runat="server" Text="Enter
Information"
FontBold="True"></asp:Label></td>
runat="server"
Text="Label"></asp:Label></td>
</tr></table>
</asp:Panel><asp:Button
ID="Button1" runat="server"
Text="Submit"
width: 86px" />
runat="server"
BackColor="#00CC99"
Width="300px">
<table>
<tr>
<td>
runat="server" Text="Name:
"></asp:Label></td><td>
runat="server"></asp:TextBox></td
>
</tr>
<tr><td>
runat="server" Text="Phone
No. :"></asp:Label></td>
<td>
></tr>
<tr><td>
runat="server" Text="Company
Name: ">
</asp:Label></td><td>
<asp:TextBox
ID="TextBox4"
>
</tr>
<tr><td>
runat="server" Text="Address:
"></asp:Label>
</td><td>
<asp:TextBox
ID="TextBox2" runat="server"
TextMode="MultiLine">
</asp:TextBox></td>
</tr>
</table>
</asp:Panel>
................/////
//For Personal information
runat="server" BorderColor="Black"
BorderWidth="2px"
BackColor="#CCCCCC"
Width="300px">
<table><tr>
runat="server" Text="Personel
Information"
FontBold="True"></asp:Label></td>
runat="server"
Text="Label"></asp:Label></td>
</tr></table>
</asp:Panel>
BackColor="#CCCC00">
<table>
<tr>
<td>
runat="server"
Text=""></asp:Label></td><td>
</td>
</tr>
<tr><td>
runat="server"
<td>
</td></tr>
<tr><td>
runat="server" Text="">
</td>
</tr>
<tr><td>
runat="server"
Text=""></asp:Label>
</td><td>
</td>
</tr>
</table>
</asp:Panel>
...........//////
//Extender Control(Personal
Information)
<cc1:CollapsiblePanelExtender
ID="Panel4_CollapsiblePanelExtender
"
runat="server" Enabled="True"
TargetControlID="Panel4"
ExpandControlID="Panel1"
TextLabelID="Label8"
CollapseControlID="Panel1"
CollapsedText="(Show
Information..)"
ExpandedText="(Hide
Information..)" Collapsed="True">
</cc1:CollapsiblePanelExtender>
......////
//Extender Control(Enter
Information)
<cc1:CollapsiblePanelExtender
ID="Panel1_CollapsiblePanelExtender
"
CollapseControlID="Panel2"
ExpandControlID="Panel2"
TextLabelID="Label5"
CollapsedText="(Show Panel..)"
ExpandedText="(Hide Panel..)">
</cc1:CollapsiblePanelExtender>
...../////
</form>
</body>
</html>
On click event of button (Default.aspx.cs)
{
Label9.Text = "Hello!!!" + " "
+ TextBox1.Text.ToString();
Label10.Text = "Your Phone
Number:" + " " +
Label11.Text = "Company
Name:" + " " +
Label12.Text = "Address:" + "
" + TextBox2.Text.ToString();
}
The Design View of Page
Step 4. Debug the Application. Click on the

Enter Information bar you make Hide Panel
and Show panel.
Click on Submit Button, only Personal

Information bar shown.
Click on Bar Show Infomation
If you want to hide

the Information, Click on Bar.
DropShadow Control
DropShadow is an extender control which applies a
"Drop Shadow" to a Panel on basis of Opacity, that
can be changed using opacity property of Extender
Control. If you would like rounded corners for the
Panel you can use Rounded property and set
Radius on the basis of Requirement.
Properties
TargetControlID: The ID of the Control for

this extender to operate on
Width: The width, in pixels of the drop
shadow. Default value is 5.
Opacity: The opacity of the drop shadow, from
0 (fully transparent) to 1.0 (fully opaque). The
default value is .5.
TrackPosition: Whether the drop shadow

should track the position of the panel.
Rounded: Set to true to set rounded corners
on the target and the shadow. Default is false.
How to use Application

Step 1. Drag ScriptManager and Panel on your
Page.
Click on Add Extender
A new small window open. Click on Ok.
To show properties of Extender Control click

on properties.
Step 2. Add two CheckBox to show extender

property of Rounded and Show Shadow.
Design Code (default.aspx)

<%@ Register
tagprefix="cc1" %>
Transitional//EN"
<html
ml">
<title>DropShadow</title>
</head>
<body>
<form id="DropShadow"
runat="server">
<div>
<asp:ScriptManager
</div>
runat="server" BackColor="Gray"
Width="300px">
<table><tr><td>
runat="server" Text="Name:
"></asp:Label>
</td><td>
<asp:TextBox
ID="TextBox1"
</tr>
<tr><td>
runat="server" Text="Company name:
">
<asp:TextBox
ID="TextBox2"
</tr>
</table>
</asp:Panel>
<table><tr><td>Show
Shadow:</td><td>
runat="server" AutoPostBack="True"
kedChanged" /></td></tr><tr>
<td>Rounded:</td><td>
<asp:CheckBox
ID="CheckBox2" runat="server"
AutoPostBack="True"
kedChanged" /></td></tr></table>
<cc1:DropShadowExtender
ID="Panel1_DropShadowExtender"
runat="server"
Enabled="True"
Opacity="0">
</cc1:DropShadowExtender>
</form>
</body>
</html>
When Checked Chekboxes, Properties are

changed. The .cs Code (Default.aspx.cs)
protected void
CheckBox1_CheckedChanged(object
{
if (CheckBox1.Checked)
{ Panel1_DropShadowExtender.Opacity
= 5; }
else
{ Panel1_DropShadowExtender.Opacity
= 0; }
}
protected void
CheckBox2_CheckedChanged(object
{
if (CheckBox2.Checked)
{ Panel1_DropShadowExtender.Rounde
d = true; }
else
{ Panel1_DropShadowExtender.Rounde
d = false; }
}]
Step 3. Debug the Application. The output be

the
Click on CheckBox (Show Shadow)
Click on CheckBox (Rounded)
FilteredTextBox Control
FilteredTextBox is an extender control, which
prevents the user to entering invalid characters
into a text box on the developer choice. This
Control is useful when you want to validate control
data without uses validation control.
Properties
TargetControlID: The ID of the text box for

this extender to operate on.
FilterType: A the type of filter which you want
to apply, as a combination of Special
Characters and other symbols. In Additional
LowercaseLetters, UppercaseLetters, and
Custom. If you selected Custom then valid
characters specified.
FilterMode: On which Property you validated

the filter, means its on Valid character or
Invalid character .
ValidChars: A string consisting of all
characters considered valid for the text field, if
"Custom" is specified as the filter type.
Otherwise this parameter is ignored.
InvalidChars: A string consisting of all
characters considered invalid for the text field,
if "Custom" is specified as the filter type and
"InvalidChars" as the filter mode. Otherwise
this parameter is ignored.
FilterInterval: An integer containing the
interval (in milliseconds) in which the field's
contents are filtered, defaults to 250.
How to use FilteredTextBox Control

Step 1. Drag ScripManager and Five
TextBoxes and labels to show different
property of FilteredTextBox control.
Step 2. Click on Add Extender, A window be

Open. Select FilterTextBoxExtender and press
Ok.
Repeat step1 and step2 for other TextBoxes.

Property be change on the basis of your
requirement for each TextBox. For More help
see Design code.

<%@ Register
tagprefix="cc1" %>

Transitional//EN"
<html
ml">
</head>
<body>
<div>
<asp:ScriptManager
ID="ScriptManager1"
runat="server">
</div>
<table><tr><td>
runat="server" Text="Only numbers:
">
<cc1:FilteredTextBoxExtender
ID="TextBox1_FilteredTextBoxExtend
er"
runat="server"
Enabled="True"
FilterType="Numbers"
</cc1:FilteredTextBoxExtender>
</td></tr>
<tr><td>
runat="server" Text="Lower Case
Characters: ">
er"
runat="server"
Enabled="True"
FilterType="LowercaseLetters"
</td></tr>
<tr><td>
runat="server" Text="Upper Case
Characters: ">
er"
runat="server"
Enabled="True"
FilterType="UppercaseLetters"
</td></tr>
<tr><td>
runat="server" Text="No Digit:
"></asp:Label></td>
<td>
er"
runat="server"
Enabled="True"
FilterMode="InvalidChars"
InvalidChars="1234567890"
</td></tr>
<tr><td>
runat="server" Text="Only Maths
Symbol: ">
er"
runat="server"
Enabled="True"
ValidChars="+-*/.">
</td></tr>
</table>
</form>
</body>
</html>
Step 3. Debug the Application
RoundedCorners Control
The RoundedCorners extender applies rounded
corners to existing elements. It is a simple control
in use and make your application attractive. Here
you can choose the corners as your choice from
property of Extender Control, None, TopLeft,
TopRight, BottomRight, BottomLeft, Top, Right,
Bottom, Left with there Radius ( it is also a
property of Extender control).
Properties
TargetControlID: The ID of the button or link

for this extender to operate on
Radius: Default is 5, the radius of the corners
Corners: The corners of the target panel that
will be rounded (can be None, TopLeft,
TopRight, BottomRight, BottomLeft, Top, Right,
Bottom, Left, or All)
How to use RoundedCorners Controls

Step 1. Drag ScriptManager and a Panel
Control on your page. Click on Add Extender.
A new window open, click on

RoundedCornersExtender Control then click
Ok.
Step 2. You can Change properties as your

requirements. you can change color , Which
corner you want to round and radius of the

corners, Border color.

<%@ Register
tagprefix="cc1" %>
Transitional//EN"
<html
html">
.style1
{
text-align: center;
}
.style2
{
text-align: justify;
}
</style>
</head>
<body>
<form id="form1"
runat="server">
<div>
<asp:ScriptManager
ID="ScriptManager1"
runat="server">
</div>
runat="server" BackColor="Silver"
BorderColor="Black"
Font-Bold="True" FontSize="X-Large" Width="300px">
<div class="style1">
ASP.Net Ajax</div>
<div class="style2"
style="font-family: 'Times
New Roman', Times, serif; fontsize: medium;
font-weight: normal;
font-style: normal; backgroundcolor: #6666FF;">
Ajax (Asynchronous
JavaScript and XML) is a new
paradigm introduced in 2005. To
use Ajax, able to trade
data, with a web server, without
having to load a new
page. The purpose of
Ajax is that of giving the illusion
that websites are
responsive. It achieves
this by processing requests which
involve the sending

and receiving of small
packets of data without refreshing
the web browser. Ajax
is a technique for
creating fast and dynamic web
pages. In other words, Ajax
allows web pages to be
updated asynchronously by
exchanging small amounts of
data with the server
behind the scenes. This means that
it is possible to update
parts of a web page,
without reloading the whole
page.</div>
</asp:Panel>
<cc1:RoundedCornersExtender
ID="Panel1_RoundedCornersExten
der" runat="server"
Enabled="True"
TargetControlID="Panel1">
</cc1:RoundedCornersExtender>
</form>
</body>
</html>
ResizableControl
ResizableControl is an extender that attaches to
any control or page element on a web page and
allowed the user to resize that control. This control
provide a handle, that attached to lower-right
corner of the control. from that image user resized
the image on web page. this handle image action
perform by the CSS code.
Properties
TargetControlID: ID of the control that will

server as the resizable control.
MinimumWidth: Minimum width for the
control that is attached to the Extender
control.
MinimumHeight: Minimum height for the
control that is attached to the Extender
control.
MaximumWidth: Maximum resizable width
allowed for the control.
MaximumHeight: Maximum resizable height
allowed for the control.
HandleCssClass: It displays the image at the
bottom-left side of the attached control that
handles the resizing behavior. CSS class name
to apply the style on resizable Handle.
ResizableCssClass: CSS class name to apply
the style on control when you performed the
resize action.
HandleOffsetX: Horizontal offset for the
resizable handle.
HandleOffsetY: Vertical offset for the
resizable handle.
onClientResizeBegin: client side event fires
when the attached control starts resize action.
onClientResizing: When the attached control

is being resized, client side event fires.
onClientResize: When the attached control
has been resized client side event fires.
How to use ResizableControl

Step 1. Drag ScriptManager and a Panel Control
from Tool box. click on Add Extender.
A new window Open. Click on

ResizableControlExtender and click on Ok, control
be added.
Step 2. Change property of Panel according to

your choice.
Step 3. Set the Property of Extender control and

add Property HandleCssClass to show the Handle,
from where user resize the control. The CSS Code
given Below.
<style
type="text/css">
.handle
{
width:16px;
height:16px;
background-
image:url(images/Han
dleGrip.png);
overflow:hidden;
cursor:se-resize;
}
A small JavaScript code to Show control Size
in a Alert box, when user perform resizable
operation for the control. This Method call on
the Property onClientResize.
function onResize(sender,
eventArgs)
{
var e =
sender.get_element();
alert("Current height and
width of Resizable
Panel:\n\nwidth: "
+ e.scrollWidth + ", height: " +
e.scrollHeight);
}
</script>
Other property of extender Control you can change
according to your choice show below.
Step 4. Drag a button Control on your page to

reset the control property, and paste the code
given below (Default.aspx.cs)
protected void
EventArgs e)
{
System.Drawing.Size s =
Panel1_ResizableControlExtender.Si
ze;
Panel1_ResizableControlExtender.Si
ze = new
System.Drawing.Size(s.Width=150,
s.Height=150);
}
The Design Code of Page (Default.aspx). This make

better help to you understand.
<%@ Register
tagprefix="cc1" %>
Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD
/xhtml1-transitional.dtd">
<html
html">
<title>ResizableControl </title>
</head>
<body>
<form id="ResizableControl"
runat="server">
<div>
<asp:ScriptManager
ID="ScriptManager1"
runat="server">
</div>
runat="server"
BackColor="#CCCC00"
Height="150px"
Width="150px">
<b style="font-family: 'Times
New Roman', Times, serif; font-size:
xx-large; font-weight: bold;
font-style: normal; color: #800000;
text-align: center;">
AJAX</b>
</asp:Panel>
<cc1:ResizableControlExtender
ID="Panel1_ResizableControlExtend
er"
runat="server"
MinimumHeight="50"
MinimumWidth="50"
MaximumHeight="400"
MaximumWidth="400"
HandleCssClass="handle"
OnClientResize="onResize"
TargetControlID="Panel1">
</cc1:ResizableControlExtender>
.handle
{
width:16px;
height:16px;
backgroundimage:url(images/HandleGrip.png);
overflow:hidden;
cursor:se-resize;
}
</style>
function onResize(sender,
eventArgs)
{
var e = sender.get_element();
alert("Current height and width of
Resizable Panel:\n\nwidth: "
+ e.scrollWidth + ", height: " +
e.scrollHeight);
}
</script>
runat="server"
Text="Reset" />
</form>
</body>
</html>

PopupControl
1.
PopupControl is an ASP.NET AJAX extender

that can be attached to any control and
provide to open popup content when action
perform on the control. One control added with
the property TargetControlID and popup
control added with the property
PopupControlID.
2.
This popup window normaly activated
inside ASP.NET AJAX UpdatePanel, so it will
show partial page postback.
3.
Popup window can contain any content,

including ASP.NET server controls, HTML
elements, etc.
Properties
TargetControlID: The ID of the control to

which attach Extender Control.
PopupControlID: The ID of the popup control
to display.
Position: Optional setting specifying where
the popup should be positioned. (Left, Right,
Top, Bottom, Center)
CommitProperty: Optional setting specifying

the property on the control being extended
that should be set with the result of the popup.
CommitScript: Optional setting specifying
additional script.
OffsetX/OffsetY: The number of pixels to
offset the Popup from its default position, as
specified by Position.
PopupControlExtender.
played each time the popup is displayed. The
popup will be positioned correctly but hidden.
The animation can use <HideAction
Visible="true" /> to display the popup along
with any other visual effects.
each time the popup is hidden.
How to use Popup Control

Step 1. Drag ScriptManager and a TxetBox
Control on your page.
Click on Add Extender... , a small window

open, select PopupControlEtender and Click
on Ok.
Step 2. Drag a Panel control ( and add a

RadioButtonList Control in this Panel) inside
the UpdatePanel. Paste the ControlID of
Panel to the Property PoppupControlID of
Extender Control, means when click on text

box the Panel show with RadioButtonList.
Step 3. Drag a button control and a label

control inside the another UpdatePanel and
trigger the Button control to the UpdatePanel
on the Event Name Click show in fig.
Step 4. View of your page when adding all

Control.

<%@ Register
tagprefix="cc1" %>
Transitional//EN"
<html
ml">
<title>PopupControl</title>
</head>
<body>
<form id="PopupControl"
runat="server">
<div>
<asp:ScriptManager
ID="ScriptManager1"
runat="server">
</div>
<cc1:PopupControlExtender
ID="TextBox1_PopupControlExtender"
runat="server"
DynamicServicePath=""
Enabled="True" ExtenderControlID=""
PopupControlID="Panel1">
</cc1:PopupControlExtender>
<b>Information About:
</b><asp:TextBox ID="TextBox1"
runat="server"
BackColor="#CCCCCC" FontBold="True" Height="28px"
Width="312px">
</asp:TextBox>
runat="server"
BackColor="#CCCCCC"
Height="150px"
Width="100px">
<asp:UpdatePanel
<ContentTemplate>
<asp:RadioButtonList
ID="RadioButtonList1" runat="server"
onselectedindexchanged="RadioButto
nList1_SelectedIndexChanged"
AutoPostBack="True">
<asp:ListItem
Value="Object Oriented Programming
Language">
Java</asp:ListItem>
<asp:ListItem Value="Web
Development Technology">
ASP.Net</asp:ListItem>
<asp:ListItem
Value="System Application
Programming">C</asp:ListItem>
<asp:ListItem
Value="Object Oriented
Programming">C++</asp:ListItem>
<asp:ListItem
Value="Nothing">No
choice</asp:ListItem>
</asp:RadioButtonList>
</ContentTemplate>
</asp:UpdatePanel>
</asp:Panel>
<asp:UpdatePanel
ID="UpdatePanel2"
runat="server"><ContentTemplate>
runat="server"
ForeColor="#993300"></asp:Label>
</ContentTemplate>
<Triggers>
ControlID="Button1"
</Triggers>
</asp:UpdatePanel>
runat="server"
Text="Show Information"
width: 117px" />
</form>
</body>
</html>
Click on RadioButtonList control, the selected

item show in a Text Box (Default.aspx.cs)
protected void
RadioButtonList1_SelectedIndexChanged(
object sender, EventArgs e)
{
if (!
string.IsNullOrEmpty(RadioButtonList1.Se
lectedValue))
{ TextBox1_PopupControlExtender.Commi
t(RadioButtonList1.SelectedValue); }
else
{ TextBox1_PopupControlExtender.Cancel
(); }
RadioButtonList1.ClearSelection();
}
On Button Click to show all Information
{
Label1.Text = "You Select a " +
TextBox1.Text.ToString() +
" at the time" +
DateTime.Now.ToLongTimeString();
}
Step 5. Debug the Application. Select one

Item.
Select ASP. Net
Click on Show Information
ListSearchExtender Control
The ListSearchExtender provide facility to search
items in a ListBox or DropDownList by typing a
word or phrase word. This control performs an
incremental search within the ListBox. The prompt
message is displayed when you click the list, that
can changed along with its CSS class and position.
Properties
PromptText: Default is 'Type to search' is

display when the ListBox or DropDownList is
given focus. The PromptText is replaced by the
search text typed by the user.
PromptCssClass: The name of the CSS class
to apply to the prompt message.
PromptPosition: Indicates whether the
message should appear at the Top or Bottom
of the ListBox. The default is Top.
QueryPattern: Indicates how the typed

characters should be used in the search query.
IsSorted: Indicates if items added to the List
are expected to be sorted. The default is false.
If set to true it allows the code to perform a
faster search instead of having to determine
the same before performing the search.
QueryTimeout: Indicates whether the search
query should be reset after the timeout if no
match is found. The default is 0, meaning no
auto reset behavior.
ListSearch extender.
played each time the extender's prompt is
displayed. The prompt will be positioned
correctly but hidden. The animation can use
<HideAction Visible="true" /> to display the
prompt along with any other visual effects.
each time the extender's prompt is hidden.
How to use ListSearchExtender Control

Step 1. Drag ScriptManager and a ListBox
control on your page. Click on Add Extender...
Small window open, select

ListSearchExtender and press Ok.
Step 2. Design Code (Default.aspx)

<%@ Register
tagprefix="cc1" %>
Transitional//EN"
<html
html">
<title>ListSearchExtender</title>
</head>
<body>
<form id="ListSearchExtender"
runat="server">
<div>
<asp:ScriptManager
ID="ScriptManager1"
runat="server">
</div>
<asp:ListBox ID="ListBox1"
runat="server"
position:
absolute; height: 70px;
width: 78px">
</asp:ListBox>
<cc1:ListSearchExtender
ID="ListBox1_ListSearchExtender"
runat="server"
Enabled="True"
IsSorted="True"
PromptCssClass=""
PromptText="Type to
search.."
TargetControlID="ListBox1">
</cc1:ListSearchExtender>
</form>
</body>
</html>
To show and search data in ListBox make a

method ItemList() and call this onLoad()
method when any event fired.
CS Code (Default.aspx.cs)
protected override void
OnLoad(EventArgs e)
{
base.OnLoad(e);
ListBox1.DataSource = ItemList();
ListBox1.DataBind();
}
private static string[] wordListText;
public string[] ItemList()
{
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", "Xray","Xray","Yankee","Zulu",
"Zero", "Nadazero", "One",
"Unaone","Two", "Bissotwo",
"Three","Terrathree",
"Four","Kartefour","Five","Pantafive","Six
", "Soxisix","Setteseven","Eight",
"Oktoeight", "Nine","Novenine"
};
Array.Sort(tempWordListText);
wordListText =
tempWordListText;
}
return wordListText;
}
Step 3.Debug the Application without using

CSS (PromptCssClass=""), property has no
css class Output will be
Type a word, which you want to search
Step 4. If you want to change the look of

entering text (Type to search) then add CSS
(written this code and Paste the Class name
in the Property
(PromptCssClass="ListSearchExtender") of
Extender Control).
.ListSearchExtender
{
font-style:italic;
color:Gray;
background-color:white;
}
</style>
Debug The Application. The Enter Text (Type

to search) view changed.
Click on Ok and resized the Panel. The alert

box show the current size of the Panel.
Clicking on Reset Button to reset the Panel

size.
MaskedEdit Control
MaskedEdit is an ASP.NET AJAX extender that
attaches to a TextBox control to make restriction
on user inputted text. MaskedEdit applies a "mask"
to the input that permits only certain types of
characters/text to be entered. Formats are:
Number, Date, Time, and DateTime. MaskedEdit
uses the culture settings specified in the
CultureName property.
MaskedEdit Properties
MaskType: Type of validation to perform:

None - No validation
Number - Number validation
Date - Date validation
Time - Time validation
DateTime - Date and time validation
AcceptAMPM: True to display an AM/PM
symbol
AcceptNegative: True if the negative sign (-)
is allowed
None - Do not show the negative sign
Left - Show the negative sign on the left of
the mask
Right - Show the negative sign on the right
of the mask
AutoComplete: True to automatically fill in
empty mask characters not specified by the
user
MaskType=Number - Empty mask
characters will be filled with zeros
MaskType=Time - Empty mask characters
will be filled with the current time
MaskType=Date - Empty mask characters
will be filled with the current date
MaskType=DateTime - Empty mask
characters will be filled with the current
date/time
AutoCompleteValue: Default character to use

when AutoComplete is enabled
Century - Default century used when a date
mask only has two digits for the year
ClearMaskOnLostFocus: True to remove the
mask when the TextBox loses focus
ClearTextOnInvalid: True to clear the
TextBox when invalid text is entered
ClipboardEnabled: True to allow copy/paste
with the clipboard
ClipboardText: Prompt text to use when a
clipboard paste is performed
DisplayMoney: Specifies how the currency
symbol is displayed
None - Do not show the currency symbol
Left - Show the currency symbol on the left
of the mask
Right - Show the currency symbol on the
right of the mask
ErrorTooltipCssClass: CSS class for the
tooltip message
ErrorTooltipEnabled: True to show a tooltip
message when the mouse hovers over an
invalid TextBox
Filtered: Valid characters for mask type "C"

(case-sensitive)
InputDirection: Text input direction
LeftToRight - Left to Right
RightToLeft - Right to left
MessageValidatorTip: Message displayed
when editing in TextBox
PromptChararacter: Prompt character for
unspecified mask characters
UserDateFormat: Custom date format
UserTimeFormat: Custom time format
OnFocusCssClass: CSS class used when the

TextBox receives focus
OnFocusCssNegative: CSS class used when
the TextBox gets focus with a negative value
OnBlurCssNegative: CSS class used when
the TextBox loses focus with a negative value
OnInvalidCssClass: CSS class used when the
text is not valid.
CultureName: Name of culture to use
(overrides the default page culture)
CultureAMPMPlaceholder: Culture override
CultureCurrencySymbolPlaceholder:
Culture override
CultureDateFormat: Culture override
CultureDatePlaceholder: Culture override
CultureDecimalPlaceholder: Culture
override
CultureThousandsPlaceholder: Culture
override
CultureTimePlaceholder: Culture override
MaskedEditValidator Properties
ControlToValidate: ID of the TextBox to

validate
ControlExtender: ID of the
MaskedEditExtender attached to the TextBox
AcceptAMPM: Whether or not AM/PM is
accepted on times. The default value is false.
ClientValidationFunction: Client script used
for custom validation
InitialValue: Initial value of the TextBox
IsValidEmpty: True if the TextBox can be
empty
MaximumValue: Maximum value of the input
MinimumValue: Minimum value of the input
ValidationExpression: Regular expression

used to validate the input
TooltipMessage: Message displayed when the
TextBox has focus with an empty value
EmptyValueMessage: Message displayed
when empty and TextBox has focus
EmptyValueBlurredText: Message displayed
when empty and TextBox does not have focus
InvalidValueMessage: Message displayed
when invalid and TextBox has focus
InvalidValueBlurredMessage: Message
displayed when invalid and TextBox does not
have focus
MaximumValueMessage: Message displayed
when maximum value exceeded and TextBox
has focus
MaximumValueBlurredMessage: Message
displayed when maximum value exceeded and
TextBox does not have focus
MinimumValueMessage: Message displayed
when minimum value exceeded and TextBox
has focus
MinimumValueBlurredText: Message
displayed when minimum value exceeded and
TextBox does not have focus

How to use MaskedEdit Control
Step 1. Drag ScriptManager and a TextBox
Control.
Click on Add Extender, small window open. Select

MaskEditExtender and click on Ok. Control is
Added.
Step 2. This Textbox is masked only for the

entering Numbers, range of the number is set with
the help of properties. The property window given
below.
Property After Changing on basis of your
choice
Step 3. Add a MaskedEditValidator to validate

TextBox Control.
Go to the Property of ValidatorControl and set the

property, which type you validate like show in fig.
ValidatorCallout Control
ValidatorCallout is an ASP.NET AJAX extender that
enhances the functionality of existing ASP.NET
validators.To use this control, add Validator control
to the normal control which you validate and then
add validatorCollout to the Validator Control..
Properties
TargetControlID: The ID of the Validator to
extend
Width: The width of the callout
CssClass: Name of the CSS class used to style

the ValidatorCallout. See the ValidatorCallout
Theming section for more information.
HighlightCssClass: A CssClass to apply to the
invalid field
WarningIconImageUrl: The path to a
custom warning icon image
CloseImageUrl: The path to a custom close

image
ValidatorCallout extender. See the Using
Animations walkthrough and Animation
Reference for more details.
How to use ValidatorCallout Control

Step 1.Add ScriptManager and TextBoxes on your
page.
Step 2.Add ValidatorControl from your Tool Box,
which type you want to use on the particular text
boxes
Click on Add Extender, a new window open. Select

ValidaterCalloutExtender and click on Ok
Step 3. Step2 repeated for all validator controls

which you used in your application. Set there
Property as your requirements like show in fig. for
a selected ValidatorControl.
Step 4. The Design Code (default.aspx)

<%@ Register
TagPrefix="cc1" %>
Transitional//EN"
<html
ml">
<title>ValidatorCallout</title></head
><body>
<form id="ValidatorCallout"
runat="server"><div>
<asp:ScriptManager
</asp:ScriptManager></div>
<table><tr><td>Enter your Name:
</td>
runat="server" TabIndex="1"
BackColor="Silver"></asp:TextBox>
</td></tr><tr> <td>Passward:
</td><td>
<asp:TextBox
TabIndex="2"
TextMode="Password"
BackColor="Silver"></asp:TextBox><
/td></tr>
<tr><td>Retype Passward:
</td><td>
<asp:TextBox
TabIndex="3"
TextMode="Password"
BackColor="Silver">
</asp:TextBox></td></tr></table>
<asp:RequiredFieldValidator
ID="RequiredFieldValidator1"
runat="server"
ControlToValidate="TextBox1"
ErrorMessage="<b>Field
Missing</b><br/>
Name is Required"
Display="None"></asp:RequiredFieldV
alidator>
<cc1:ValidatorCalloutExtender
ID="ValidatorCalloutExtender1"
runat="server"
TargetControlID="RequiredFieldValidat
or1">
</cc1:ValidatorCalloutExtender>
runat="server"
Missing</b><br/>Name is Required"
Display="None">
</asp:RequiredFieldValidator>
runat="server"
or2">
runat="server"
Missing</b><br/>
Name is Required"
Display="None"></asp:RequiredFieldV
alidator>
runat="server"
or3">
<asp:CompareValidator
ID="CompareValidator1"
runat="server"
ErrorMessage="<b>Password
Not Match</b><br/>Enter Same

Password"
ControlToCompare="TextBox2"
Display="None"></asp:CompareValid
ator>
runat="server"
TargetControlID="CompareValidator1"
>
runat="server" Text="Submit"
<asp:UpdatePanel
<ContentTemplate><asp:Label
ID="Label1" runat="server" FontBold="True"
ForeColor="#993300"></asp:Label><
/ContentTemplate><Triggers>
ControlID="Button1"
</Triggers></asp:UpdatePanel></for
m></body></html>
Design View
On button Click (Default.aspx.cs)

{
Label1.Text =
String.Format("Hello!! {0},your
Passward is {1}",
TextBox1.Text,TextBox2.Text);
}
Step 5.Debug the Application

Value compulsory
Password Not Match
Input Correct Information
PasswordStrength Control
1.
PasswordStrength is an ASP.NET AJAX

extender that can be attached to an ASP.NET
TextBox control used for the entry of
passwords.
2.
The PasswordStrength extender shows the

strength of the password in the TextBox and
updates itself as the user types the password.
3.
The indicator can display the strength of

the password as a text message or with a
progress bar indicator.
Properties
TargetControlID: ID of the TextBox, which
you add extender control
DisplayPosition: Positioning of the strength
indicator relative to the target control
StrengthIndicatorType: Strength indicator

type (Text or BarIndicator)
PreferredPasswordLength: Preferred length
of the password
PrefixText: Text prefixed to the display text
when StrengthIndicatorType=Text
TextCssClass: CSS class applied to the text
display when StrengthIndicatorType=Text
MinimumNumericCharacters: Minimum
number of numeric characters
MinimumSymbolCharacters: Minimum
number of symbol characters (ex: $ ^ *)
RequiresUpperAndLowerCaseCharacters:
Specifies whether mixed case characters are
required
MinimumLowerCaseCharacters: Only in
effect if
RequiresUpperAndLowerCaseCharacters
property is true
MinimumUpperCaseCharacters: Only in
effect if
RequiresUpperAndLowerCaseCharacters
property is true
TextStrengthDescriptions: List of semi-colon
separated descriptions used when
StrengthIndicatorType=Text (Minimum of 2,
maximum of 10; order is weakest to strongest)
BarBorderCssClass: CSS class applied to the
bar indicator's border when
StrengthIndicatorType=BarIndicator
BarIndicatorCssClass: CSS class applied to
the bar indicator's inner bar when
StrengthIndicatorType=BarIndicator
HelpStatusLabelID: Control ID of the label
used to display help text
HelpHandleCssClass: CSS class applied to
the help element used to display a dialog box
describing the password requirements
HelpHandlePosition: Positioning of the help

handle element relative to the target control
How to Use PasswordStrength Control
Step 1. Drag ScriptManager and a TextBox control

on your page
Click on Add extender, a new window open. Select

PassWordStrength and click on Ok
Step 2. Drag a label to show help text and pass

the ID of Label Control to the property of extender
control (HelpStatusLabelID) and set other property

like show in fig.

<%@ Register
tagprefix="cc1" %>
Transitional//EN"
<html
html">
<title>PasswordStrength</title>
</head><body><form
id="PasswordStrength"
<asp:ScriptManager
ID="ScriptManager1"
runat="server">
<table><tr><td><asp:TextBox
MaxLength="10"
TextMode="Password"></asp:TextB
ox>
</td></tr><tr><td><asp:Label
ID="Label1"
</td></tr></table><cc1:Password
Strength
ID="TextBox1_PasswordStrength"
HelpStatusLabelID="Label1"
PreferredPasswordLength="10"
TextStrengthDescriptions="Very
Poor;Weak;Average;Strong;Excelle
nt"
MinimumSymbolCharacters="1">
</cc1:PasswordStrength></form>
</body></html>
Step 4. If you want to view messages on your

cursor then add these CSS classes to your
application.
.MaskedEditFocus
{ background-color: #ffffcc;
color: #000000;}
.MaskedEditError
{background-color: #ffcccc;}
.MaskedEditFocusNegative
{ background-color: #ffffcc;
color: #ff0000;}
.MaskedEditBlurNegative
{color: #ff0000;}</style>
Design code (Default.aspx)
<%@ Register
tagprefix="cc1" %>
<html
>
<head
runat="server"><title>MaskedEdit</title
></head>
<body><form id="MaskedEdit"
<asp:ScriptManager
<cc1:MaskedEditExtender
ID="TextBox1_MaskedEditExtender"
runat="server"
AcceptAMPM="True"
CultureAMPMPlaceholder=""
CultureCurrencySymbolPlaceholder=""
CultureDateFormat=""
CultureDatePlaceholder=""
CultureDecimalPlaceholder=""
CultureThousandsPlaceholder=""
CultureTimePlaceholder=""
Enabled="True"
InputDirection="RightToLeft"
Mask="9,999,999.99"
MaskType="Number"
ErrorTooltipEnabled="True">
</cc1:MaskedEditExtender>
<cc1:MaskedEditValidator
ID="MaskedEditValidator1"
runat="server"
ControlExtender="TextBox1_MaskedEdit
Extender" ControlToValidate="TextBox1"
Display="Dynamic"
EmptyValueBlurredText="*"
EmptyValueMessage="Blank not
Allowed"
InvalidValueBlurredMessage="*"
InvalidValueMessage="Only
number required"
MaximumValue="12000"
MaximumValueBlurredMessage="*"
MaximumValueMessage=">12000"
MinimumValue="50"
MinimumValueBlurredText="*"
MinimumValueMessage="<50"
TooltipMessage="Enter the No.
between 50 to 12000"
IsValidEmpty="False">
</cc1:MaskedEditValidator></form></b
ody></html>
Value must be entered
Enter the number less than 50 the message shows

that you enter less than 50 (value not allowed).
Enter the Number greater than 12000, message

will shown.
SlideShow Control
1.
SlideShow is an extender that targets

image controls.
2.
You can add buttons to hit previous, next
and play, configured the slideshow to play
automatically on render and also allowed it
loop through the images in a round robin
fashion and also set the interval for slide
transitions.
3.
You can use a page method to supply

images to the slide show or use a webservice.
Properties
SlideShowServicePath: Path to the

webservice that the extender will pull the
images from.
SlideShowServiceMethod: The webservice
method that will be called to supply images.
The signature of the method must match this:
Note that you can replace "GetSlides" 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).
NextButtonID: ID of the button that will allow
you to see the next picture.
PlayButtonID: ID of the button that will allow
you to play/stop the slideshow.
PreviousButtonID: ID of the button that will

allow you to see the previous picture.
PlayButtonText: The text to be shown in the
play button to play the slideshow.
StopButtonText: The text to be shown in the
play button to stop the slideshow.
PlayInterval: Interval in milliseconds between
slide transitions in play mode.
ImageTitleLabelID: ID of Label displaying
current picture's title.
ImageDescriptionLabelID: ID of Label
describing current picture.
Loop: Setting this to true will allow you to
view images in a round-robin fashion.
AutoPlay: Setting this to true will play the
slideshow automatically on render.
How to use SlideShow Control

Sep 1. Drag ScriptManager Control and a Image
control from TollBox. Click on Add Extender.
A new small window open, Click on

SlideShowExtender and then Ok.
Make a folder and add some images on Solution

Explorer
Step 2. Click on Add SlideShow page method.
Written the code in .CS (Default.aspx.cs). Pass the

images path for each slide to show on your web
page.
[System.Web.Services.WebMethodAttrib
ute(), System.Web.Script.
Services.ScriptMethodAttribute()]
public static
AjaxControlToolkit.Slide[]
GetSlides(string contextKey)
{
return new
AjaxControlToolkit.Slide[]{
new
AjaxControlToolkit.Slide("image/Main.jp
g", "Front", "Go Ahead"),
new
AjaxControlToolkit.Slide("image/Baby.jp
g", "Baby", "Cute"),
new
AjaxControlToolkit.Slide("image/Image.j
pg", "Beautiful", "Most Precious"),
new
AjaxControlToolkit.Slide("image/Preciou
s.jpg", "Fabulous", "Cool Eye"),
new
AjaxControlToolkit.Slide("image/Face.jp
g", "Face", "Black and white"),
new
AjaxControlToolkit.Slide("image/Cute.jp
g", "Cute", "Hug Image"),
new
AjaxControlToolkit.Slide("image/Its
Over.jpg", "Its Over", "The End"),
};
}
Step 3. Add two Label Control and pass there

ControlID to the property ImageDiscriptionLabelID
and ImageTitleLabelID to show about image and
there name as your choice. Add Three other Button
Control and pass there Id to the NextButtonID ,
PlayButtonID and PreviousButtonID as your choice.
After adding all controls, view of your page
(Default.aspx), the design code

<%@ Register
tagprefix="cc1" %>
Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD
/xhtml1-transitional.dtd">
<html
html">
<title>SlideShow</title>
</head><body><form
id="SlideShow" runat="server">
<div><asp:ScriptManager
ID="ScriptManager1"
runat="server">
</div><table><tr><td><b>Name:
</b>
runat="server" Font-Bold="True"
ForeColor="#FF3300"></asp:Label
></td></tr>
<tr><td> <asp:Image
ID="Image1" runat="server"
Height="300px"
ImageUrl="~/Image/ad.png"
position: absolute" Width="500px"
/>
<cc1:SlideShowExtender
ID="Image1_SlideShowExtender"
runat="server"
Enabled="True"
NextButtonID="Button3"
PlayButtonID="Button2"
PlayButtonText="Play"
PlayInterval="300"
PreviousButtonID="Button1"
SlideShowServiceMethod="GetSlide
s" SlideShowServicePath=""
StopButtonText="||"
TargetControlID="Image1"
UseContextKey="True"
ImageDescriptionLabelID="label2"
ImageTitleLabelID="Label1">
</cc1:SlideShowExtender></td></
tr>
<tr><td><b>Description:
</b><asp:Label ID="Label2"
runat="server"
Font-Bold="True"
ForeColor="#663300"></asp:Label
></td></tr>
<tr><td><asp:Button
ID="Button1" runat="server"
Text="<<"
style="top: 402px; left:
171px; position: absolute; height:

26px;
width: 26px; bottom: 117px"
/></td><td><asp:Button
ID="Button2"
runat="server" Text="Play"
style="top: 403px; position:
absolute;
height: 26px; width: 40px; left:
221px" /></td><td>
runat="server" Text=">>"
width: 26px"
/></td></tr></table></form>
</body></html>
MutuallyExclusiveCheckBox Control
MutuallyExclusiveCheckBox is an ASP.NET AJAX
extender that can be attached to any ASP.NET
CheckBox control. By adding a number of
checkboxes to the same "Key", only one checkbox
with the specified key can be checked at a time.
This extender is useful when a number of choices
are available but only one can be chosen, similar to
a radio button. The use of checkboxes however
allows you to choose to uncheck a value which is
not possible normally with radio buttons.
Properties
TargetControlID: The ID of the CheckBox to

modify
Key: The unique key to use to associate
checkboxes. This key does not respect
INamingContainer renaming.
How to use MutuallyExclusiveCheckBox

Step 1.Drag ScriptManager and two CheckBox
Control from Toolbox, click on Add Extender
A new window open, Select

MutuallyExclusiveCheckBoxExtender and press Ok.
This process done for second CheckBox

Step 2.Open the property of both checkBoxes and
add a same Key property.
Step 3. The Design view of your web page.
Default.aspx
<%@ Register
tagprefix="cc1" %>
Transitional//EN"
<html
ml">
<title>MutuallyExclusiveCheckBox</t
itle></head><body>
<form
id="MutuallyExclusiveCheckBox"
runat="server">
ID="ScriptManager1"
runat="server">
runat="server" Text="Select a
Gender: "
Font-Bold="True"></asp:Label>
runat="server" Text="Male" />
<cc1:MutuallyExclusiveCheckBoxExte
nder
ID="CheckBox1_MutuallyExclusiveCh
eckBoxExtender"
Key="Check"
TargetControlID="CheckBox1">
</cc1:MutuallyExclusiveCheckBoxExt
ender>
runat="server" Text="Female" />
<cc1:MutuallyExclusiveCheckBoxExte
nder
ID="CheckBox2_MutuallyExclusiveCh
eckBoxExtender"
Key="Check"
</cc1:MutuallyExclusiveCheckBoxExt
ender>
</form></body></html>
Step 4. Debug the Application. You select only
one item at a time.
NumericUpDown Control
NumericUpDown is an ASP.NET AJAX extender, can
be attached to an ASP.NET TextBox control and
used to add "up" and "down" buttons to increment
and decrement the value in the TextBox on
developer choice. Increment and decrement can be
simple +1/-1 arithmetic. This Increase or decrease
the value of provided list of values (like the months
of the year), or they can call a Web Service to
determine the next value.
Properties
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.
ServiceDownPath/ServiceUpPath: Path to
a web service that returns the data used to get
the next or previous value.
ServiceDownMethod/ServiceUpMethod:
Web service method that returns the data used
to get the next or previous value, or the name
of a method declared on the Page which is
decorated with the WebMethodAttribute.
Tag: Specifies a custom parameter to pass to
the Web Service
Minimum: The minimum value allowed by the

extender.
Maximum: The maximum value allowed by
the extender.
How to use NumericUpDown Control

Step 1.Drag ScriptManager and a TextBox Control
from ToolBox.
Click on add Extender and select

NumericUpDownExtender and press ok
Step 2. If you want to use Web method then click

on below two label (Add "Get Next"..,Add "Get
Previous"..) as your requirement. We use simple
application of this control.
Step 3. Properties of control. Pass the Months

name to the property RefValues and fix the Width
and Step as your choice. You can use Web Services
and type the path of services using property
ServiceUpPath and SeviceDownPath.
The Design code of the Page (Default.aspx)

<%@ Register
tagprefix="cc1" %>

Transitional//EN"
<html
html">
<head
runat="server"><title>NumericUpD
own</title></head><body>
<form id="NumericUpDown"
runat="server">
ID="ScriptManager1"
runat="server">
runat="server"
Text="April" Width="120"
style="textalign:center"></asp:TextBox>
<cc1:NumericUpDownExtender
ID="NumericUpDownExtender1"
runat="server"
Width="120"
RefValues="January;February;Marc
h;April;May;June;
July;August;September;October;No
vember;December"
ServiceDownMethod=""
ServiceUpMethod=""
TargetButtonDownID=""
TargetButtonUpID="">
</cc1:NumericUpDownExtender></
form></body></html>
Modal Popup Extender Control

In ASP.Net 2.0 AJAX control toolkit provides a very
useful control as ModalPopupExtender that
provides the functionality of popup without opening
the new browser window.ModalPopup Extender
comes in handy when you want to display
information on the page modally.The ModalPopup

extender allows a page to display content to the
user in a "modal" manner which prevents the user
from interacting with the rest of the
page.ModalPopupExtender works within the same
window of web browser that popup on the fixed
content of a page.When the user is done
interacting with the modal content, a click of an
OK/Cancel control dismisses the modal content and
optionally runs custom script.ModalPopup extender
control disables the fixed content on the web page,
places a layer on it and displays a new web form
with other interactive controls to get the user
input.
Modal Popup Properties

TargetControlID - ID of the button or link button
control that will produce the ModalPopup.
PopupControlID - You can pass the ID of panel
server control having the controls layout inside it
that will appear as a modal popup on the web
page.
CancelControlID - T0 cancels the modal popup
OnCancelScript - Script to run when the modal
popup is dismissed with the CancelControlID
PopupDragHandleControlID - The ID of the

embedded element that contains the popup
header/title which will be used as a drag handle
X - The X coordinate of the top/left corner of the
modal popup .
Y - The Y coordinate of the top/left corner of the
modal popup
RepositionMode - The setting that reolves if the
popup needs to be repositioned when the window
is resized or scrolled
BackgroundCssClass - The CSS class to apply to
the background when the modal popup is displayed
DropShadow - if true then displays a shadow of
ModalPopup.
OkControlID - The ID of the element that
dismisses the modal popup
OnOkScript - Script to run when the modal popup
is dismissed with the OkControlID
How To Use Mutually Exclusive Check Box
Extender Control
Step 1. Start -> All Programs -> Visual Studio
2005 or Visual Studio 2008
Step 2. Now go to File Menu -> New -> Web Site

Step 3.
Under Visual Studio Installed Template-> Choose
ASP.NET WEB SITE -> Choose File System from
the location combo box -> Set the path by the
browse button - > Choose the language from the
Language ComboBox (Visual C# ,Visual Basic , J
#)
Choose Visual C#
Step 4. Click on the OK Button.
Step 5. Now drag some controls under the AJAX
Extensions.
First control you are going to drag and drop on the
page is - Script Manager.
After that .
CodeFile="Login.aspx.cs"
Inherits="Login"
EnableEventValidation="false"%>

"-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/
DTD/xhtml11.dtd">
<html
xhtml">
<head id="Head1"
runat="server">
<link href="StyleSheet.css"
rel="stylesheet" type="text/css"
/>
function ok(sender, e)
{
$find('ModalPopupExtenderLogin')
.hide();
__doPostBack('LoginBtn', e);
}
function okJoin(sender, e)
{
$find('ModalPopupExtenderSignup'
).hide();
__doPostBack('JoinBtn', e);
}
function OnKeyPress(args)
{
if(args.keyCode ==
Sys.UI.Key.esc)
{
$find("ModalPopupExtenderLogin"
).hide();
}
}
function body_onkeydown()
{
if(event.keyCode==13 ||
event.keyCode==27)
{
var
_defaultButtonName=getDefautBu
ttonName( event.keyCode==13 ?
"submitButton" : "cancelButton");
var
frm=document.forms[0];
if(frm &&
document.all(_defaultButtonName
))
{
document.all(_defaultButtonName
).click();
}
}
}
function
getDefautButtonName(className)
{
var
_defaultButtonName="";
var children =
document.getElementsByTagNam
e("input");
for (var i = 0; i <
children.length; i++)
{
var var1 = children[i];
var btnAction =
var1.buttonAction;
if(btnAction ==
className)
{
_defaultButtonName
= var1.id;
break;
}
}
return
_defaultButtonName;
}
</script>
</head>
<body
onkeydown="body_onkeydown()"
>
<form id="form1"
runat="server">
<asp:ScriptManager
ID="ScriptManager1"
runat="server">

<br />
<table style="width: 297px">
<tr>
<td style="width: 36px">
<asp:LinkButton
ID="Loginlnk" runat="server"
Width="47px">Login</asp:LinkB
utton></td>
<td>
<asp:LinkButton
ID="Signuplnk"
runat="server">Sign
Up</asp:LinkButton></td>
</tr>
<tr>
<td colspan="2">
<asp:Label ID="successLabel"
Visible="False"></asp:Label></t
d>
</tr>
</table>
<br />
<div>
<ajaxToolkit:ModalPopupExtender
ID="ModalPopupExtenderLogin"
runat="server"
TargetControlID="Loginlnk"
PopupControlID="LoginPanel"
BackgroundCssClass="modalBack
ground"
DropShadow="true"
OkControlID="LoginBtn"
OnOkScript="ok()"
CancelControlID="CancelBtn" />
<ajaxToolkit:ModalPopupExtender
ID="ModalPopupExtenderSignup"
runat="server"
TargetControlID="Signuplnk"
PopupControlID="SignupPanel"
BackgroundCssClass="modalBack
ground"
DropShadow="true"
OkControlID="JoinBtn"
OnOkScript="okJoin()"
CancelControlID="CancelBtn2" />
<br />
<br />
<asp:Panel ID="LoginPanel"
runat="server"
CssClass="modalPopup"
Style="display: none"
Width="278px"
Font-Names="@MS PGothic">
<table style="width:
270px">
<tr>
<td style="width:
30% " align="right">
<asp:Label
ID="Label10" runat="server"
Height="23px"
Text="UserName :"></asp:Label
>
</td>
<td style="width:
179px" >
<asp:TextBox ID="loginId"
runat="server"
Width="75%"></asp:TextBox></
td>
</tr>
<tr>
<td style="width:
<asp:Label
Height="23px"
Text="Password :"></asp:Label>
</td>
<td style="width:
179px">
<asp:TextBox
ID="pwd" runat="server"
Width="75%"></asp:TextBox></
td>
</tr>
<tr>
<td style="width:
94px">
</td>
<td style="width:
179px">

<asp:Button
ID="CancelBtn" runat="server"
Text="Cancel" Width="52px"
buttonAction="submitButton" />
<asp:Button
ID="LoginBtn" runat="server"
Text="Log In"
OnClick="LoginBtn_Click"
buttonAction="cancelButton"
/></td>
</tr>
</table>
<br />

</asp:Panel>
<br />
<asp:Panel ID="SignUpPanel"
runat="server"
CssClass="modalSignUp"
Style="display: none"
Width="539px"
Font-Names="@MS PGothic">
<span style="color:
#cc0000"><strong><span
style="color: dimgray">Welcome
to
ModalPopupExtender.com<br />
</span></strong><br />
</span>
If you already have an
account, you can also <span
style="color: dimgray"><span>
login</span> </span>
above.
<br />
<table style="width:
452px; height: 177px;"
Align="center">
<tr>
<td colspan="2"
style="height: 21px">
</td>
</tr>
<tr>
<td style="width:
<asp:Label
Height="23px" Text="Choose
username :"></asp:Label>
</td>
<td style="width:
179px" >
<asp:TextBox
ID="txtUserName" runat="server"
Width="100%"></asp:TextBox>
</td>
</tr>
<tr>
<td style="width:
30%" align="right">
<asp:Label
Height="23px"
Text="Password :"></asp:Label>
</td>
<td style="width:
179px">
<asp:TextBox
ID="txtPassword" runat="server"
</td>
</tr>
<tr>
<td style="width:
<asp:Label
Height="23px" Text="Confirm
password :"></asp:Label>
</td>
<td style="width:
179px">
<asp:TextBox
ID="txtConfirmPassword"
runat="server"
</td>
</tr>
<tr>
<td style="width:
<asp:Label
Height="23px" Text="Email
address:"></asp:Label></td>
<td style="width:
179px">
<asp:TextBox
ID="txtEmailAddress"
runat="server"
</td>
</tr>
<tr>
<td style="width:
<asp:Label
Height="23px" Text="First
Name:"></asp:Label></td>
<td style="width:
179px">
<asp:TextBox
ID="txtFirstName" runat="server"
</td>
</tr>
<tr>
<td style="width:
<asp:Label
Height="23px" Text="Last
Name :"></asp:Label></td>
<td style="width:
179px">
<asp:TextBox
ID="txtLastName" runat="server"
</td>
</tr>
<tr>
<td style="width:
<asp:Label
Height="23px"
Text="Zipcode:"></asp:Label></
td>
<td style="width:
179px">
<asp:TextBox
ID="txtZipcode" runat="server"
</td>
</tr>
<tr>
<td align="right"
style="width: 30%; height:
18px">
<asp:Label
Height="23px"
Text="Gender:"></asp:Label></t
d>
<td style="width:
179px; height: 18px">
<asp:RadioButtonList
ID="rblGender" runat="server"
RepeatDirection="Horizontal"
Height="19px">
<asp:ListItem>Male</asp:ListIte
m>
<asp:ListItem>Female</asp:ListI
tem>
</asp:RadioButtonList></td>
</tr>
104px;
179px;

<tr>
<td style="width:
height: 26px;">
</td>
<td style="width:
height: 26px;">

<asp:Button ID="CancelBtn2"
runat="server" Text="Cancel"
Width="52px" />
<asp:Button ID="JoinBtn"
runat="server" Text="Join"
OnClick="JoinBtn_Click" /></td>
</tr>
</table>
<br />
</asp:Panel>
</div>
</form>
</body>
</html>
Step 6. Now run your web site by Ctrl + F5
Step 7. Output is
MultiHandleSliderExtender Control
The MultiHandleSlider extender provides a featurerich extension to a regular asp:Textbox control.This
control reduced the need to use four DropDownlist
controls to hold the range values and the need for
a validation control. It allows you to choose a
single value, or multiple values in a range, through
a graphical slider interface.It supports one handle,
dual handles, or any number of handles bound to
the values of asp:TextBox or asp:Label controls. It
also provides options for read-only access, custom
graphic styling, hover and drag handle styles, as
well as mouse and keyboard support for
accessibility.
MultiHandleSliderExtender Control property
EnableKeyboard - using the keyboard.,slider
values can be changed
EnableMouseWheel -using the mouse wheel.,
slider values can be changed
Increment - For sliders using keyboard or mouse
wheel support; determines the number of points to
increment or decrement the slider values
BoundControlID - For backwards compatibility,
allows using classic Slider properties for a single
handle.
RaiseChangeOnlyOnMouseUp - fires the
change event on the extended TextBox only when
the left mouse button is released, If true.
MultiHandleSliderTargets - An inner property
describing each handle on the slider.
Minimum - Minimum value allowed.
Maximum - Maximum value allowed.
Length - The length of the graphical slider, in
pixels.
Decimals - Number of decimal digits for the

value.
Steps - Number of discrete values inside the
slider's range.
EnableRailClick - Whether clicking on the rail will
move the closest handle to the click location.
ControlID - The TextBox or Label whose value is
bound to this handle.
Events
OnClientLoad - The event called when the slider
is initialized.
onClientDragStart - The event called when the
user starts dragging a handle.
OnClientDrag - The event called when the user
drags the handle.
OnClientDragEnd - The event called when the
user stops dragging the handle.
OnClientValueChanged - The event called when
a handle value changes.
How To Use MultiHandleSliderExtender

Control

Step 3.
#)
Choose Visual C#
Extensions.
After that .

<%@ Register
Assembly="AjaxControlTool
kit"
Namespace="AjaxControlTo
olkit" TagPrefix="cc1" %>
Transitional//EN"
"http://www.w3.org/TR/xht
ml1/DTD/xhtml1transitional.dtd">
<html
xmlns="http://www.w3.org
/1999/xhtml">
<title>Untitled
Page</title>
</head>
<body bgcolor="#9999ff">
<form id="form1"
runat="server">
<div>
<asp:ScriptManager
ID="ScriptManager1"
runat="server">
<asp:TextBox
ID="TextBox1"
runat="server"
BackColor="#FF9966"></a
sp:TextBox>
<asp:TextBox
ID="TextBox2"
runat="server"
BackColor="#FF66FF"></as
p:TextBox>
<asp:TextBox
ID="txtSlider"
runat="server"
Width="40px"
BackColor="Fuchsia"></asp
:TextBox>
<cc1:MultiHandleSliderExte
nder
ID="MultiHandleSliderExten
der1" runat="server"
TargetControlID="txtSlider"
BehaviorID="multiHandleSli
derOne" Minimum="0"
Maximum="100"
Steps="50" Length="317">
<MultiHandleSliderTargets>
<cc1:MultiHandleSliderTarg
et ControlID="TextBox1" />
<cc1:MultiHandleSliderTarg
et ControlID="TextBox2" />
</MultiHandleSliderTargets
>
</cc1:MultiHandleSliderExt
ender>
</div>
</form>
</body>
</html>

Step 7. Output is
Mutually Exclusive Check Box Control

MutuallyExclusiveCheckBox is an ASP.NET AJAX
extender that can be attached to any ASP.NET
CheckBox control.This also provides a more
consistent and expected interface than using
javascript to allow the de-selection of a
RadioButton item.This extender is useful when a
number of choices are available but only one can
be chosen, similar to a radio button.The use of
Mutually Exclusive Check Box Extender it that you
can select only one check box under a heading.This
also provides a more consistent and expected
interface than using javascript to allow the deselection of a RadioButton item.
How To Use Mutually Exclusive Check Box
Control
Step 3.

#)
Choose Visual C#
Extensions.
After that .

CodeFile="Default.aspx.cs" Inherits="_Default"
%>
<%@ Register Assembly="AjaxControlToolkit"
Namespace="AjaxControlToolkit" TagPrefix="cc1"
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN" "http://www.w3.org/
TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
</head>
<body>
<div>
runat="server">
<asp:Panel ID="Panel1" runat="server"
BackColor="#999999">
<div><center>Choices...</center></div>
<asp:Label ID="label1" runat="server"
Text="Course" Font-Bold="true"/><br />
<br />
<asp:CheckBox ID ="CheckBox1" runat="server"
Text="MCA" /><br />
<asp:CheckBox ID ="CheckBox2"
runat="server" Text="B.Tech" />
<br />
<br />
<asp:Label ID="label2" runat="server"
Text="Gender" Font-Bold="true" />
<br />
<br />
runat="server" Text="Male" />
<br />
runat="server" Text="FeMale" />
</asp:Panel>
<cc1:MutuallyExclusiveCheckBoxExtender
ID="MutuallyExclusiveCheckBoxExtender1"
runat="server" Key="Course"
</cc1:MutuallyExclusiveCheckBoxExtender>
runat="server" Key="Course"
runat="server" Key="Gender"
runat="server" Key="Gender"
</div>
</form>
</body>
</html>

Step 7. Output is
NoBot Control
NoBot is a control that try to provide CAPTCHA-like
bot/spam prevention without requiring any user
interaction.AJAX NoBot control checks whether all
the client side javascript is working or has been
disabled by the spamming software.ASP.Net AJAX
NoBot extender Control returns different types of
responses when a user sends a request and
ASP.Net web page performs postback.AJAX NoBot

extender control checks all the behaviors and
detects whether the action is being performed by
the human or automated software.
NoBot Properties:
OnGenerateChallengeAndResponse -this is a
server side EventHandler that allows you to
implement the challenge or response code to test
the Javascript as well as server code.
InvalidBadResponse:-When challenge script fails
the test then AJAX NoBot control returns the bad
response.
InvalidBadSession:When ASP.Net Session State
becomes unusable.
CutOffMaximumInstances:optional maximum
number of postbacks to allow by a single IP
addresses within the cutoff window
InvalidAddressTooActive: When a single clients
IP remains active for a long time and performs
number of postback then it returns the
InvalidAddressTooActive.
CutOffWindowSeconds: Optional number of
seconds specifying the length of the cutoff window
that tracks previous postbacks from each IP
address.
AJAX NoBot extender verifies the delay in requests

sent by the user within a given time span.AJAX
NoBot control caches the IP address of the client
and counts the number of postback of a single
APS.Net web page.
How To Use NOBOT Control
Step 3.
#)
Choose Visual C#
Extensions.
After that .
Design code
<%@ Register
TagPrefix="cc1" %>
<html
>
</head>
<body bgcolor="#6666ff">
<div>
<asp:ScriptManager
runat="server" Text="NoBot Response
State:"
Font-Bold="true" FontSize="14px"></asp:Label>
<asp:Label ID="Label2" runat="server"
Font-Size="16px"></asp:Label>
<div class="clear"><br />
Text="Client IP Address:" FontBold="true"
<div class="clear"></div>
<div class="clear"><br />
</div>
<cc1:NoBot ID="NoBot1"
runat="server"
CutoffMaximumInstances="5"
CutoffWindowSeconds="60"
ResponseMinimumDelaySeconds="2"
/>
runat="server" Text="Check Spam"
OnClick="Button1_Click" />
</div>
</form>
</body>
</html
using System;
using System.Configuration;
using System.Data;
using System.Linq;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.HtmlControls;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Xml.Linq;
using System.Text;
using AjaxControlToolkit;
using System.Collections.Generic;
public partial class _Default : System.Web.UI.Page
{
protected void Page_Load(object sender,
EventArgs e)
{
}
protected void Button1_Click(object sender,
EventArgs e)
{
NoBotState nbs;
// if condition to check the response nbs of
NoBot
if (NoBot1.IsValid(out nbs))
{
Label2.Text = nbs.ToString();
}
else
{
Label2.Text = nbs.ToString();
}
StringBuilder sb = new StringBuilder();
// foreach loop to get cached IP address and
datetime assocated with it
(when last postback was occurred)
foreach (KeyValuePair<DateTime, string>
keyValue in NoBot.GetCopyOfUserAddressCache())
{
sb.AppendFormat("{0}: {1}<br />",
keyValue.Key.ToString(), keyValue.Value);
}
Label4.Text = sb.ToString();
}
}

Step 7. Output is
ReorderList Control
ReorderList is an ASP.NET AJAX control that
implements a bulleted, data-bound list with items
that can be reordered interactively.This is useful if
the data is only to be ordered.The ReorderList is a

very powerful piece of the ASP.NET AJAX Control
Toolkit. It gives you the ability to interactively
reorder a list of items.The ReorderList can handle
reorders in two ways, either via a callback or via a
postback.the ReorderList can automatically
perform reorders If the data you are displaying
has a field that determines sort order (e.g. the
select query is sorted by this column), and that
column is of an integer type and if its
SortOrderField property is set. The ReorderList can
also bind to any data source that implements IList
(such as Arrays).
Properties of ReorderList Control
DataSourceID -DataSourceID is used to
populate this control
AllowReorder - whether to allow drag/drop
reordering. This is automatically set to true if a
ReorderTemplate is present
ItemTemplate - It is used as a template to
display for items in the list
EditItemTemplate - It is used to to display for a
row that is in edit mode as a template
ReorderTemplate - It is used as the template to

show the drop location when doing a reorder
operation. This template is not data bindable.
InsertItemTemplate - It is used to show for
adding new items to the list.
DataKeyField - DataKeyField is The primary
key field for the data
SortOrderField - SortOrderField is the field
that represents the sort order of the items.
ItemInsertLocation - It Determines where new
items are inserted into the list, can be Beginning or
End
DragHandleAlignment - Where the drag handle
should be relative to the item row - can be "Top",
"Bottom", "Left", or "Right"
DragHandleTemplate - It is used to drag handle
that the user clicks and drags to reorder items.
EmptyListTemplate - It is used to show when the
list has no data. This item is not data-bindable.
PostbackOnReorder - It Determines if reorders
initiate a postback or callback. To use any edit or
delete functionality of a data-bound list, postbacks
must be enabled.
AnimationExtender Control
AnimationExtender Control is an ajax control that
provides powerful animation framework with
existing pages in an easy, declarative fashion
animation effect .such as moving an ASP Control
to a new place, resizing it, modifying its color, or
making it fade in or fade out.
AnimationExtender Control property
TargetControlID -It is the ID of the target
control which events are used to animate
OnLoad - when page is loaded, Generic animation
created
OnClick - when the target control is
clicked,Generic animation created
OnMouseOver - when the mouse moves over the
target control than Generic animation created
OnMouseOut - Generic animation created when
the mouse moves out of the target control
OnHoverOver it is same as an OnMouseOver
except before it plays, stop the OnHoverOut
animation
OnHoverOut - It is same as an OnMouseOutr
except before it plays, stop the OnHoverOut
animation
How To Use AnimationExtender control

Step 3.
ASP.NET WEB SITE ->
Choose File System from the location combo box
-> Set the path by the browse button - > Choose
the language from the Language ComboBox (Visual
C# ,Visual Basic , J #)
Choose Visual C#
Extensions.
After that .
CodeFile="Default.aspx.cs" Inherits="_Default"
%>

Namespace="AjaxControlToolkit" TagPrefix="cc1"
%>
Transitional//EN" "http://www.w3.org/TR/
xhtml1/DTD/xhtml1-transitional.dtd">
</head>
<body bgcolor="#cc99ff">
<div>
runat="server">
<cc1:AnimationExtender
ID="AnimationExtender1" runat="server"
TargetControlID="Button1">
<Animations>
<OnClick>
<Sequence>
<Color AnimationTarget="Button1" Duration="50"
StartValue="#FFF000" EndValue="#FF6666"
PropertyKey="backgroundColor" />
<EnableAction Enabled="true" />
</Sequence>
</OnClick>
</Animations>
</cc1:AnimationExtender>
<asp:Panel ID="Panel1" runat="server">
<asp:Button ID="Button1" runat="server"
Text="Animation" OnClick="Button1_Click" />
BackColor="#33CCFF"></asp:Label>
</asp:Panel>
</div>
</form>
</body>
</html>
........................................CS
CODE.......................................................
using
using
using
using
using
using
using
using
using
using
using
System;
System.Configuration;
System.Data;
System.Linq;
System.Web;
System.Web.Security;
System.Web.UI;
System.Web.UI.HtmlControls;
System.Web.UI.WebControls;
System.Web.UI.WebControls.WebParts;
System.Xml.Linq;
public partial class _Default : System.Web.UI.Page

{
protected void Page_Load(object sender,
EventArgs e)
{
}
protected void Button1_Click(object sender,
EventArgs e)
{
Label1.Text = "hello!. It is a
AnimationExtender Control program";
}
}

Step 7. Output is
MaskedEditExtender Control
MaskedEdit is an ASP.NET AJAX extender control
that attaches to a TextBox control to prevent the
kind of text that can be entered.When we use
MaskedEdit ,the input is masked and the value is
validated on the client according to the MaskType
selection.. The MaskedEdit control integrated with
the MaskedEditValidator for verify the input
MaskType - Type of validation to perform:
None - No validation
Number - Number validation
Date - Date validation
Time - Time validation
DateTime - Date and time validation
Mask Characters and Delimiters
9 - Only a numeric character
L - Only a letter
$ - Only a letter or a space
C - Only a custom character (case sensitive)
A - Only a letter or a custom character
N - Only a numeric or custom character
? - Any character
/ - Date separator
: - Time separator
. - Decimal separator
, - Thousand separator
\ - Escape character
{ - Initial delimiter for repetition of masks
} - Final delimiter for repetition of masks
MaskedEditExtender Control Property
AutoCompleteValue -when Auto complete is true
when defult character is used.
Century - when a date mask only has two digits for
the year than used Default century
ClearMaskOnLostFocus - If it is True then remove
the mask when the TextBox loses focus
ClearTextOnInvalid -If condition is true then clear
the textbox when entered invalid text.
ClipboardEnabled - True to allow copy/paste with
the clipboard
ClipboardText - when a clipboard paste is
performed,then Prompt text to use .
DisplayMoney - Specifies how the currency symbol
is displaye
How To Use MaskedEditExtender Control
Step 3.
#)
Choose Visual C#
Extensions.
After that .

TagPrefix="cc1" %>
Transitional//EN" "http://www.w3.org/TR/xhtml1
/DTD/xhtml1-transitional.dtd">
</head>
<body bgcolor="#66ff66">
<div>
runat="server">
<br />
       &
nbsp;

       &
nbsp;
Text="Name" Font-Bold="True"></asp:Label>
       &
nbsp;

       &
nbsp;
<asp:TextBox ID="TextBox1" runat="server"
BackColor="#CCCCFF"></asp:TextBox>
<br />
       &
nbsp;


<asp:Label ID="Label2" runat="server" FontBold="True" Text="MobileNumber">
</asp:Label>
       &
nbsp;      &n
bsp;
<asp:TextBox ID="TextBox2" runat="server"
BackColor="#FFFFCC"></asp:TextBox>
<cc1:MaskedEditExtender
ID="MaskedEditExtender1"
runat="server"
MaskType="Number" Mask="9999999999"
MessageValidatorTip="true"
AcceptNegative="None"
InputDirection="RightToLeft"
ErrorTooltipEnabled="true">
</cc1:MaskedEditExtender>
<cc1:MaskedEditValidator
ID="MaskedEditValidator1" runat="server"
ControlExtender="MaskedEditExtender1"
MinimumValue="1000000000"
MinimumValueMessage="Please enter
correc mobile number"
MaximumValueMessage="Invalid
mobile number! The highest roll
number is 105" Display="Dynamic"
IsValidEmpty="false"
InvalidValueMessage="The mobile number
does not exist"
EmptyValueMessage="Mobile number is
not entered"></cc1:MaskedEditValidator>
</div>
</form>
</body>
</html>

Step 7. Output is

Ajax Notes Full

Hochgeladen von

Dokumentinformationen

Originalbeschreibung:

Originaltitel

Copyright

Verfügbare Formate

Dieses Dokument teilen

Dokument teilen oder einbetten

Freigabeoptionen

Stufen Sie dieses Dokument als nützlich ein?

Sind diese Inhalte unangemessen?

Copyright:

Verfügbare Formate

Ajax Notes Full

Hochgeladen von

Copyright:

Verfügbare Formate

What is AJAX?

Ajax (Asynchronous JavaScript and XML) is a

your JavaScript communicates directly with the

During browser innovation, Netscape added a

with the client side using scripting language

As soon Microsoft introduced new

Ajax Architecture in ASP. Net

Server Script, A script is a program or set of

Base Class Library

Browsers (IE, Firefox etc.)

ASP.Net Ajax Extensions, Ajax Extensions

want to make a AJAX part) and select Event

9. 4. Debug the application

Partial-page rendering to the browser

Performed Postbacks of pages at defined

If you want to post the whole page, used

The Timer control requires specific settings

If your application does not contain the

Partial-page rendering to the browser

Dragging ScriptManager from Ajax extension.

The ASP. NET controls UpdatePanel,

When a ScriptManager control is already defined

added to the script and service collections defined

Performed Postbacks of pages at defined

If you want to post the whole page, used

The Timer control requires specific settings

If your application does not contain the

How to use Timer Control

2. Open the properties of Update panel. Click

3.Select controlID and give the name of your

4.Paste the code in the Default.aspx.cs file on

5. The design view of your Website

<!DOCTYPE html PUBLIC

6. Debug the Application

Which area on web page you want to partial

<form id="form1" runat="server">

Drag a button (named Update) control on

2. Go to UpdatePanel Control Properties and

3. Design Code (Default.aspx)

Note: When Click on Update Button, the image will

Step 2. Written the name of Your Ajax control tab.

Step 3. Right click on Ajax control tab Click on the

Step 4. Click on Browse.. button , and find Ajax

Step 5. Controls are Downloaded. You can see in

Mutually Exclusive Check Box

6. ScrollEffectDuration: Default is .1 second,

Fade (to fade the text in/out)

Animation Control Properties

How To Use AutoComplete Control

Step 2. A small window opened, select

Step 3. Open solution Explorer and add Web

Design Code (Default.aspx).

Calendar CssClass property provide to change look

How to use Calendar

Step 2. New Window open now add Calendar

Design Code (Default.aspx)

Step 3. Debug the Application. Output will be

Click on desire date to show in text box.

CascadingDropDown Control provides the

How to use CascadingDropDown Control

This Control attached to an ASP.NET

TargetControlID, Control ID.