Creating Rich Internet Applications using AJAX in ASP.NET

MinalS's Avatar author of Creating Rich Internet Applications using AJAX in ASP.NET
In the AJAX application, a new layer known as AJAX engine is added to the model. It resides on the client side and contains three components as HTML, CSS and JavaScript files..
In traditional web applications, the client and server interact with each other synchronously. The web applications are processed one after another. When the client requests for a page for the first time, the server sends the page containing HTML and CSS code at once. The client enters updates on the page and is submitted to the server. The server processes the information and sends the page back to the client. This process leads to the following drawbacks:
  1. The user interaction with the application is interrupted each time a postback is made to the server.
  2. The user has to wait during each postback.
  3. The rendering of complete page from client to the server is time consuming.
To overcome these drawbacks, AJAX technology is implemented in Web applications. By implementing AJAX in applications, the client and server become asynchronous. The user can interact with the applications while waiting for the server response. The partial updates in the application are possible throughgh AJAX.

Understanding AJAX



AJAX is a web development technique used for creating dynamically interactive applications. The applications retrieve data from the server, asynchronously in the background without obstructing the display of the page.

The following terms are used for understanding the concept of AJAX.
  1. Asynchronous communication: It is the ability of an application to send multiple requests and receive responses from the server simultaneously.
  2. JavaScript: It is a scripting language used to generate client side scripts. It forms an integral part of the AJAX – enabled web applications. Many requests are processed on the client side saving the turn around server time.
  3. XML: It is a standard used for transferring data between applications. It is the base for manipulating the data received from the server.

Working of AJAX enabled Web Application



In the AJAX application, a new layer known as AJAX engine is added to the model. It resides on the client side and contains three components as HTML, CSS and JavaScript files.

The following figure shows the complete life cycle of an AJAX enabled web page.



In AJAX enabled web application, the page is loaded for the first time when requested by a user. Next whenever a user requests for the data from the server, the requests are sent to the AJAX engine as JavaScript calls. The AJAX engine is a mediator between the client and the server. It sends only small page bits that are to be updated without reloading the entire page.

Advantages of AJAX enabled Web Applications



AJAX enabled web applications provide advantages over the traditional web applications. The list of the advantages is as mentioned below:
  1. Quick Response: It refreshes only a part of the web page that needs to be changed or updated. The application uses less bandwidth.
  2. Asynchronous communication: It allows user to interact with rest of the web page while the application is processing the changed or updated parts of the web page.
  3. Auto-generated proxy classes: They are used to call web service methods from client script such as JavaScript.
  4. Browser Support: It provides support to the widely used web browsers like Internet Explorer, Mozilla Firefox, and Apple Safari.

Limitations of AJAX enabled Web Applications



The limitations with the AJAX enabled Web Applications are as follows:
  1. Browser Integration: The applications do not register the created web page in the browsers history engine. It restricts the user to view the previous page in the web browser.
  2. Dependency on JavaScript: The applications are based on JavaScript. JavaScript can be interpreted differently by different web browser versions.
Architecture of ASP.NET AJAX



The preceding figure shows that the ASP.NET architecture consists of the following components:
  • Client – based Microsoft AJAX library
  • Server – based AJAX features for ASP.NET

Client – based Microsoft AJAX library



The architecture provides features that enables user to create rich, extensive and interactive web applications. The architecture includes the ASP.NET AJAX library. The library includes the following components:
  • Components: The client components enable web application to render dynamic behavior of the browser without the postback to the Web Server. Various client components like non visual objects and controls are available.
  • Browser Compatibility: It provides the compatibility for client scripts with major web browsers as Microsoft Explorer, FireFox, and Apple Safari.
  • Networking: The architecture provides a networking layer between the client and the server. The layer handles the communication of scripts with the web services and the application services.
  • Core Services: It provides various core services such as JavaScript base class extension, support for the JavaScript libraries, debugging, error handling and globalization.

    The core services also include the Sys.Debug class to handle debugging in the web application. It contains Error object for handling errors in the web application. The Error object provides support for the release and debug mode of the web application.

Server Based AJAX Features for ASP.NET



The architecture provides the functionality for the server based AJAX features:
  • Script Support: AJAX features in an ASP.NET application can be implemented with the support of client scripts. The client scripts are sent form the web server to the web browser when the application is requested for the first time. The following features are provided by the client script:
    • Partial – page rendering: Enables to update portions of the page using the asynchronous postback.
    • The Microsoft AJAX library: It provides a set of JavaScript extensions that provide namespaces, inheritance, interfaces, enumerations, and reflection.
  • Web Services: An AJAX enabled web application can call Web services and WCF services. The Web services are called without a postback. The proxy class is generated by the server when the user requests the Web page for the first time. The proxy class can be used to call the corresponding Web service methods.
  • Application Services: The application services are predefined Web services that are based on features provided by the ASP.NET. The ASP.NET forms authentication is performed to verify credentials as login id, password of the users. The ASP.NET roles are used to combine multiple users under one role. The profile of a user contains information such as background and foreground colors of the application that is set when the user logs on the application.
  • Server Controls: The server controls consists of server side scripts as well as client side scripts. A Web page consisting of AJAX server controls sends supporting client script to a web browser, rendered to the user to provide AJAX functionality on the Web page.

Identifying the ASP.NET AJAX Server Controls



ASP.NET provides various server controls that implement AJAX functionality in a web application. The list of some of the controls is as mentioned below:

The ScriptManager Control

The ScriptManager control can be used to manage the client script for AJAX – enabled Web applications. It provides the following features:
  1. The JavaScript classes that are used to access the ASP.NET application services for forms authentication, roles, and user profiles
  2. The JavaScript proxy classes that are used to call Web service methods form the client script
  3. The custom scripts that user needs to send to the browser to enable asynchronous communication with the Web service and partial rendering
The ScriptManager control can be added to the Web page by using the following markup:

Code:
<asp:ScriptManager ID="scriptManager1" runat="server"></asp:ScriptManager>
The markup adds a control with the unique ID to the Web page.

Some of the properties of the control are as mentioned below:
  1. Adapter – It gets the browser specific adapter for the control
  2. AsyncPostBackErrorMessage – It gets or sets the error message that is sent to the client when unhandled server exceptions occur
  3. AsyncPostBackTimeout – It gets or sets a value that indicates the period in time, seconds, before the postbacks are timed out
  4. EnablePageMethods – It gets or sets the value that indicates whether the static page methods are called
  5. EnablePartialRendering – It gets or sets a value that enables partial rendering of a page
The ScriptManagerProxy Control

The control is used to manage the client script for the web applications. The ScriptManager control provides features as partial updates. As a result, user can add only one instance of the control to the Web page. If the control is added on the Master page, it cannot be added to the content page.

The ScriptManagerProxy control is used to overcome this limitation. If the page already contains a ScriptManager control and needs another ScriptManager control for a nested component, the ScriptManagerProxy control enables user to add scripts and services to the specific nested components.

Some of the properties of the ScriptManagerProxy control are as follows:
  • ID – It gets or sets the identifier assigned to the server control
  • Page – It gets or sets the reference to the Page instance containing the server control
  • Scripts – It gets a ScriptReferenceCollection object that contains a ScriptReference object for each script file
  • Services – It gets a ScriptReferenceCollection object that contains a ScriptReference object for each service that is explicitly registered
The UpdatePanel Control

The control is a container control that helps to create interactive Web applications. The control is used with the ScriptManager control to enable partial rendering.

User can add more than one UpdatePanel controls in the Web page. The control can contain other web server controls. When the control is rendered for the first time, all the content for the present controls are sent to the server. The control can be used on Master pages, content pages, GridView or Repeater control.

The markup for adding the control to the Web page is shown
Code:
<asp:UpdatePanel ID="UpdatePanel1" runat="server"></asp:UpdatePanel>
Some of the properties of the UpdatePanel control are as mentioned below:
  1. RenderMode – IT gets or sets the value indicating whether an UpdatePanel is enclosed in an HTML <div> or <span> element
  2. ChildrenAsTriggers - It gets or sets a value indicating whether postbacks are from the immediate child controls of an UpdatePanel control
  3. UpdateMode - It gets or sets the value that indicates whether an UpdatePanel controls content is updated
  4. Triggers - It gets a collection of all the triggers that are applied on the UpdatePanel control
A code sample to demonstrate the ScriptManger and UpdatePanel control is as shown below:
Code:
<form id="form1" runat="server">
    <div>
        <asp:scriptmanager id="ScriptManager1" runat="server">
        </asp"scriptmanager>
        <br/>
        <asp:updatepanel id="UpatePanel1" runat="server">
        <contenttemplate>
        <br/>
        <asp:label id="lbl1" runat="server" forecolor="Brown" backcolor="Aqua" text="Creating ajax application"></asp:label>
        <br/>
        <asp:label id="lbl2" runat="server" forecolor="Red" backcolor="GreenYellow" text="New added feature in asp.net">
        </asp:label>
        <br/>
        <asp:button id="btn1" runat="server" text="Show" onclick="btn1_Click"/>
        </contenttemplate>
        </asp:updatepanel>
    </div>
</form>
The code behind file contains the following code:
Code:
protected void btn1_Click(object sender, EventArgs e)
{
     lbl1.Text="The Button was clicked at"+ DateTime.Now.ToString();
}
The output for the code is as shown below:



The UpdateProgress Control

It is used to provide the information on the progress of partial updates in the UpdatePanel controls. The control provides message if the updates are slow. The UpdatePanel control can modify the default content and layout of the UpdateProgress control.

The markup for adding the UpdateProgress control to the Web page is as shown below:
Code:
<asp:UpdateProgress ID="UpdateProgress1" runat="server"></asp:UpdateProgress>
Some of the properties of the UpdateProgress control are as follows:
  1. AssoiciatedUpdatePanelID - It gets or sets the ID of the UpdatePanel control for which the UpdateProgress control displays the status of update
  2. DisplayAfter - It gets or sets the value before the UpdateProgress control is displayed
  3. DynamicLayout - It gets or sets a value determining the progress template is rendered dynamically
  4. ValidateRequestMode - It gets or sets the value that indicates client input from the browser are checked by the control
A code sample for demonstrating the UpdateProgress control is as shown below:
Code:
<form id="form1" runat="server>
    <div>
        <asp:scriptmanager id="ScriptManager1" runat="server">
        </asp:scriptmanager>
        <br/>
        <asp:updateprogress id="UpdateProgress1" runat="server">
        <progresstemplate>
        Data Loading……. </progresstemplate>
        </asp:updateprogress>
        <asp:updatepanel id="UpdatePanel1" runat="server">
        <contenttemplate>
        <asp:button id="Updatevalue" runat="server" text="Update" onclick="Updatevalue_Click"/>
        </contenttemplate>
        </asp:updatepanel>
    </div>
</form>
The code behind file for the example is as shown below:
Code:
protected void Updatevalue_Click(object sender, EventArgs e)
{
          System.Threading.Thread.Sleep(7000);
}
The output for the code is as shown below:



The Timer Control

It is used to control with the UpdatePanel control to perform partial – page updates at a predefined time interval. The Timer control can be used to post entire Web page at a predefined time interval.

You can use the Timer control in your Web application to perform the following tasks:
  1. Periodical updates of the UpdatePanel controls without refreshing the entire Web page.
  2. The code at the server each time the Timer control causes a postback. When the tick event of the Timer control is raised, the postback and the code is written under the tick event handler is executed.
  3. The synchronous postback of the entire Web page to the Web server at the predefined time intervals.
You can place multiple Timer controls on a Web page. You can associate each Timer control with a different UpdatePanel control.

The markup for the Timer control is as shown below:
Code:
<asp:Timer ID="Timer1" runat="server"></asp:Timer>
Some of the properties of the Timer control are as shown below:
  1. Adapter - It gets the browser specific adapter for the control
  2. Enabled - It gets or sets a value that indicates whether Timer control indicates a postback to the server after the number of milliseconds specified in the internal property has elapsed
  3. Interval - It gets or sets the number of milliseconds to wait before indicating a postback to the server
The code snippet to demonstrate the Timer control is as shown below:
Code:
<form id="form1" runat="server">
    <div>
        <asp:scriptmanager id="ScriptManager1" runat="server">
        </asp:scriptmanager>
        <asp:timer id="timer1" runat="server" interval="7000" ontick="timer1_Tick"></asp:timer>
        <br/>
        <asp:updatepanel id="UpdatePanel1" runat="server" updatemode="Conditional">
        <triggers>
        <asp:asyncpostbacktrigger controlid="timer1" eventname="Tick"/>
        </triggers>
        <contenttemplate>
        <asp:label id="datelabel" runat="server"></asp:label>
        </contenttemplate>
        </asp:updatepanel>
    </div>
</form>
The code behind file is as shown below:
Code:
protected void timer1_tick(object sender, EventArgs e)
{
       datelabel.Text=DateTime.Now.ToString();
}
The output for the code is as shown below:

shabbir like this