What is AJAX in ASP.NET?

jqueryajaxsuccessASP.NET AJAX is a Microsoft technology built on the top of traditional ASP.NET, which is in turn part of a larger .NET Framework. Microsoft has streamlined the implementation of AJAX in ASP.NET applications by providing a built-in AJAX toolkit that allows developers to simply drag and drop AJAX controls via WYSIWYG (What You See Is What You Get) editors such as Visual Studio. AJAX helps developers create more user-interactive and responsive websites offering user experience similar to desktop applications. ASP.NET AJAX was released under Microsoft Public License.

To learn more about ASP.NET and AJAX, take a course at Udemy.com.

Why need AJAX?

Before dwelling into the details of ASP.NET AJAX, an important aspect of web applications need to be comprehended. Web applications, unlike desktop applications, follow stateless communication mechanism. In desktop based applications, user can directly access the machine on which application is deployed which yields efficient user experience and response.

Web applications are different in this regards. In web applications, users access the application via a web browser. User performs an action in the browser and that action is post backed to the server on which the website or web application has been deployed. Depending upon the action performed by the user in the browser, web server generates a response which is then sent back to the browser. This is just one instance of communication between a client and server, in real time communication. An extremely rigorous communication occurs between client and server. This results in hampered efficiency and responsiveness of the application. The problem to this solution is the AJAX technology.

What is AJAX?

AJAX itself is not a new technology, it is a technique in which several technologies integrate together to achieve goal of increased efficiency and improved user experience. AJAX stands for Asynchronous JavaScript and XML. Simply, putting AJAX allows server to update only a certain portion of webpage without having to send a complete post-back to the server. This reduces the traffic between server and client, resulting in desktop-like responsiveness for the users.

ASP.NET AJAX controls

To implement AJAX functionality in an ASP.NET application, following are some of the controls that play their part:

1-     ScriptManager

ScriptManager is the control that has to be added in any ASP.NET page that has to incorporate AJAX. There can be only one ScriptManager in any ASP.NET page. Script manage is an invisible control. Basically, ScriptManager when incorporated in a web page, sets the client-side JavaScript settings of the webpage, required for using AJAX.

2-     ScriptManagerProxy

In ASP.NET, one page can inherit from another page via Master-child relation. In scenarios where a Master page and child page, both have to implement AJAX, ScriptManagerProxy control can be used inside the child page. This is due to the fact that a page can only contain one ScriptManager, and if a Master page has a ScriptManager control, it will be inherited by all the child pages and child pages would not be able to add another ScriptManager of their own, in such scenarios ScriptManagerProxy control is added to the child pages.

3-     UpdatePanel

UpdatePanel is basically a panel control inside which partial page updates take place. All the post-backs such as user clicking a button or any other events inside the UpdatePanel communicate individually with the server an all other controls on the webpage will remain as it is. This would result in improved efficiency and user experience.

Apart from the controls aforementioned above, UpdateProgress and Timer are two of the other ASP.NET AJAX controls.

To learn more about ASP.NET and AJAX, take a course at Udemy.com.

ASP.NET AJAX Example

The following example demonstrates that how AJAX controls can actually be used inside and ASP.NET application to incorporate AJAX functionality.

Follow these steps to create working example.

Step1:

Create an ASP.NET Web application in Visual Studio and name it AjaxExample.  (VS 2010 has been used in this example).

Step2:

Open the Default.aspx page, switch to source code mode and make changes to the code so that it looks exactly like this:

 

<%@ Page Title="Home Page" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true"

CodeBehind="Default.aspx.cs" Inherits="AjaxExample._Default" %>

<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">

</asp:Content>

<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">

<asp:ScriptManager ID="ScriptManager1" runat="server">

</asp:ScriptManager>

<h2>

Welcome to ASP.NET!

</h2>

<p>

To learn more about ASP.NET visit <a href="http://www.asp.net" title="ASP.NET Website">www.asp.net</a>.

</p>

<p>

You can also find <a href="http://go.microsoft.com/fwlink/?LinkID=152368&amp;clcid=0x409"

title="MSDN ASP.NET Docs">documentation on ASP.NET at MSDN</a>.

</p>

<div>

<asp:UpdatePanel ID="UpdatePanel1" runat="server">

<ContentTemplate>

<asp:Label ID="Label1" runat="server" Text="Number1: "></asp:Label>

&nbsp;:

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

<br />

<br />

<asp:Label ID="Label2" runat="server" Text="Number 2:"></asp:Label>

:&nbsp;

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

<br />

<br />

<asp:Button ID="btn_Result" runat="server" onclick="btn_Result_Click"

Text="Sum" Width="71px" />

<br />

<br />

<asp:Label ID="Label3" runat="server" Text="Sum Result:  "></asp:Label>

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

<br />

&nbsp;

</ContentTemplate>

</asp:UpdatePanel>

</div>

</asp:Content>

 

A ScriptManager control has been added at the top just inside the BodyContent control. This is due to the fact that, to use UpdatePanel control, ScriptManager control must be added before it.

Step3:

Open the code behind file for the Default.aspx page i.e. Default.aspx.cs and add event handling code for the btn_Result control. The code behind file should now contain the following code:

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.Web.UI;

using System.Web.UI.WebControls;

 

namespace AjaxExample

{

public partial class _Default : System.Web.UI.Page

{

protected void Page_Load(object sender, EventArgs e)

{

}

protected void btn_Result_Click(object sender, EventArgs e)

{

tb_Result.Text = (Int32.Parse(tb_Number1.Text) + Int32.Parse(tb_Number2.Text)).ToString();

}

}

}

 

Now if the application is run, the default browser would open containing. Two text boxes, a button and another text box below the button that would display the sum of the integers enter in the above two text boxes. The output page would contain following portion.

Example1

 

If two integer type values are entered in the top two textboxes and then the Sum button is clicked, the text box below the button updates itself. However, only the portion inside of the page inside the update panel would update itself while rest of the page will remain static and no post-back would occur for the content on the rest of page. Thus, AJAX renders desktop-like user experience with improved efficiency and responsiveness.

For more detailed about ASP.NET AJAX, check out a course at Udemy.com.