How to use UpdateProgress Control ASP.NET Ajax

Vuyiswamb
Posted by in ASP.NET AJAX category on for Beginner level | Views : 46292 red flag
Rating: 5 out of 5  
 1 vote(s)

Windows applications are more stable than web application. Even if the web is not that stable like a windows application, there are lot advantages of building Web Applications and one thing that we remember as ex-Windows programmers is that the Forms did not Flicker in front of the eyes of the user. This irritates a lot of users. Microsoft came back with a good solution for this problem and they introduced Ajax. In this Article am going to show you how you can create Flicker Free pages.

Introduction

Every user that uses any type of Application  needs to know for sure that something is happening every time a button is Clicked, every time a page load, and every take an action has been taken. It is a responsibility of a software developer to put press indicator where needed so that the user can know that in the background something is happening. In this Article I am going to demonstrate to you, on how to use an Updateprogress Control from our Ajax toolbox section.

Background

 In this Article I am going explain how to create your own date picker with the Controls you have on your Visual Studio tool.

Using the code

We are going to user C# as our language.

Start

Open Visual Studio and Create a New Website. Automatically you will have an empty page defined for you like this

<%@ Page Language="C#" AutoEventWireup="true"  CodeFile="Default.aspx.cs" Inherits="_Default" %>

 

<!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">

    <div>

   

    </div>

    </form>

</body>

</html>

 

Go to Design View and you will notice there is nothing on your page. Now open your Toolbox and add a ScriptManager first and add an Updateprogress control in your page as depicted in the Diagram below.



Please note that the Scriptmanager must be the first control. It must appear before all Ajax controls. After you have added the Updateprogress control, add an UpdatePanel in the same section of Ajax in your toolbox. Add the gif images that represent progress, there are many gif’s that you can download on the net to mimic that. In your Updateprogress control there is a property that we will use to link our Updateprogress with our Update Panel “AssociatedUpdatePanel” change it to the name of your UpdatePanel as depicted in the diagram below.


The Last Part is to Add a button, make sure the Button is in the Updatepanel. We are going to use this button to trigger the partial post and make a longer thread that will keep our progress indicator running while the thread is still executing.

And after you have added these controls you should have something like this in your mark-up.

 <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

 

<%@ Register Assembly="System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"

    Namespace="System.Web.UI" TagPrefix="asp" %>

 

<!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">

    <div>

   

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

        </asp:ScriptManager>

   

        <asp:UpdateProgress ID="UpdateProgress1" runat="server" AssociatedUpdatePanelID="UpdatePanel1">

            <ProgressTemplate>

                <img alt="" src="ajax-loader_Loading.gif"

    style="width: 100px; height: 100px" />

            </ProgressTemplate>

       

        </asp:UpdateProgress>

        <asp:UpdatePanel ID="UpdatePanel1" runat="server">

        </asp:UpdatePanel>

        </div>

 

    </form>

</body>

</html>

 

 

And the Design view should look like this


 

Double click the button and to to the click event of the button and add the Following code.

 

   protected void cmdshow_Click(object sender, EventArgs e)

  {

        Thread.Sleep(2000);

  

  }

 

The above code, create a thread that will sleep after 2000 miliseconds, this will make sure that the UpdateProgress will show the Gif image to show as long as this thread still execute

 

That means your whole server side code should look like this

 

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.Web.UI;

using System.Web.UI.WebControls;

using System.Threading;

public partial class _Default : System.Web.UI.Page

{

    protected void Page_Load(object sender, EventArgs e)

    {

 

    }

    protected void cmdshow_Click(object sender, EventArgs e)

    {

        Thread.Sleep(2000);

  

    }

}

When you are done, press F5 to run your Project, you will see a page with only a button as depicted below.


If you click the button , a thread will start and you will see the UpdateProgress image as depicted

 

Conclusion

This is how you create a progress bar in ASP.NeT Ajax. This it is a good idea to add this in your application when needed. Remember too much of a thing makes a thing tallied.

Thank you for visiting DotnetFunda.

 

Vuyiswa Maseko

 

Page copy protected against web site content infringement by Copyscape

About the Author

Vuyiswamb
Full Name: Vuyiswa Maseko
Member Level: NotApplicable
Member Status: Member,MVP,Administrator
Member Since: 7/6/2008 11:50:44 PM
Country: South Africa
Thank you for posting at Dotnetfunda [Administrator]
http://www.Dotnetfunda.com
Vuyiswa Junius Maseko is a Founder of Vimalsoft (Pty) Ltd (http://www.vimalsoft.com/) and a forum moderator at www.DotnetFunda. Vuyiswa has been developing for 16 years now. his major strength are C# 1.1,2.0,3.0,3.5,4.0,4.5 and vb.net and sql and his interest were in asp.net, c#, Silverlight,wpf,wcf, wwf and now his interests are in Kinect for Windows,Unity 3D. He has been using .net since the beta version of it. Vuyiswa believes that Kinect and Hololen is the next generation of computing.Thanks to people like Chris Maunder (codeproject), Colin Angus Mackay (codeproject), Dave Kreskowiak (Codeproject), Sheo Narayan (.Netfunda),Rajesh Kumar(Microsoft) They have made vuyiswa what he is today.

Login to vote for this post.

Comments or Responses

Login to post response

Comment using Facebook(Author doesn't get notification)