07:11:47 AM
3HD0FFE1B
<%@ Page Language="C#" ID="test_Page" GeneratedSourceFile="Backoffice\test_Page.prg" %> <%@ Register Assembly="WebConnectionWebControls" Namespace="Westwind.WebConnection.WebControls" TagPrefix="ww" %> <!DOCTYPE html> <html> <head> <title>Progress Bar and AJAX Demo</title> <link href="westwind.css" rel="stylesheet" type="text/css" /> </head> <body> <form id="form1" runat="server"> <h1>Progress Bar</h1> <div class="toolbarcontainer"> <a href="default.htm" class="hoverbutton"><img src="../images/home.gif" /> Sample Home</a> | <a href="progressBar.wcsx" class="hoverbutton"><img src="../images/refresh.gif" /> Reset Form</a> | <small>Rendered at: <%= DateTime() %></small> </div> <div class="descriptionheader" > This sample demonstrates how to asynchronously run a task on the server while displaying progress in the current page by utilizing AJAX. Using this mechanism it's possible to run long running tasks in the background and continue working on the client side while displaying context specific progress. </div> <div class="containercontent" style="margin: 0 auto;text-align: left;"> <input id="btnStartProcessing" type="button" value="Start Processing" onclick="StartProcessing()" /> <input id="btnStopProcessing" type="button" value="Cancel Processing" onclick="Cancelled = true;" /> <div style="margin: 20px;"> <ww:wwWebProgressBar runat="server" id="Progress" Text="Waiting to get started" Width="500px" > </ww:wwWebProgressBar> </div> <!-- Demonstrate manually updating the progress bar --> <input type="text" id="txtPercent" value="58" size="4"/> <input id=btnSetPercent" type="button" value="Set Percentage" onclick="UpdateProgressBar('Progress',$('#txtPercent').val(),'Updated...')" /> <hr /> <div id="lblResult"></div> <blockquote> This example demonstrates using the wwWebProgressBar control to show progress of an operation running on the server. The server form has three client functions: StartProcessing, UpdateProgress and ProcessComplete, which are fired from script code using the wwMethodCallbackControl that handles the remote processing. <br /> <br /> The code pings this server once a second and requests updated status information - an object returned from the server that contains a message a percentage and completion and cancellation status in this case. If complete the client calls the server again to ProcessComplete which returns a final result in the form of a DataGrid generated string to the client. <br /> <br /> All of this happens in the context of a single page, without post backs. Notice that during the update process the page remains live so you can for example set the percentage manually with the percentage button. The value will be set briefly until the next server update brings back more information and updates the progress bar again. </blockquote> <hr /> <ww:wwWebShowCode ID="ShowCode0" runat="server" DisplayMode="WCSX" Text="Show WCSX" /> <ww:wwWebShowCode ID="ShowCode1" runat="server" DisplayMode="VFP" Text="Show PRG" /> </div> <script type="text/javascript"> var Cancelled = false; var TimerInterval = 500; function StartProcessing() { Cancelled = false; $('#btnStartProcessing').attr("disabled",true); $('#btnStopProcessing').attr("disabled",false); $('#lblResult').html(""); // *** Progress_Ajax is the name of the Progress Control _Ajax for the wwWebAjax instance Progress_Ajax.callMethod("StartProcessing_Callback",[], function(result) { // *** Start the chain - request progress information in timeout seconds window.setTimeout(GetProgress,TimerInterval); }); } function GetProgress() { // *** Iniate a callback to the server to get the progress // *** Pass cancelled flag as parameter so server can now if to cancel Progress_Ajax.callMethod("UpdateProgress_Callback", [Cancelled], // this returns the server's response as an object // result is ProgressEventArgs returned from server function(result) { // Update the progress bar settings UpdateProgressBar("Progress",result.percent,result.message); if (result.cancelled) { alert('Operation cancelled on the server.'); $('#btnStartProcessing').attr("disabled",false); $('#btnStopProcessing').attr("disabled",true); } else if (result.completed || result.percent >= 100) ProcessComplete(); else window.setTimeout( GetProgress, TimerInterval ); }); } function ProcessComplete() { // *** pick up the final result Progress_Ajax.callMethod("ProcessComplete_Callback",[], function(Result) { $('#btnStartProcessing').attr("disabled",false); $('#btnStopProcessing').attr("disabled",true); $("#lblResult").html("<center>" + Result + "</center>"); UpdateProgressBar('Progress',100,"Customer List Download complete"); }); } </script> </form> </body> </html>
Luca,
Can you post the code for your WCSX Page too?
Marty
Dear Marty,
I thank you very much for attention.
I am demoralized because after having spent much time to study Progressbar examples still I am not able to get it working.
I made this example using Rick's WCSX and PRG, I tested to copy a big 50 Mb file for 10 times, but the Progressbar does not progress during copy process, instead the Progressbar shows 10% at the end of copy process. I do not understand what is wrong.
Take a look at the sample on the Web site here: http://www.west-wind.com/wconnect/webcontrols/progressBar.wcsx This sample uses Ajax callbacks to provide what it seems you are wanting. Go to the bottom of the page and use the Show WCSX button and the Show PRG button to see the code in both the Web Page and the Code Behind page. Perhaps this will help some... Marty
Hello Luca,