difference between updatepanel,update progress in ajax

thank you,

               vijaya.

Hi,

ASP.NET UpdatePanel controls enable you to build rich, client-centric Web applications. By using UpdatePanel controls, you can refresh selected parts of the page instead of refreshing the whole page with a postback. This is referred to as performing a partial-page update.

 

The UpdateProgress control provides status information about partial-page updates in UpdatePanel controls. You can customize the default content and the layout of the UpdateProgress control. To prevent flashing when a partial-page update is very fast, you can specify a delay before the UpdateProgress control is displayed.

Thanks -- Vj

http://dotnetvj.blogspot.com

thank u...

         james

When you use the UpdatePanel control you probably also want to display some kind of progress bar to the user so they can see when the async. postback starts and when it’s done, at least something that indicate that some work are being done and they need to wait until it’s done. This can be done by using the UpdateProgress control shipped with ASP.Net Ajax 1.0 Extension. If you use the UpdatePanel control and specify an AsyncPostBackTrigger and also associate the UpdateProgress to an UpdaetPanel, the UpdateProgress control will not be displayed. For example:

 

 

  

      ...
  
  
     

  

  
       Please wait, update in progress
  

 

The code above will not display the UpdateProgress when we press the Button1 button, even if we have specified an AsyncPostBackTrigger. In that case, the UpdateProgress control cannot determine automatically that an asynchronous postback has been triggered. So we need to use client-side script to display and hide the UpdateProgress control, to do that we use the PageRequestManager and hook up to the InitalizeRequest and EndRequest event. Here is an example:

 

 

To hook up to the events we first need to get the Instance of the PageRequestManager, this can be done by using the Sys.WebForms.PageRequestManager.getInstance method:

 

var prm = Sys.WebForms.PageRequestManager.getInstance();

 

Next we hook up to the InitializeRequest and EndRequest event. This can be done by using the add_initializeRequest and add_endRequest methods of the PageRequestManager. To hook up to an event, we pass the name of the client-side method that should be executed when the event is trigged:

 

prm.add_initializeRequest(InitializeRequest);

prm.add_endRequest(EndRequest);

 

function InitializeRequest(sender, args)

{

}

 

function EndRequest(sender, args)

{

}

 

The method we specify uses two arguments, the sender and the args (event args), very similar to the EventHandler delegate in .Net. The InitializeRequest event will be trigged when the async. call to the server starts (when the request are initialized) and the EndRequest will be trigged when the request ended (when we got the results from the server after an async. call).

 

When we have hooked up to the events we need to ad some code to the Inistalize- and EndRequest methods. First we make sure to cancel the async. postback if there are anyone in progress. To cancel an async. postback we first want to see if an async. postback is in progress, this can be done by using the PageRequestManager’s get_isInAsuncPostBack method, and to cancel the async. postback we make a call to the set_cancel method of the “args” argument passed to the InitialzeRequest method and pass the value true:

 

if (prm.get_isInAsyncPostBack())

    args.set_cancel(true); 

 

The next step to do in the InitialzeRequest is to see if the Button1 is the element that did the postback, and if that is the case, we get the element of the UpdateProgress control and display it. To check if Button1 was the element that did the postback we can use the get_PostBackElement method of the “args” arguments to get the element, and use its Id property to see if it has the same id as our button that did the postback. If it has the same id, we use the document.getElementById (when we use the ASP.Net Ajax, we can use the short cut $get that is the same as document.getElementById) to get the UpdateProgress element and display it by using the style.display property:

 

postBackElement = args.get_postBackElement();

 

if (postBackElement.id == 'Button1')

   $get('UpdateProgress1').style.display = 'block';

 

Now we are done with the InitializeRequest method and the method would look like this:

 

var postBackElement;

 

function InitializeRequest(sender, args)

{

   if (prm.get_isInAsyncPostBack())

      args.set_cancel(true);

 

   postBackElement = args.get_postBackElement();

 

   if (postBackElement.id == 'Button1')

      $get('UpdateProgress1').style.display = 'block';

}

 

Now when we have displayed the UpdateProgress control when an async. postback begins, we also need to hide it when the EndRequest is ended.

 

To hide the UpdateProgress control, we need to get its element and then use the style.display property to hide the element. We will also make sure to only hide the UpdateProgress if the Button1 did the async. postback, we can do that by using the postBackElement variable that is already set to an element in the InitializeRequest method:

 

if (postBackElement.id == 'Button1')

   $get('UpdateProgress1').style.display = 'none';

 

As you can see in the code above, we pass the id of the UpdateProgress control to the $get method to get the element of the UpdateProgress control. To hide the UpdateProgress element, we set its style.display property to ‘none’. Here is the whole EndRequest method:

 

function EndRequest(sender, args)

{

    if (postBackElement.id == 'Button1')

       $get('UpdateProgress1').style.display = 'none';

}

 

Here is the whole client-side script (Make sure to add it after the ScriptManger control, if you don’t do that you will get an exception that the Sys is not defined):