ASP.NET 3.5 .:Отображать процесс обновления во время Page_Load()

Question

Я создаю ASP.NET сайт с использованием Visual Studio 2008, и у меня есть страница, выглядящая следующим образом (материал обрезан)

<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>

page_load запускает длительный (> 5s) процесс

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

Как я могу отобразить UpdateProgress во время выполнения LongRunningProcess?Это действительно работает, когда я перемещаю вызов LongRunningProcess() в обработчик onclick кнопки.

Answer 1

Создайте обычный div, который показывает Ajax.gif таким образом, он показывает "обработку" по умолчанию.

В функции javascript pageLoad() выполните обратный вызов страницы, используя PageMethods от Ajax.

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

Метод, который вы вызываете в вашем файле .aspx.cs, должен быть статическим, он может принимать параметры и выглядит примерно так:

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

    }

Функция javascript, которую вы указали при вызове метода, будет запущена после завершения метода.Ему будут переданы результаты.В конце этой функции вы скрываете 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  

   }

А затем вы работаете над тем, чтобы все, что вы делаете, выполнялось менее чем за 1 секунду....

Answer 2

1. Переместите ваш код page_load в новую функцию.
2. Добавьте таймер AJAX в раздел ContentTemplate вашей страницы.Установите интервал равным 500.(1/2 секунды)
3. Дважды щелкните по объекту Timer в режиме конструктора, чтобы создать обработчик _tick.

4. В обработчике _tick, созданном на предыдущем шаге, вызовите следующий код

   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. 
   } 
   

Answer 3

Я бы поместил Ajax-таймер на страницу и установил его менее чем на секунду...Он будет запущен только один раз, и после его первого тика вам нужно отключить его, иначе он сработает снова.(вы же не хотите запускать свой длительный процесс более одного раза ...)

затем в событии OnTimerTick я бы запустил ваш длительный процесс, чтобы ваша страница полностью отображалась, и вы могли отображать свой UpdateProgress во время его выполнения.

вы должны иметь возможность переместить код, который у вас был для нажатия кнопки, на отметку времени...

Answer 4

Я использовал идею JBrooks выше (т.е.отображение индикатора выполнения как части панели, которая также включает Iframe, так что он отображается еще до первой загрузки Iframe), но упростил его:оформите iframe так, чтобы, когда он действительно появлялся, он находился поверх анимированного GIF-файла.

Не требует разработки кода на Javascript или C #.

Вот соответствующий ASPX, за которым следует CSS.Вам придется настроить параметр "сверху" в стиле, который будет покрывать используемое вами изображение.

            <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 .iframeOverlay { z-индекс:2;положение:относительный;Наверх:- 50 пикселей;}

Answer 5

С помощью Jquery.

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

Answer 6

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

У меня это хорошо сработало, просто пришлось добавить это в конец раздела BODY, и работает как по волшебству.