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

About these ads

5 responses to “Introduction to Asp .Net Ajax – 2 (UpdateProgress)

  1. knowledgeable post .. new to the development world I was looking for such posts… being enrolled at http://www.wiziq.com/course/46-INTERVIEW-PREPARATION-COURSE-BY-SHIVPRASAD-KOIRALA I’m keeping an eye on the latest development.

  2. Pingback: Starting & Aborting/Cancelling Asp .Net Ajax Request Techniques | Enlighten Application Developer Journals

  3. Pingback: Introduction To Asp .Net Ajax Client Side Development ($get, $addhandler, $removehandler, Sys.Application, Sys.WebForms, Sys.Net) | Enlighten Application Developer Journals

  4. Pingback: Introduction To Asp .Net Ajax 3 (ScriptManagerProxy) | Enlighten Application Developer Journals

  5. Pingback: Introduction To Asp .Net Ajax 4 (Timer) | Enlighten Application Developer Journals

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s