Getting Started with AJAX in ASP.NET

This article explain about how to use AJAX in ASP.NET and also provide basic AJAX sample code

Published Date : 30 Aug 2007

---

---

Introduction

AJAX stands for "Asynchronous JavaScript and XML." It is a technology that facilitates the development of responsive web applications. Responsive means that you can have your data refreshed without the need of full page postback which can significantly reduced bandwidth usage and faster performance.

AJAX is a "cross-platform" technology and can be used across various operating systems, computer architectures and different web browsers as it is based on XML and JavaScript that are open standards.
PHP, ASP.NET,ASP,JSP, Cold fusion all can integrate AJAX library into their code easily.
But to use AJAX library it is not that simple and sometimes it is quite hard to code, therefore Mcrosoft has create their own set of AJAX library and named it as ATLAS.  You need to download Microsoft AJAX library before you can start coding your Ajax applications.
URL For downloading latest AJAX library is here
http://www.asp.net/ajax/downloads

Main

Once you have downloaded and installed AJAX library, now you can start do some AJAX development in ASP.NET. I will provide some very basic example on coding AJAX in your ASP.NET website to motivate you getting started in AJAX.

First, open Visual Studio 2005, and Click on Create New Websites -> Choose ASP.NET AJAX Enabled Website.
In the Default.aspx you will notice that the ScriptManager tag was automatically added by VisualStudio 2005. The ScriptManager must be there if you are planning to implementing AJAX on your site. Make sure that there is only one ScriptManager tag on your entire page.

Using UpdatePanelControl

Now, we are going to add UpdatePanel Control on your website. You can just drag it from Visual Studio ToolBox -> AJAX Extensions.
Once you drag the code, you can see the control like this

 <ASP:UPDATEPANEL ID="UpdatePanel3" RUNAT="server">
 </ASP:UPDATEPANEL>

I will explain a bit about UpdatePanel Control. UpdatePanel Controls is basically a control that you can host another asp.net controls inside and whenever a postback happens, only the ContentTemplate inside the UpdatePanel Control get refreshed. So there will be no full page postback.

For better understanding, now copy and paste the code below.

<ASP:SCRIPTMANAGER ID="ScriptManager1" RUNAT="server" />
<ASP:LABEL ID="lblDateWithoutAJAX" RUNAT="server">
</ASP:LABEL>
<ASP:UPDATEPANEL ID="UpdatePanel1"  RUNAT="server" >
    <CONTENTTEMPLATE>
        <ASP:LABEL ID="lblDateAJAX" RUNAT="server"></ASP:LABEL>
        <BR />
        <ASP:BUTTON ID="btnAJAX" RUNAT="server" TEXT="I am AJAX Button" ONCLICK="btnAJAX_Click" />
    </CONTENTTEMPLATE>
</ASP:UPDATEPANEL>
<BR /><BR />
<ASP:BUTTON ID="btnWithoutAJAX" RUNAT="server" TEXT="I am Non AJAX Button" ONCLICK="btnWithoutAJAX_Click" />

As you can see from the code, that we put two asp.net controls inside the UpdatePanel ContentTemplate.
One is Label Control and the other one is Button Control.
And also if you see that I put the other Button Control (btnWithoutAJAX) outside the UpdatePanel Control. From this example, you can clearly see what is the difference between full page postback and partial page postback.

Now for the code behind handler for the Button.

Code for C#

 protected void btnWithoutAJAX_Click(object sender, EventArgs e)
    {
        System.Threading.Thread.Sleep(30);
        lblDateAJAX.Text = DateTime.Now.ToString();
    }
    protected void btnAJAX_Click(object sender, EventArgs e)
    {
        System.Threading.Thread.Sleep(30);
        lblDateAJAX.Text = DateTime.Now.ToString();
    }

Code for VB.NET

  Protected Sub btnAJAX_Click(ByVal sender As Object, ByVal e As System.EventArgs)
        System.Threading.Thread.Sleep(30)
        lblDateAJAX.Text = DateTime.Now.ToString()
    End Sub

    Protected Sub btnWithoutAJAX_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles btnWithoutAJAX.Click
        System.Threading.Thread.Sleep(30)
        lblDateAJAX.Text = DateTime.Now.ToString()
    End Sub

The code behind basically just a simple post back event for each of the button and I put a System.Threading.Sleep so that you can see a bit of delay during the postback event
Now, try to run the Page, and you can see that when you click on the btnAJAX button, the whole page is not refreshed by the button click event. Only the label control being updated and if you click on the btnWithoutAJAX, the full page being post back and refreshed. All of this happens because of the UpdatePanel Control.

Using UpdateProgress Control

UpdateProgress control is basically a control that you can use to show some progress status during your partial post back (AJAX) event. You can host animated gif, progress bar control or just simple Loading text inside the UpdateProgress Control.

To use the Update Progress control is quite simple. Just drop the UpdateProgress Control from the ToolBox onto your Page.

    <ASP:UPDATEPROGRESS ID="UpdateProgress1" RUNAT="server">
        <PROGRESSTEMPLATE>
            <IMG src="images/mozilla_blu.gif" />
        </PROGRESSTEMPLATE>
    </ASP:UPDATEPROGRESS>

In the code above, I just drop animated loading gif inside the ProgressTemplate.  Now, when you try to view the page, you can see the animated gif is loading when you click on the btnAjax button. It will always be nicer if you put some animated gif or loading text when you implementing AJAX in your web application to inform your user about your event.

Using UpdatePanel Control with External Button

By default, a postback control (such as a button) inside an UpdatePanel control causes a partial-page update. By default, a button or other control outside an UpdatePanel control causes the whole page to be refreshed, as you have seen. However there is a way for you to invoke a partial post back event triggered by external button. In the code example below, I will demonstrate how to achieve that

 <ASP:SCRIPTMANAGER ID="ScriptManager1" RUNAT="server" />
  <ASP:LABEL ID="Label1" RUNAT="server" TEXT="Label" WIDTH="249px"></ASP:LABEL><BR />
    <ASP:UPDATEPANEL ID="UpdatePanel1" RUNAT="server">
       <CONTENTTEMPLATE>
            <HR />
                <ASP:LABEL ID="Label2" RUNAT="server" TEXT="Label" WIDTH="249px"></ASP:LABEL>
            <HR />
       </CONTENTTEMPLATE>
       <TRIGGERS>
            <ASP:ASYNCPOSTBACKTRIGGER CONTROLID="Button1" EVENTNAME="Click" />
       </TRIGGERS>
    </ASP:UPDATEPANEL>
     <BR />
<ASP:LABEL ID="Label3" RUNAT="server" TEXT="Label" WIDTH="249px"></ASP:LABEL><BR />
<BR />
<ASP:BUTTON ID="Button1" RUNAT="server" TEXT="Button" WIDTH="233px" ONCLICK="Button1_Click" /></DIV>

You can see that from the code above, it is quite simple to have external button to trigger partial post back event. 
You just need to add <ASP:Asyncpostback trigger> tags and assigned the controlid to your button id and eventname to your button event name, and its all done.

It is not just limited to button, infact you can use whatever asp.net control inside your asyncpostbacktrigger and bind it to your control event that trigger the postback.

This is particularly useful if you want to have your button outside the updatepanel template.

Conclusion

AJAX has been revolutionized the way web pages has interact with user and Microsoft has introduced its own AJAX implementation library called Atlas. The above article only discuss about very basic example on using AJAX in ASP.NET. There are still heaps more things you can do with AJAX in ASP.NET. There are lots of  good example and tutorial on Microsoft website at http://www.asp.net/ajax.

Download Source Code

• Download AJAXEnabledWebSite1.zip

---

Other Related and Popular Articles :

---

Author Profile : James Douglas

I work in a Software House Company in Malaysia (Kuala Lumpur) and I am MCP Certified in C# and Web Application course. I originally started my programming in Java but later on changed to Microsoft platform because of the simplicity and ease of use. I love .NET programming and am doing it almost every day now. Click here to view Author Profile

---

Comments

Leave New Comments