8322

ASP.NET 3.5: Display UpdateProgress during Page_Load()

I am building an ASP.NET site using Visual Studio 2008 and have a page looking like this (stuff snipped)

<asp:Content ID="Content2" ContentPlaceHolderID="PageContentPlaceHolder" runat="server"> <asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional"> <ContentTemplate> the page here.. </ContentTemplate> </asp:UpdatePanel> <asp:UpdateProgress ID="UpdateProgress1" runat="server" DisplayAfter="100"> <ProgressTemplate> <div> <asp:Image ID="AjaxImage" runat="server" ImageUrl="Ajax.gif" /> </div> </ProgressTemplate> </asp:UpdateProgress> </asp:Content>

The page_load starts a long (>5s) process

protected void Page_Load(object sender, EventArgs e) { if (!IsPostBack) { LongRunningProcess(); } }

How can I display the UpdateProgress while the LongRunningProcess is running? It does work when I move the LongRunningProcess() call to a button onclick handler.

Answer1:

Create a normal div that shows the Ajax.gif so it shows "processing" by default.

In the javascript pageLoad() function, make a call back to the page using Ajax's PageMethods.

function pageLoad(sender, args) { PageMethods.getVersions(LoadVersionsCallback); }

The method you are calling in your .aspx.cs file has to be static, it can take parameters and looks something like:

[System.Web.Services.WebMethod] public static string getVersions() { StringBuilder sb = new StringBuilder(); ... etc. return sb.ToString(); }

The javascript function that you specified when you called the method will run when the method completes. It will be passed the results. At the end of this function you hide the Ajax.gif div.

function LoadVersionsCallback(result) { // do something with the results - I load a dropdown list box. ...etc. // here is where you hide your div holding the Ajax.gif }

And then you work on making whatever it is you are doing run in less than 1 second....

Answer2:

<ol> <li>Move your page_load code into a new function.</li> <li>Add a AJAX timer into the ContentTemplate section of your page. Set the interval to 500. (1/2 second)</li> <li>Double-click on the Timer object in Design view to create a _tick handler.</li> <li>

In the _tick handler created in the previous step, call the following code

protected void My_Timer_Tick(object sender, EventArgs e) { My_Timer_Name.Enabled = false; My_Page_Load_Function(); // Function created in step 1 above) } protected void My_Page_Load_Function() { System.Threading.Thread.Sleep(5000); // A delay to simulate doing something. lblMyLabel.Text = "Done!"; // Write output to page. } </li> </ol>

Answer3:

I would put a Ajax timer on the page and set it for less than a second... It will only run once and after its first tick then you need to disable it otherwise it will fire again. (you don't want to start your long running process more than once...)

then on the OnTimerTick event I would start your long running process that way your page fully renders and you can display your UpdateProgress while its running.

you out to be able to move the code that you had for your button click to the time tick...

Answer4:

I used JBrooks idea above (i.e. showing the progress indicator as part of a Panel that also includes the Iframe, so that it shows even before the Iframe first loads), but simplified it: style the iframe so that when it does appear it is on top of the animated GIF.

Requires no Javascript or C# code-behind.

Here's the relevant ASPX, followed by the CSS. You'll have to noodle with the "top" setting in the style to cover the image you use.

<asp:Panel ID="DetailPanel" runat="server" CssClass="submitBox detailPanel"> <asp:Table ID="Table1" runat="server" Width="100%"> <asp:TableHeaderRow ID="TableHeaderRow10" runat="server"> <asp:TableCell ID="TableHeaderCell" runat="server" Font-Bold="true" HorizontalAlign="Center"> Title Text </asp:TableCell> </asp:TableHeaderRow> <asp:TableRow> <asp:TableCell HorizontalAlign="Center"> <asp:Image ID="Image1" runat="server" ImageUrl="~/Images/animated_progress.gif" /> </asp:TableCell> </asp:TableRow> </asp:Table> <div class="iframeOverlay"> <iframe id="IframeDetail" runat="server" style="width: 100%; height: 100%;" /> </div> </asp:Panel>

.iframeOverlay { z-index: 2; position: relative; top: -50px; }

Answer5:

With Jquery.

<script> $(document).ready(function() { $('#<%= UpdateProgress1.ClientID %>').show(); }); </script>

Answer6:

<script> $(document).ready(function() { $('#<%= UpdateProgress1.ClientID %>').show(); }); </script>

This worked well for me, just had to add it to the end of the BODY section and works like a charm.

Recommend

  • C# Getting window's title by handle in Hebrew return question marks
  • Timezone display value with GMT offset from a given timezone?
  • java use Regular Expressions to generate a string [duplicate]
  • Why is JSON.NET adding all these backslashes
  • Hatch area using pcolormesh in Basemap
  • java.net.SocketTimeoutException on embedded tomcat with jersey
  • Why isn't \\\\ interpreted as a blackslash in this regex?
  • NRefactory: How do I access unresolved Named Arguments on a Property Attribute?
  • Regex for URL rewrite with optional query string parameters
  • iOS Localization Doesn't Work with More Than 63 Files
  • What is corresponding c++ data type to SQL numeric(18,0) data type?
  • Other than Linq to SQL does anything else consume INotifyPropertyChanging?
  • why calling cd shell command through system() or execvp() from a child process won't work?
  • Switch to popup in python using selenium
  • QLineEdit password safety
  • NetLogo BehaviorSpace - Measure runs using reporters
  • Spring security and special characters
  • sending/ receiving email in Java
  • JSON with duplicate key names losing information when parsed
  • How to set my toolbar fixed while scrolling android
  • Timeout for blocking function call, i.e., how to stop waiting for user input after X seconds?
  • Why winpcap requires both .lib and .dll to run?
  • AT Commands to Send SMS not working in Windows 8.1
  • Run Powershell script from inside other Powershell script with dynamic redirection to file
  • How to delete a row from a dynamic generate table using jquery?
  • Windows forms listbox.selecteditem displaying “System.Data.DataRowView” instead of actual value
  • Proper folder structure for lots of source files
  • Proper way to use connect-multiparty with express.js?
  • Load html files in TinyMce
  • How can I get HTML syntax highlighting in my editor for CakePHP?
  • C# - Getting references of reference
  • JTable with a ScrollPane misbehaving
  • coudnt use logback because of log4j
  • How does Linux kernel interrupt the application?
  • apache spark aggregate function using min value
  • unknown Exception android
  • Checking variable from a different class in C#
  • Sorting a 2D array using the second column C++
  • failed to connect to specific WiFi in android programmatically
  • How can I use threading to 'tick' a timer to be accessed by other threads?