AJAX stands for Asynchronous JavaScript and XML. This is a cross-platform technology that speeds up response times. AJAX server controls add script to the page, which is executed and processed by the browser.
However, like other ASP.NET server controls, these AJAX server controls can have methods and event handlers associated with them, which are all handled on the server side.
The control toolbox in the Visual Studio IDE contains a set of control components called 'AJAX'.
The ScriptManager control is the most important control and must be present on the page for other controls to work.
It has basic syntax:
<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
If you create an 'Ajax Enabled site' or add an 'AJAX Web Form' from the 'Add Item' dialog, the web page will automatically form and contain the script manager control. The ScriptManager control takes care of client-side scripting for all server-side controls.
The UpdatePanel control is a container control and is derived from the Control class. It operates as a container for the child controls within it and does not have its own interface. When one of its controls triggers a submit back, the UpdatePanel intervenes to start asynchronously and update part of the page.
For example, if a button control is inside an update panel, and it is clicked, only the controls in the update panel will be affected, and controls in other parts of the page will not be affected. This is called a partial commit return or an asynchronous commit return.
Add an AJAX web form to your application. It contains the default script manager control. Insert an update panel. Place a button control and a label label inside the update panel control. Place another set of buttons and labels outside the panel.
The design view looks like this:
The resource file looks like this:
<form id="form1" runat="server"> <div> <asp:ScriptManager ID="ScriptManager1" runat="server" /> </div> <asp:UpdatePanel ID="UpdatePanel1" runat="server" > <ContentTemplate> <asp:Button ID="btnpartial" runat="server" onclick="btnpartial_Click" Text="Partial PostBack"/> <br /> <br /> <asp:Label ID="lblpartial" runat="server"></asp:Label> </ContentTemplate> </asp:UpdatePanel> <p> </p> <p>Outside the Update Panel</p> < p> <asp:Button ID="btntotal" runat="server" onclick="btntotal_Click" Text="Total PostBack" /> </p> <asp:Label ID="lbltotal" runat="server"></asp:Label></form>
The button controls all have the same code for the time handler:
string time = DateTime.Now.ToLongTimeString();lblpartial.Text = "Showing time from panel" + time;lbltotal.Text = "Showing time from outside" + time;
Observe that when the page is executed, if the total submit return button is clicked, it will update all tags with the update time, but if the partial submit return button is clicked, it will only update the tags in the update panel.
| property | describe |
|---|---|
| ChildrenAsTriggers | This property indicates whether the return comes from a child control, which will cause the update panel to refresh. |
| ContentTemplate | It is the content template and defines what appears within the update panel when it appears. |
| ContentTemplateContainer | Retrieves a dynamically created template container object and is used to programmatically add child controls. |
| IsInPartialRendering | Indicates whether the panel is updated as part of the partial commit return. |
| RenderMode | Show render mode. Available modes are Block and Inline. |
| UpdateMode | Gets or sets the rendering mode by determining some conditions. |
| Triggers | Define collection trigger objects, each corresponding to an event that triggers automatic update of the panel. |
The following table shows the methods of the update panel control:
| method | describe |
|---|---|
| CreateContentTemplateContainer | A Control object is created to serve as a container for the child controls that define the contents of the UpdatePanel control. |
| CreateControlCollection | Returns a collection of all controls contained in the UpdatePanel control |
| Initialize | Initializes the UpdatePanel control trigger collection if partial page drawing is running. |
| Update | Causes the content of the UpdatePanel control to be updated. |
The behavior of the update panel depends on the values of the UpdateMode property and the ChildrenAsTriggers property.
| method | describe | Influence |
|---|---|---|
| Always | False | Illegal parameter. |
| Always | True | The UpdatePanel updates if the entire page updates or a child control above it returns. |
| Conditional | False | The UpdatePanel updates if the entire page updates or if a triggered control outside it starts an update. |
| Conditional | True | The UpdatePanel updates if the entire page updates or a child control above it returns or a triggering control outside it starts an update. |
The UpdateProgress control provides feedback from the browser when one or more update panel controls are updated. For example, waiting for a response from the server when a user logs in or when performing some database-oriented work.
It provides visual confirmation such as "Loading page..." that the work is being processed.
The syntax of the UpdateProgress control is:
<asp:UpdateProgress ID="UpdateProgress1" runat="server" DynamicLayout="true" AssociatedUpdatePanelID="UpdatePanel1" > <ProgressTemplate> Loading... </ProgressTemplate></asp:UpdateProgress>
The above snippet shows a simple message with a ProgressTemplate tag. However, it can be a picture or other related control. The UpdateProgress control displays every asynchronous return unless it is specified as a separate update panel using the AssociatedUpdatePanelID property.
The following table shows the properties of the update progress control.
| property | describe |
|---|---|
| AssociatedUpdatePanelID | Gets and sets the ID of the update panel with the control this control is associated with. |
| Attributes | Gets and sets the cascading style sheet (CSS) property of the UpdateProgress control. |
| DisplayAfter | Gets and sets the time in milliseconds after the processing template is displayed. The default is 500. |
| DynamicLayout | Indicates whether process templates are displayed dynamically. |
| ProgressTemplate | Indicates that the template is displayed during an asynchronous commit return that takes more time than the DisplayAfter time. |
The following table shows the methods of the update progress control:
| method | describe |
|---|---|
| GetScriptDescriptors | Returns a list of components, behaviors, and client-side controls required for the client-side functionality of the UpdateProgress control. |
| GetScriptReferences | Returns a list of UpdateProgress controls that client scripts depend on. |
The timer control is used to automatically initialize submission returns. This can be done in two ways:
(1) Set the Triggers property of the UpdatePanel control.
<Triggers> <asp:AsyncPostBackTrigger ControlID="btnpanel2" EventName="Click" /></Triggers>
(2) Place a timer control directly inside the UpdatePanel as a trigger for a sub-control. A single timer can serve as a trigger for many UpdatePanels.
<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Always"> <ContentTemplate> <asp:Timer ID="Timer1" runat="server" Interval="1000"> </asp:Timer> < asp:Label ID="Label1" runat="server" Height="101px" > </asp:Label> </ContentTemplate></asp:UpdatePanel>