ASP.NET Ajax control

Ajax control

AJAX stands for Astix JavaScript and XML. T his is a cross-platform technology that accelerates response times. T he AJAX server control adds a script to the page, which is executed and processed by the browser.

However, like other ASP.NET server controls, these AJAX server controls can also have methods and event handles associated with them, all of which are handled on the server side.

The control toolbox in the Visual Studio IDE contains a set of control components called 'AJAX'.

ScriptManager control

The ScriptManager control is the most important control and must appear 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 box, the page will automatically form and contain a script manager control. S criptManager controls take care of client-side scripts for all server-side controls.

UpdatePanel control

The UpdatePanel control is a container control and originates from the Control class. I t works as a container for the child controls inside it and does not have its own interface. W hen one of its controls triggers a commit back, UpdatePanel intervenes to start asynchronously and update part of the page.

For example, if a button control is inside the update panel and it is clicked, only the control within the update panel will be affected, and the control in the rest of the page will not be affected. T his is called partial commit return or asynchronous commit return.

Example

Add an AJAX web form to your application. I t contains the default script manager control. I nsert an update panel. P lace a button control and a label label inside the update panel control. P lace another button and label set 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 control has 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 commit return button is clicked, it updates the label update time, but if the partial commit return button is clicked, it only updates the label within the update panel.

The property of UpdatePanel Control

Property	Describe
ChildrenAsTriggers	This property indicates whether the return comes from a child control, which causes the update panel to refresh.
ContentTemplate	It is a content template and defines what appears within the update panel when it appears.
ContentTemplateContainer	Retrieving dynamically created template container objects and using them to programmatically add child controls.
IsInPartialRendering	Indicates whether the panel was updated as part of the partial commit return.
RenderMode	Show render mode. The available modes are Block and Inline.
UpdateMode	Get or set rendering mode by determining some conditions.
Triggers	Defines the collection trigger object, each corresponding to an event that raises an automatic update of the panel.

The method of UpdatePanel Control

The following table shows the methods of the update panel control:

Method	Describe
CreateContentTemplateContainer	A Control object was created as a container for child controls that define the contents of the UpdatePanel control.
CreateControlCollection	Returns a collection of all controls contained within the UpdatePanel control
Initialize	If part of the page drawing is run, initialize the UpdatePanel control trigger collection.
Update	Causes an update to the contents of the UpdatePanel control.

Update panel's behavior depends on the values of the UpdateMode property and the ChildrenAsTriggers property.

Method	Describe	Effect
Always	False	Illegal parameters.
Always	True	UpdatePanel updates if the entire page is updated or if a child control above it returns.
Conditional	False	UpdatePanel updates if the entire page is updated or if a triggered control outside it starts an update.
Conditional	True	UpdatePanel updates if the entire page is updated or if a child control above it returns or if a trigger control outside it starts an update.

UpdateProgress control

When one or more update panel controls are updated, the UpdateProgress control provides a feedback from the browser. F or example, wait for a server response when a user logs on or when performing some database-oriented work.

It offers such as "Loading page..." v isual confirmation, indicating that the work is in the process.

The syntax of the UpdateProgress control is:

<asp:UpdateProgress ID="UpdateProgress1" runat="server" DynamicLayout="true" AssociatedUpdatePanelID="UpdatePanel1" >

   <ProgressTemplate>
      Loading...
   </ProgressTemplate>

</asp:UpdateProgress>

The above clip shows a simple message with a ProgressTemplate label. H owever, it can be a picture or other related controls. T he UpdateProgress control displays each asynchronous return unless it uses the AssociatedUpdatePanelID property and is designated as a separate update panel.

The properties of the UpdateProgress control

The following table shows the properties of the update progress control.

Property	Describe
AssociatedUpdatePanelID	Gets and sets the ID of update panel with the control contacted by this control.
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 presented. The default is 500.
DynamicLayout	Indicates whether the process template is being presented dynamically.
ProgressTemplate	Indicates that the template is displayed during an asynchronous commit return that takes more time than DisplayAfter time.

The method of the UpdateProgress control

The following table shows how to update the progress control:

Method	Describe
GetScriptDescriptors	Returns a list of components, behaviors, and client controls required for the client functionality of an UpdateProgress control.
GetScriptReferences	Returns a list of client scripts that rely on UpdateProgress controls.

Timer control

The timer control is used to automatically initialize the commit return. T his 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 UpdatePanel as a trigger for a child control. A single timer can act 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" style="width:304px" >
         </asp:Label>
   </ContentTemplate>

</asp:UpdatePanel>