23 - AJAX and ASP.NET

23.1 Introduction to AJAX

AJAX is a web development technique used to create dynamically interactive applications. The applications can retrieve data from the server, asynchronously in the background without affecting the display of the web page.

AJAX means asynchronous JavaScript and XML. The terms are explained as follows:

Asynchronous communication: It is the ability of the application to send multiple requests and accept responses from the server simultaneously. As a result, the application works constantly without the responses of the server.

JavaScript: It is a scripting language used to generate client-side scripts. It forms an integral part of the AJAX enabled web applications as most of the applications process the request on the client side without connecting to the web server.

XML: It is a standard used for transferring data between applications. XML forms the base for manipulating data received from the server and presenting the data in web application.

Working of AJAX – enabled web application

 

The life cycle of the AJAX – enabled web page is as shown. When AJAX is implemented in an application, a new layer, AJAX engine is added in the communication model. The AJAX engine resides at the client side and contains three components as HTML, CSS and JavaScript files.

In AJAX – enabled web applications, the page is loaded for the first time when it is requested by the user. Whenever the user requests for the same page, the requests are sent as JavaScript calls to the AJAX engine. The AJAX engine servers as a mediator that send only small page bits updated to the server as XML. It reloads only the specific items and not the entire web page.

Advantages of AJAX

1) It provides a quick response to the users request. The partial page updates refreshes only the parts of the web page that are changed or updated. Less bandwidth is used due to the partial updates

2) Asynchronous communication helps to communicate with the web page while the application is processing the changed or updated parts of the web page

3) It has auto generated proxy classes that are used to call Web service methods from the client script as JavaScript

4) It supports most of the web browsers as Internet Explorer, Mozilla Firefox, and Apple Safari

23.2 ScriptManager Control

The ScriptManager control is used to manage the client script for AJAX enabled web applications. The features of the ScriptManager control are as follows:

1) The custom scripts that user sends to the Web browser to enable asynchronous communication with the web service and partial page rendering

2) The JavaScript classes used to access the ASP.NET application services for forms authentication, roles and user profiles.

3) The JavaScript proxy class that is used to call Web Service methods from the client script

Some of the properties of the ScriptManager control are as mentioned below:

Property

Description

AsyncPostBackErrorMessage

It sends the error message to the client when an unhandled exception occurs during the asynchronous postback

EnablePageMethods

It gets or sets a value indicating the method is static page method and called from client script

AysncPostBackTimeout

It gets or sets a value that indicates the period of time in seconds before postbacks are timed out

EnablePartialRendering

It gets or sets a value that enables partial rendering of a page

The markup for the ScriptManager control in the application is as shown below:

23.3 UpdatePanel Control

The UpdatePanel server control is used to create a container control that helps in creating interactive and responsive web applications. It is used with the ScriptManager control. User can add more than one UpdatePanel control in an application. It can contain other web server controls within it.

The list of properties for the UpdatePanel control are mentioned below:

Property

Description

ChildrenAsTriggers

It gets or sets a value that indicates that the postbacks from the child controls of the UpdatePanel control. The default value is false

Triggers

It gets a collection of all triggers that are applied to the UpdatePanel control as AsyncPostBackTriggers and PostBack Triggers

UpdateMode

It gets or sets the value that indicates that the contents are updated whenever the control is updated

RenderMode

It gets or sets the value that indicates the controls content are enclosed in HTML <div> or <span> element

The markup for the UpdatePanel control is as shown below:   

     <asp:UpdatePanel ID=”UpdatePanel1” runat=”server”>
     </asp:UpdatePanel>

The sample code for the UpdatePanel control is as shown below:   

<html xmlns=”http://www.w3.org/1999/xhtml”>
<head runat=”server”>
    <title></title>
</head>
<body>
  <form id=”form1” runat=”server”>
    <div>
    <asp:ScriptManager ID=”ScriptManager1” runat=”server”>
    </asp:ScriptManager>
    <br/>
    <asp:UpdatePanel ID=”UpdatePanel1” runat=”server”>
    <ContentTemplate>
    <asp:RadioButtonList ID=”rd1” runat=”server” AutoPostBack=”true”>
    <asp:ListItem Value=”Ajax”></asp:ListItem>
    <asp:ListItem Value=”Java”></asp:ListItem>
    <asp:ListItem Value=”C#”></asp:ListItem>
    </asp:RadioButtonList>
        <br/>
    <asp:Label ID=”lbl1” runat=”server”>Action</asp:Label>
    </ContentTemplate>
    </asp:UpdatePanel>
   </div>
  </form>
</body>
</html>
protected void rd1_SelectedIndexChanged( object sender, EventArgs e)
{
  lbl1.Text = rd1.SelectedItem.Text;
}

The output is:

23.4 UpdateProgress Control

The UpdateProgress control is used for providing information about the status of the partial-page status in the UpdatePanel controls. If the process of the partial-page updates is slow, the UpdateProgress control is used to provide the status of the update.

The UpdateProgress control can be customized. User can modify the default content of the control and layout of the control.

The syntax of the UpdateProgress control is as shown below:

    <asp:UpdateProgress ID=”UpdateProgress1” runat=”server”>
    </asp:UpdateProgress>

Some of the properties of the UpdateProgress control are as mentioned below:

Property

Description

AssociatedUpdatePanelID

It gets or sets the ID of the UpdatePanel control for which the UpdateProgress control is displayed

DisplayAfter

It gets or sets the value before the UpdateProgress control is displayed

DynamicLayout

It gets or sets a value that determines the progress template is rendered dynamically

The sample code for the UpdateProgress control is as shown below:

<html xmlns=”http://www.w3.org/1999/xhtml”>
<head runat=”server”>
    <title></title>
</head>
<body>
  <form id=”form1” runat=”server”>
    <div>
    <asp:ScriptManager ID=”ScriptManager1” runat=”server”>
    </asp:ScriptManager>
    <asp:UpdateProgress ID=”UpdateProgress1” runat=”server” AssociatedUpdatePanelID=”upan1”>
    <ProgressTemplate>
    Loading data…
    </ProgressTemplate>
    </asp:UpdateProgress>
    <asp:UpdatePanel ID=”upan1” runat=”server”>
    <ContentTemplate>
    <asp:Button ID=”btn1” runat=”server” Text=”Update” onclick=”btn1_Click” />
    </ContentTemplate>
    </asp:UpdatePanel>
    </div>
  </form>
</body>
</html>

The code behind file for the control is as shown below:

protected void btn1_Click( object sender, EventArgs e)
{
   System.Threading.Thread.Sleep(6000);
}

The Output is:

23.5 Timer Control

The Timer Control is used with the UpdatePanel control to perform the partial-page updates at a defined time interval. The uses of Timer control in an application are as follows:

1) It helps to periodically update one or more panel controls without refreshing the entire page in the application

2) It provides synchronous updates of the complete web page to the web server at a predefined time interval

3) It performs the code execution at the server every time the Timer control causes the postback.

The Timer control can be embedded with the JavaScript component into the web page. The component initiates the postback from the web browser to the web server, every time the time interval is lapsed. User can add multiple Timer controls on a web page. Each Timer control is associated with a different UpdatePanel control. The syntax to add the Timer control is as shown below:

  <asp:Timer ID=”Timer1” runat=”server”>
  </asp:Timer>

Some properties of the Timer control are as mentioned below:

Property

Description

Enabled

It gets or sets the value indicating the Timer control initiates postback to the server after the number of milliseconds specified in the Interval property has elapsed

Interval

It gets or sets the number of milliseconds to wait before initiating the postback to the server

The sample code to demonstrate the Timer control is as shown below:

<html xmlns=”http://www.w3.org/1999/xhtml”>
<head runat=”server”>
    <title></title>
</head>
<body>
  <form id=”form1” runat=”server”>
    <div>
    <asp:ScriptManager ID=”ScriptManager1” runat=”server”>
    </asp:ScriptManager>
    <asp:Timer ID=”Timer1” runat=”server” Interval=”5000” ontick=”Timer1_Tick”>
    </asp:Timer>
    <asp:UpdatePanel ID=”UpdatePanel1” runat=”server”>
    <Triggers>
      <asp:AsyncPostBackTrigger ControlID=”Timer1” EventName=”Tick” />
    </Triggers>
    <ContentTemplate>
    <asp:Label ID=”lbl1” runat=”server”></asp:Label>        
    </ContentTemplate>
    </asp:UpdatePanel>
     </div>
  </form>
</body>
</html>

The code behind for the Timer control is as shown below:

protected void Timer1_Tick( object sender, EventArgs e)
{
   lbl1.Text=DateTime.Now.ToString();
} 

The Output is as shown below:

  

Like us on Facebook