?
Solved

How do I use Ajax to display progress through steps..

Posted on 2010-09-13
6
Medium Priority
?
682 Views
Last Modified: 2012-08-14
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
0
Comment
Question by:MWilliamsBolton
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
6 Comments
 
LVL 5

Expert Comment

by:LlamaJoe
ID: 33668759
ultimately, you have to spawn off your long running process and use another mechanism to return periodic updates to the browser.

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
0
 
LVL 9

Accepted Solution

by:
DjDezmond earned 2000 total points
ID: 33670467
I used this code to execute a routine a number of times depending on how many files it found in a directory. Unfortunately, its in C#, so I will try convert to VB.net on the fly:

It works on the principle that you have Ajax installed, and a class named clsBackEnd() with all the relavant code inside it. One instance (per connected client) will be saved as a session variable and referenced when needed.

For the confirmation buttons to appear after step two, just add another div section (with visible field set to false) with the two buttons inside, when step 2 is reached, disable the timer, and make the div visible. set the onclick events to reenable the timer or not depending on which button is pressed.

I hope this is easy to follow...
<asp:Button ID="cmdImport" runat="server" Text="Import" onclick="cmdImport_Click" />

            <div id="Importing" runat="server" visible="false">
                <asp:UpdatePanel ID="ImportingPanel" UpdateMode="Conditional" runat="server">
                    <ContentTemplate>
                       <fieldset>
                           <legend>Importing spreadsheets</legend>
                            <%  
                              Dim BackendControl as clsBackend = DirectCast(Session("objBackEnd"), clsBackEnd)
                              Select case BackendControl.DoNextStep()
                                  Case 2
                                    'Next step is 2
                                    UpdateText.innerText = "something about next step 2"
                                  Case 3
                                    'Next step is 3
                                    UpdateText.innerText = "something about next step 3"
                                  Case 1
                                    'Steps have finished.
                                    AutoPostBack.Enabled = false
                                    Importing.Visible = false
                              End Select
                            %>
                            <br />
                            <div id="UpdateText" runat="server"></div>
                            <br />
                            <asp:Timer ID="AutoPostBack" Interval="10" Enabled="true" runat="server"></asp:Timer>
                        </fieldset>
                    </ContentTemplate>
                </asp:UpdatePanel>
                <br />
                <p style="font-weight:bold">
                    Please do not navigate away from this page during this process.
                </p>
            </div>




'SERVER SIDE'!!!!!!

'  Page Load'
        if Session("objBackEnd") = null Then            
            Dim BackEnd as clsBackEnd = new clsBackEnd()
            Session("objBackEnd") = BackEnd
        End If

'  cmdImport_Click
        ImportStatus.Visible = false
        Importing.Visible = true
        'Do Step one (referencing clsBackend if needed):
        Dim BackEnd as clsBackEnd = Session("objBackEnd")
        UpdateText.Text = "Something about step one being complete"

'  clsBackend()
        Private Dim _intStep as Integer = 1

        Function DoNextStep() as Integer
          Select case _intStep
             Case 1
               'Do step 1
             Case 2
               'Do step 2
             Case 3
                'Do final step 3
                _intStep = 1
                Return _intStep 
          End Select
          _intStep = _intStep + 1
          Return _intStep
        End Function

Open in new window

0
 
LVL 9

Expert Comment

by:DjDezmond
ID: 33670516
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.
0
 
LVL 6

Expert Comment

by:thaytu888888
ID: 33679129
- 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
0
 

Author Closing Comment

by:MWilliamsBolton
ID: 33892438
Sorry it has taken so long to respond..
0

Featured Post

What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

IntroductionWhile developing web applications, a single page might contain many regions and each region might contain many number of controls with the capability to perform  postback. Many times you might need to perform some action on an ASP.NET po…
OverviewThis article demonstrates a simple search form using AJAX. The purpose of the article is to demonstrate how to use the same code to render a page and javascript (JQuery) and AJAX to make subsequent calls to refine the results. The princip…
Michael from AdRem Software explains how to view the most utilized and worst performing nodes in your network, by accessing the Top Charts view in NetCrunch network monitor (https://www.adremsoft.com/). Top Charts is a view in which you can set seve…
How to fix incompatible JVM issue while installing Eclipse While installing Eclipse in windows, got one error like above and unable to proceed with the installation. This video describes how to successfully install Eclipse. How to solve incompa…
Suggested Courses

741 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question