This is going to be my first post on Ajax (Asynchronous Javascript and XML) and Ajax controls. Ajax is my favourite technology and I use it a lot when I build ASP.Net applications.

This is going to be a beginner's level post on Ajax in ASP.Net applications. I know that Ajax is an established technology but I thought to write a post using hands on examples. I am amazed at how many people do not know how to use Ajax in ASP.Net applications.

I am going to explain what Ajax really is and how it helps to have more responsive web applications. I will look into the ScripManager,UpdatePanel,UpdateProgress controls and how to use those controls to ajaxify our applications.

We know that the Web Forms model is based on postback operations. Basically postback is any action triggered by the client or code in a web page that sends data back to a web server for processing.

Our goal is to have partial updates. That means to update a part of a web page. The benefits of that are quite obvious. Less data travels on the wire and the whole experience is smoother.We do not have to reload the whole page.

Ajax is an acronym, it is a bundle of technologies. It consists of Javascript (client side scripting language) and XML (Extensible Markup Language).You do not have to be proficient in Javascript and XML to begin writing AJAX applications

Basically it is a technology for making asynchronous (parallel) calls from a web page. This will result in in minimal page refreshes.

Ajax relies on XMLHttpRequest object which is built on all modern browsers.

The ScriptManager control is the most important control in the Ajax enabled pages.It is required on all Ajax enabled pages and it is responsible for managing all framework and custom scripts used by a page. It also coordinates all asynchronous operations.The ScriptManager control loads the necessary scripts that allow Ajax to be used in a particular page.

Ι will show on the first example on how to use a custom javascript script with the ScriptManager control.

1) Launch Visual Studio 2010/2008 (express edition will work fine). Create an empty ASP.Net web site from the available templates and choose a suitable name for it. Choose C# as the development language.

2) Add a new item to your website,a web form.Leave the default name. Add a ScriptManager control control on the form.  Leave the default name

3) Add a new folder and name it Javascript.

function MyAlert(text) {
 
 
var mydiv=document.getElementById('showmessage');
 
mydiv.innerHTML=text;
}
 
function pageLoad()
{
MyAlert("I am Learning Ajax");
}

<div>
  <asp:ScriptManager ID="ScriptManager1" runat="server">
      <Scripts>
      <asp:ScriptReference Path="~/Javascript/functions.js" />
      </Scripts>
        </asp:ScriptManager>
    </div>
 
    <div id="showmessage">
    </div>

 6) Run your application and you will see the message printed on the screen. If you go to View->Source you will see client scripts e.g

//<![CDATA[
Sys.WebForms.PageRequestManager._initialize('ScriptManager1', 'form1', [], [], [], 90, '');
//]]>

 Have a look at the PageRequestManager class.

7) I am going to show how to use the next Ajax server control, the UpdatePanel control.Create a new web form.Leave the default name. This control basically Ajax enables portions of the page.

It converts normal postback operations into asynchronous postbacks using XMLHttpRequest and the response data is automatically updated in the page.

Add a new ScriptManager control on the form. In this example I will show you how to create a slideshow using the UpdatePanel control together with the Timer control. We will have to use triggers as well.

8) Create a new folder and call it images. Inside there add 3 small .jpgs. Name them images-1.jpg,images-2.jpg,images-3.jpg

9) Add an ASP.Net Image control on the page (Default2.aspx). Name it BannerImage .The markup for the button should be something like this

 <asp:Image ID="BannerImage" runat="server" ImageUrl="~/images/images-1.jpg"/>

Add a Timer control on the form. The timer control should be outside the UpdatePanel control. The code looks like this.

<asp:Timer ID="Timer1" runat="server" Interval="3000" OnTick="Timer1_Tick">
    </asp:Timer>

The time interval is set to 3 seconds.

Inside the UpdatePanel control we will add a Trigger element.Set the ControlID property to Timer1

<Triggers>
    <asp:AsyncPostBackTrigger ControlID="Timer1" />
    
    </Triggers>

 So we have the asynchronous trigger that is related to the Timer control.

The whole code should be something like this

<div>
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
 
<Triggers>
<asp:AsyncPostBackTrigger ControlID="Timer1" />
 </Triggers>
 <ContentTemplate>
<asp:Image ID="BannerImage" runat="server" ImageUrl="~/images/images-1.jpg" />
  </ContentTemplate>
 </asp:UpdatePanel>
    
 <asp:Timer ID="Timer1" runat="server" Interval="3000" OnTick="Timer1_Tick">
</asp:Timer>
</div>

 10) Now we must write some code in the Timer1_Tick event handling routine, to load the images randomly

protected void Timer1_Tick(object sender, EventArgs e)
    {

  Random RandomClass = new Random();
  int n = RandomClass.Next(1, 3);
  BannerImage.ImageUrl = System.String.Concat("images/images-", 

n.ToString(), ".jpg");
    }

I have used the Random class to generate a random number and then used that number to "generate" the name of the image.

11) Add a Label control outside the UpdatePanel.

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

 In the Page_Load event handling routine type

Label1.Text = DateTime.Now.ToString();

12) Run your application, load Default2.aspx page and see the images loading without any flickering on the page.Notice that the time on the page does not change.Only the slideshow part of the page is refreshed through asynchronous postbacks.

Hope it helps!!! Email me if you need the source code.