asp.net 3.5：page_load（）でupdateprogressを表示する

StackOverflow https://stackoverflow.com/questions/911059

質問

私はVisual Studio 2008を使用してASP.NETサイトを構築しており、このように見えるページを持っています（ものが切り取られました）

<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();                
  }
}

LongrunningProcessが実行されている間に、updateProgressを表示するにはどうすればよいですか？ HandlerをオンクリックするボタンにlongrunningProcess（）を移動すると機能します。

役に立ちましたか？

解決

ajax.gifを表示する通常のdivを作成して、デフォルトで「処理」を表示します。

JavaScript Pageload（）関数では、AjaxのPageMethodsを使用してページにコールバックします。

   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秒以内に走らせていることを作ることに取り組んでいます。

他のヒント

  1. page_loadコードを新しい関数に移動します。
  2. AjaxタイマーをページのContentTemplateセクションに追加します。間隔を500に設定します。（1/2秒）
  3. デザインビューのタイマーオブジェクトをダブルクリックして、_ 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. 
}

Ajaxタイマーをページに置いて、1秒未満で設定します...最初のティックの後、それを無効にする必要があります。 （あなたはあなたの長い走行プロセスを複数回開始したくありません...）

その後、Ontimertickイベントでは、ページが完全にレンダリングされ、実行中にUpdateProgressを表示することができます。

ボタンをクリックするために持っていたコードをタイムチェックに移動できるようになりました...

上記のJbrooksのアイデアを使用しました（つまり、iframeも含むパネルの一部として進行状況インジケーターを表示するため、iframeが最初にロードされる前でも表示されます）が、単純化しました。アニメーションGIFのトップ。

JavaScriptまたはC＃Code-Behindは必要ありません。

これが関連する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 {z-index：2;位置：相対;上：-50px; }

jqueryと。

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

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

これは私にとってうまくいきました。ボディセクションの終わりに追加する必要があり、魅力のように機能しました。

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top