Simple progress message using asp.net AJAX

Sourav.Kayal
Posted by in ASP.NET category on for Beginner level | Points: 250 | Views : 4726 red flag

How to show simple progress message during ajax request in asp.net

Simple Update panel in AJAX

Lets look into how to implement Progress bar in asp.net AJAX. We will use Update panel to implement ajax in this application. When user performs heavy time consuming work in web application it takes time to complete. So , in that time it’s good to show progress message to user. Here we will see how to implement that step by step.

<%@ Page
Language="C#"
AutoEventWireup="true"
CodeBehind="ajaxTest.aspx.cs"
Inherits="ASP.NET.ajaxTest"
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server">
    </asp:ScriptManager>
    <asp:UpdateProgress ID="updProgress" AssociatedUpdatePanelID="UpdatePanel1" runat="server">
            <ProgressTemplate>
                Your request is processing..
            </ProgressTemplate>
        </asp:UpdateProgress>
     <asp:UpdatePanel ID="UpdatePanel1" runat="server">
        <ContentTemplate>
            <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
            <asp:Button ID="Button1" runat="server" Text="Button" onclick="Button1_Click" />
            <asp:Label ID="Label1" runat="server"></asp:Label>
        </ContentTemplate>
 
    </asp:UpdatePanel>
    </form>
</body>
</html>

At first you have to drag and drop one script manager into your aspx page. If you did not find any script manager in your toolbox  then at first you will have to install ajax toolkit in your system.  Here is script manager

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

Tag in this application. And in below of script manager we will put one more control called UpdateProgress control. Here is code for Update Progress

<asp:UpdateProgress ID="updProgress" AssociatedUpdatePanelID="UpdatePanel1" runat="server">
            <ProgressTemplate>
Your request is processing..
            </ProgressTemplate>
        </asp:UpdateProgress>

Within UpdateProgress one more child element is there called ProgressTemplate. This ProgressTemplate will contain actual message which will be showing during process. 

Step 2) Add below code in your .cs file

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.Services;
using System.Web.Script.Services;
 
namespace ASP.NET
{
    public partial class ajaxTest : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
 
        }
 
        protected void Button1_Click(object sender, EventArgs e)
        {
            System.Threading.Thread.Sleep(5000);
            this.Label1.Text ="you have enter : "+   this.TextBox1.Text;
        }
    }
}

And here is the output of above example


And after responds


Page copy protected against web site content infringement by Copyscape

About the Author

Sourav.Kayal
Full Name: Sourav Kayal
Member Level: Silver
Member Status: Member,MVP
Member Since: 6/20/2013 2:09:01 AM
Country: India
Read my blog here http://ctrlcvprogrammer.blogspot.in/
http://www.dotnetfunda.com
I am .NET developer working for HelixDNA Technologies,Bangalore in healthcare domain. Like to learn new technology and programming language. Currently working in ASP.NET ,C# and other microsoft technologies.

Login to vote for this post.

Comments or Responses

Login to post response

Comment using Facebook(Author doesn't get notification)