MWilliamsBolton
asked on
How do I use Ajax to display progress through steps..
I am using ASP.Net with and I have read how to use the update progress control panel to display something while the page processes.
I want to take theis a step further and without going into the detail of exactly what the page is doing, if somebody could demo the following basics for me, that would be great..
I am trying to get my head around presenting the user with detailed progress as the server processes a number of steps (interacting with a database with some transactions that could take a long time).
Between some steps, I need the user to have the option to cancel.
Now, traditionally, there would be a lot of complete page post backs but I understand that Ajax can make this much simpler and look neater without posting the whole page back all the time.
The exercise below would probably do a lot for me in terms of understand the power of Ajax and ithe principals would be very useful to me in a lot of places.
Could somebody please tell me the aspx code and the VB (sorry, VB is the preferred language) for the following steps:
1. the page opens and a button is presented that says "go".
2. When the user presses go, an update panel says.."Doing step 1." This message is displayed as soon as the user presses go.
3. After 10 seconds (system.threading.wait is OK for now), the user is presented with the previous text plus on the next line.. "Completed step 1, doing step 2..."
4. After 10 seconds, the progress text is appended with "Completed step 2... do you want to do step 3?" Two buttons are presented with "Yes" and "no"
5. If the user presses "Yes", the buttons go away and the system waits for another 10 seconds and the progress text is appended with "Completed step 3. Done"
6. If the user presses no, the buttons go away and progress text is appended with "User decided to stop"
Thanks
I want to take theis a step further and without going into the detail of exactly what the page is doing, if somebody could demo the following basics for me, that would be great..
I am trying to get my head around presenting the user with detailed progress as the server processes a number of steps (interacting with a database with some transactions that could take a long time).
Between some steps, I need the user to have the option to cancel.
Now, traditionally, there would be a lot of complete page post backs but I understand that Ajax can make this much simpler and look neater without posting the whole page back all the time.
The exercise below would probably do a lot for me in terms of understand the power of Ajax and ithe principals would be very useful to me in a lot of places.
Could somebody please tell me the aspx code and the VB (sorry, VB is the preferred language) for the following steps:
1. the page opens and a button is presented that says "go".
2. When the user presses go, an update panel says.."Doing step 1." This message is displayed as soon as the user presses go.
3. After 10 seconds (system.threading.wait is OK for now), the user is presented with the previous text plus on the next line.. "Completed step 1, doing step 2..."
4. After 10 seconds, the progress text is appended with "Completed step 2... do you want to do step 3?" Two buttons are presented with "Yes" and "no"
5. If the user presses "Yes", the buttons go away and the system waits for another 10 seconds and the progress text is appended with "Completed step 3. Done"
6. If the user presses no, the buttons go away and progress text is appended with "User decided to stop"
Thanks
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
by the way, that works on the assumption that you dont initiate step one from the cmdImport button. Making the "Importing" div visible, initialises the timer to start ticking, which automatically executes step one on the first timer tick. Please ignore where I have said "'Do step one" in the server side code, in fact there you would be placing your text that states step one is about to begin...
Also ensure the div section containing the two buttons, is somewhere in the "UpdatePanel" section.
I would imagine you will need to tinker about with this abit before you can use it, but the general idea and principle is there. But please bear in mind, this will execute your steps sychronously, which means if the database read/write routines you plan to execute are quite juicy, then there will be a delay before the postback completes.
Also ensure the div section containing the two buttons, is somewhere in the "UpdatePanel" section.
I would imagine you will need to tinker about with this abit before you can use it, but the general idea and principle is there. But please bear in mind, this will execute your steps sychronously, which means if the database read/write routines you plan to execute are quite juicy, then there will be a delay before the postback completes.
- Here is an example have just made for you, instead of using Update Panel, I advise you to use web service which is better, please rename the WebService_asmx to WebService.asmx because the EE server doesn't allow me to upload file with .asmx in extension.
WebSite4.zip
WebSite4.zip
ASKER
Sorry it has taken so long to respond..
this article is older - but the principals are still correct - http://msdn.microsoft.com/en-us/magazine/cc163393.aspx
or here is another version using MVC and jquery
http://weblogs.asp.net/seanmcalinden/archive/2009/11/15/asynchronous-processing-in-asp-net-mvc-with-ajax-progress-bar.aspx