locked
UpdatePanel on Page Load RRS feed

  • Question

  • User2085410294 posted

    Hi,

    i have a ScriptManager and an UpdatePanel on my Page. Inside the UpdatePanel i have an LiteralControl.

    I need the following:

    1. On Page Load i do a long running operation.

    2. In this piece of time i need to show a progress/loading indicator only for this sections (the updatepanel)

    3. when the operation completes, i want to hide the indicator and show the result WITHOUT reloading the page

    I hope it was clear :)

    thanks in advance

    regards

    Yavuz

    Friday, March 14, 2014 7:45 AM

Answers

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Sunday, March 16, 2014 11:37 PM
  • User1208776063 posted

    Yavuz B.

    i want to have the page visible first complete and at the same time on page load i want to load the data in the background and show after its finished on the updatepanel.

    Add a timer control to the page and execute the background process in the first tick event. So, page immediately loads the remaining content such as buttons, gridviews and other html.  But, timer tick event will trigger loading the data in the background. Once the data is retrieved, timer can be disabled to prevent subsequent ticks

    <form id="form1" runat="server">
        <asp:ScriptManager runat="server" ID="sc" />    
        <asp:UpdatePanel runat="server" ID="up1">
            <ContentTemplate>
                <asp:Timer ID="timer1" runat="server" Interval="300" OnTick="timer1_Tick"></asp:Timer>
                <asp:Label ID="contentLabel" runat="server">
                    Please wait while data is being loaded.....
                </asp:Label>
            </ContentTemplate>
        </asp:UpdatePanel>
    </form>
    protected void timer1_Tick(object sender, EventArgs e)
    {            
        timer1.Enabled = false;
        //background process
        Thread.Sleep(5000);            
        contentLabel.Text = "Loaded";
    }

    You can keep a spinning image in the content panel so that it will display until the content is refreshed.  Try this approach and see if it works.

    EDIT:

    You can add UpdateProgress for the update panel containing Timer control.  Progress bar will be displayed when timer tick event gets triggered. This will also give an indication to the user that data is being loaded.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, March 17, 2014 12:53 AM

All replies

  • User2103319870 posted

    Hi,

    You can take a look at the Ajax UpdateProgress Control

    HTML Mark Up:

    <asp:ScriptManager ID="ScriptManager2" runat="server" />
            <asp:UpdateProgress runat="server" ID="PageUpdateProgress">
                <ProgressTemplate>
                    Please wait til the operation completes
                    <%--You can add your loading image here--%>
                    <img alt="progress" src="images/loading.gif" />
                </ProgressTemplate>
            </asp:UpdateProgress>
            <asp:UpdatePanel runat="server" ID="Panel">
                <ContentTemplate>
                    <asp:Button runat="server" ID="UpdateButton" OnClick="UpdateButton_Click" Text="Update" />
                </ContentTemplate>
            </asp:UpdatePanel>

    You can wrap your controls inside the updatepanel

    Code Behind:

     Protected Sub UpdateButton_Click(sender As Object, e As EventArgs)
            System.Threading.Thread.Sleep(5000);
        End Sub

    You can also check the below links for more details

    Alternatively you can check the below link

    Friday, March 14, 2014 7:54 AM
  • User-1205895928 posted

    i need to show a progress/loading indicator only for this sections (the updatepanel)

    You can use UpdateProgess control along with the Update panel

    <asp:UpdateProgress ID="UpdateProgress1" AssociatedUpdatePanelID="UpdatePanel1" runat="server">
        <ProgressTemplate>
          UpdatePanel1 updating...
        </ProgressTemplate>
        </asp:UpdateProgress>

    Hope it helps!

    Friday, March 14, 2014 7:56 AM
  • User2085410294 posted

    Thanks for the replies. But the problem is not the UpdateProgress, i know how to trigger such an Async via Button or other Control.

    But when i need to load the data on page load, the pages gets visible after everythign is completed. But i want to have the page visible first complete and at the same time on page load i want to load the data in the background and show after its finished on the updatepanel.

    Friday, March 14, 2014 8:05 AM
  • User948188685 posted

    Some suggestions:

    Display the progress message on the previous page before calling the next page that has the onload event. In many cases, the previous page will remain displayed until the process page is ready to render in the browser.<!--?xml:namespace prefix = "o" ns = "urn:schemas-microsoft-com:office:office" /--><o:p></o:p>

     <o:p></o:p>

    Your other option could be to execute the long running process in a hidden iframe. When the readystate of the iframe is complete then you know you can remove the progress message from the parent window and display any results<o:p></o:p>

     

     

    Friday, March 14, 2014 12:47 PM
    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Sunday, March 16, 2014 11:37 PM
  • User1208776063 posted

    Yavuz B.

    i want to have the page visible first complete and at the same time on page load i want to load the data in the background and show after its finished on the updatepanel.

    Add a timer control to the page and execute the background process in the first tick event. So, page immediately loads the remaining content such as buttons, gridviews and other html.  But, timer tick event will trigger loading the data in the background. Once the data is retrieved, timer can be disabled to prevent subsequent ticks

    <form id="form1" runat="server">
        <asp:ScriptManager runat="server" ID="sc" />    
        <asp:UpdatePanel runat="server" ID="up1">
            <ContentTemplate>
                <asp:Timer ID="timer1" runat="server" Interval="300" OnTick="timer1_Tick"></asp:Timer>
                <asp:Label ID="contentLabel" runat="server">
                    Please wait while data is being loaded.....
                </asp:Label>
            </ContentTemplate>
        </asp:UpdatePanel>
    </form>
    protected void timer1_Tick(object sender, EventArgs e)
    {            
        timer1.Enabled = false;
        //background process
        Thread.Sleep(5000);            
        contentLabel.Text = "Loaded";
    }

    You can keep a spinning image in the content panel so that it will display until the content is refreshed.  Try this approach and see if it works.

    EDIT:

    You can add UpdateProgress for the update panel containing Timer control.  Progress bar will be displayed when timer tick event gets triggered. This will also give an indication to the user that data is being loaded.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, March 17, 2014 12:53 AM