Ajax: (Asynchronous JavaScript and XML)

“AJAX is the art of exchanging data with a server, and update parts of a web page - without
reloading the whole page”.

“Ajax is a group of interrelated web development methods used on the client-side to create
interactive web applications”.

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.

With Ajax, web applications can retrieve data from the server asynchronously in the background
without interfering with the display and behavior of the existing page or without refreshing the whole page.
Ajax normally used XMLHttpRequest object. Despite the name, the use of XML is not needed. All modern
browsers support the XMLHttpRequest object. The XMLHttpRequest object is used to exchange data with
a server behind the scenes.

Asynchrony, in the general meaning, is the state of not being synchronized. In programming,
asynchronous events are those occurring independently of the main program flow.

Asynchronous actions are actions executed in a non-blocking scheme, allowing the main program
flow to continue processing.

Update Panel:

The Update Panel control is probably the most important control in the ASP.NET AJAX package.
It will AJAX'ify (refresh a portion of the page controls) for example treeview contained within it, allowing
partial rendering of the page.

The <asp:UpdatePanel> tag has two childtags - the ContentTemplate and the Triggers tags. The
ContentTemplate tag is required, since it holds the content of the panel. The content can be anything that
you would normally put on your page, from literal text to web controls. The Triggers tag allows you to
define certain triggers which will make the panel update its content. The following example will show the
use of both childtags.

<asp:UpdatePanel ID=”updatePanel1” runat=”Server”>

<ContentTemplate>

<asp:TreeView ………………………></asp:TreeView>

</ContentTemplate>

</asp:UpdatePanel>

Or with using trigger tag. We can also mention when will the update panel be updated or refresh.
In the following example we tried to update the update panel only when user clicks on Button1.

<asp:UpdatePanel ID=”UpdatePanl1” runat=”Server” UpdateMode=”Conditional”>

<ContentTemplate>

<asp:TreeView ………………………></asp:TreeView>

</ContentTemplate>

<Triggers>

<asp:AsyncPostBackTrigger controlid="Button1" eventname="Click" />

</Triggers>

</asp:UpdatePanel>

AJAX CONTROL TOOLKIT FOR VS 2015 – EXTRA MATERIAL FOR

READING
FilterTextBox Extender:

<asp:TextBox ID="TextBox1" runat="server" Text="112"></asp:TextBox>

<cc1:FilteredTextBoxExtender ID="TextBox1_FilteredTextBoxExtender"
runat="server" TargetControlID="TextBox1" ValidChars="1234">
</cc1:FilteredTextBoxExtender>
Calender Extender:

<asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>

<cc1:CalendarExtender ID="TextBox2_CalendarExtender" runat="server"
TargetControlID="TextBox2"></cc1:CalendarExtender>

Password Strenght Extender:

<asp:TextBox ID="TextBox3" runat="server"></asp:TextBox>
<cc1:PasswordStrength ID="TextBox3_PasswordStrength" runat="server"
TargetControlID="TextBox3"></cc1:PasswordStrength>
 <asp:TextBox ID="TextBox4" runat="server" Text="Shan"></asp:TextBox>

Textbox Water Mark Extender:

Model Popup Extender:

And many many more controls in AJAX control Toolkit………………………………

Collapsible Panel:

</asp:Panel>
<asp:Button ID="Button1" runat="server" OnClick="Button1_Click" />
<asp:Panel ID="Panel1" runat="server" BorderStyle="Inset">

<asp:TextBox ID="TextBox1" runat="server" Text="112"></asp:TextBox>

<asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>
<asp:TextBox ID="TextBox3" runat="server"></asp:TextBox>
<asp:TextBox ID="TextBox4" runat="server" Text="some"></asp:TextBox>

</asp:Panel>

<cc1:CollapsiblePanelExtender ID="CollapsiblePanelExtender1" runat="server"

AutoCollapse="False" AutoExpand="False" TargetControlID="Panel1"
CollapseControlID="Button1" ExpandControlID="Button1">
</cc1:CollapsiblePanelExtender>
Detail of Collapsible Panel to Read:

The Collapsible Panel is a very flexible extender that allows you to easily add collapsible sections
to your web page. This extender targets any ASP.NET Panel control. The page developer specifies which
control(s) on the page should be the open/close controller for the panel, or the panel can be set to
automatically expand and/or collapse when the mouse cursor moves in or out of it, respectively.

<ajaxToolkit:CollapsiblePanelExtender ID="cpe" runat="Server"

TargetControlID="Panel1" CollapsedSize="0" ExpandedSize="300"

Collapsed="True" ExpandControlID="LinkButton1" CollapseControlID="LinkButton1"

AutoCollapse="False" AutoExpand="False" ScrollContents="True"

TextLabelID="Label1" CollapsedText="Show Details..." ExpandedText="Hide Details"

ImageControlID="Image1" ExpandedImage="~/images/collapse.jpg"

CollapsedImage="~/images/expand.jpg" ExpandDirection="Vertical" />

Detail.

TargetControlID - the Panel to operate expand and collapse.

CollapsedSize - The size of the target, in pixels, when it is in the collapsed state.

ExpandedSize - The size of the target, in pixels, when it is in the opened state.
Collapsed - Specifies that the object should initially be collapsed or expanded. Set this to match your
initial size. In this case,

we initially set the panel to a height of 0 to match the CollapsedSize property, so when the page first
renders,

we don't see the panel expanded.

AutoCollapse - True to automatically collapse when the mouse is moved off the panel.

AutoExpand - True to automatically expand when the mouse is moved over the panel.

ScrollContents - True to add a scrollbar if the contents are larger than the panel itself. False to just clip
the contents.

ExpandControlID/CollapseControlID - The controls that will expand or collapse the panel on a click,
respectively.

If these values are the same, the panel will automatically toggle its state on each click.

TextLabelID - The ID of a label control where the "status text" for the panel will be placed.

The panel will replace the internal HTML of this control (e.g. any HTML between the tags).

CollapsedText - The text to show in the control specified by TextLabelID when the panel is collapsed.

This text is also used as the alternate text of the image if ImageControlID is set.

ExpandedText - The text to show in the control specified by TextLabelID when the panel is opened.

This text is also used as the alternate text of the image if ImageControlID is set.

ImageControlID - The ID of an Image control where an icon indicating the collapsed status of the panel
will be placed.

The extender will replace the source of this Image with the CollapsedImage and ExpandedImage urls as
appropriate.

If the ExpandedText or CollapsedText properties are set, they are used as the alternate text for the
image.

CollapsedImage - The path to an image used by ImageControlID when the panel is collapsed

ExpandedImage - The path to an image used by ImageControlID when the panel is expanded

ExpandDirection - can be "Vertical" or "Horizontal" to determine whether the panel expands top-to-
bottom or left-to-right.

http://www.codeproject.com/Articles/534632/WhatplusisplusAJAX-3f