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
