A Custom UpdateProgress Control

UpdateProgress

Introduction

In this article, I’d like to show you how to build a custom update progress control with the following aspects:

  • The whole page will be protected by other requests caused by clicking on the buttons located on a page.
  • The progress bar will be displayed
  • The button for aborting the process will be available.
  • The control doesn’t need to have a specified UpdatePanel. It will work for each UpdatePanel located on a page by default.
  • The update progress control will be available from JavaScript as an object. It means you can use it either for an UpdatePanel or for custom AJAX requests.

For understanding this article, you should know what is the UpdatePanel control and finally what is the UpdateProgress control.

Let’s have a look at the following screenshot to find out what the result will be:

pic1

Pic 1

As you can see, there is the yellow box approximately in the middle of the page. The rest of the page is covered by shadow and does not allow the users to click the buttons.

The article is divided into two parts. The first the theory and the second the examples/how to use. If you are not interested in the theory, then you can just skip it.

Theory

Imagine that we are in the following situation: we have an UpdatePanel control located in the page and we want to display a progress bar during an update of this UpdatePanel. The update of this panel is certainly made by an invisible HTTP request. What does ‘invisible’ mean? It means that the HTTP request is made by the XMLHTTPRequest object. The point is that the browsers are not giving feedback to the user during the HTTP request. For this reason, we should display some progress bar to the user to let him know that its command is in progress.

Firstly, you need to be informed about two stages:

  • The beginning of the request
  • The end of the request

It is very easy in the MS AJAX JavaScript library to achieve this goal. There is the object called PageRequestManager, and using it, you can register the events for the mentioned stages. Let’s have a look at how to get the instance of the PageRequestManager.


See full detail: http://www.codeproject.com/KB/ajax/UpdateProgressControl.aspx

Comments

Post a Comment

Popular posts from this blog

Asynchronous Socket Programming in C#

Image
Objective The objective of this article is to demonstrate a socket-based client/server application that will allow two-way asynchronous communication between a server and multiple client applications. Because this example uses asynchronous methods, the server application does not use threads to communicate to multiple clients (although internally the asynchronous communication mechanism uses threads at the OS level). The Difference Between Synchronous and Asynchronous Communication in Network Programming The key difference between synchronous and asynchronous communication can be explained with an example. Consider a server application that is listening on a specific port to get data from clients. In synchronous receiving, while the server is waiting to receive data from a client, if the stream is empty the main thread will block until the request for data is satisfied. Hence, the server cannot do anything else until it receives data from the client. If another clien
Read more

Url Routing MVC TUTORIAL

Image
This tutorial covers an introduction to the MVC pattern using Visual Basic. It also includes a brief overview of the URL routing assumptions that are a foundation to the implementation of the pattern. A sample application is created to demonstrate the fundamentals of this new web-application model. Implementing business rules and testing is also covered. Finally, the use of two alternative view engines, Silverlight and XML Literals, is coverd.
Read more

WCF Chat Sample

Image
The Chat sample demonstrates how to implement a multiparty chat application by using PeerChannel. Messages sent by any instance of a chat application are received by all other instances. To get samples and instructions for installing them Do one or more of the following: On the Help menu, click Samples . The Readme displays information about samples. Visit the Visual Studio 2008 Samples Web site. The most recent versions of samples are available there. Locate samples on the computer on which Visual Studio is installed. By default, samples and a Readme file are installed in drive :\Program Files\Microsoft Visual Studio 9.0\Samples\ lcid . For Express editions of Visual Studio, all samples are located online. For more information, see Locating Sample Files . Security Note: This sample code is intended to illustrate a concept, and it shows only the code that is relevant to that concept. It may not meet the security requirements for a specific environment, a
Read more