Introduction to Asp .Net Ajax – 2 (UpdateProgress)

Ajax makes rich web application. Users don’t have to reload page in order to get response from server. Asynchronous proccess is a key to Ajax.
With Asp .Net Ajax building ajax enabled web app become easier. Built in controls like ScriptManager, UpdatePanel, ContentTemplate, Triggers, and UpdateProgress
In earlier post (Introduction to Asp .Net-1) I have given an example on how to use Built in Asp .Net Controls. In this post I will give example of UpdateProgress Control.

UpdateProgress Control
When we run on long query process or file upload/download operation or some complex calculation, we need to inform users about progress status since the page is not reloading.
Asp .Net Built in UpdateProgress Control informs progress to users asynchronously. It has ProgressTemplate Tag inside Control’s Tag. We can write progress information inside ProgressTemplate Tag.

Implementation
Open Visual Studio 2010 and create a new Website project and here’s the code in Default.aspx:

   <form id="form1" runat="server">
    <div>
    <asp:ScriptManager ID="ScriptManager1" runat="server">
    </asp:ScriptManager>
    <asp:Label ID="Label2" runat="server" Text="Waktu server"></asp:Label><br />
    <asp:UpdateProgress ID="updateprogress1" runat="server">
        <ProgressTemplate>
            An update is in progress ...
        </ProgressTemplate>
    </asp:UpdateProgress>

    <asp:UpdatePanel ID="UpdatePanel1" runat="server">
        <ContentTemplate>
            <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label><br />
        </ContentTemplate>
        <Triggers>
            <asp:AsyncPostBackTrigger ControlID="Button1" />
        </Triggers>
    </asp:UpdatePanel>
    <asp:Button ID="Button1" runat="server" OnClick="Button1_Click" Text="Button" />

    </div>
    </form>

Here we have simple Asp .Net Ajax application that shows server time. During process time UpdateProgress control will give message to users.

Code behind Default.aspx.cs:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

public partial class _Default : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {

    }

    protected void Button1_Click(object sender, EventArgs e)
    {
        System.Threading.Thread.Sleep(2500);
        Label1.Text = DateTime.Now.ToLongTimeString();
    }

}

When button1 is clicked then ajax process is executing. On Button1_click event it sleep the process for 2500 miliseconds to give UpdateProgress control chances to show message.
After that Label1 is set to server time.

Regards,
Agung Gugiaji