Webサービスによって設定されたASP.NET TreeViewのアニメーションをロードする

Question

私はASP.NETを初めて使い、AJAXについては何も知らないが、オンラインで参考になるコードを使用しようとしています（不合理に） 。

Webサービスによって作成されたTreeViewがあります。 TreeViewはかなり大量のデータをプルダウンしなければならないため、しばらくの間ページは空白になります。このページは、データセット全体がロードされるまでロードされたことを知らさず、使用しようとしたjavascriptはすべてロードされるまでアクティブ化されません。

ローディングアニメーションを表示する必要がありますが読み込まれていますので、私はキャッチ22のようです。私はUpdatePanelとUpdateProgressを使用しようとしましたが、これらは何もしていないようです - 少なくとも対応するC＃コードがなければ。

誰もが私の基本的なウォークスルー（私はそうすべきだと思う）に向けて、かなりシンプルで基本的な共通の問題を指導できるなら、私は感謝するだろう！

Answer 1

あなたは「ロードスピナー」を表示する必要がAJAX呼び出しを行うたびに、あなたはそのAJAX呼び出しを行う前に、その小さな画像を表示する必要があります。

次に、AJAXコールバック内で、スピナーイメージを削除し、代わりにデータを表示します。

こうして、AJAXコールが行われている間、画像が表示されます。

あなたはこのすべてに新しいしていると述べているので、私はそれが（ネイティブ-javascriptのアプローチと比較して）簡略化されているすべてを持っているとして、あなたは、jqueryのを使用することを示唆しています。この例では

Answer 2

、あなたは（それがロードしながら、ロード像を示す）asynchonouslyツリービューをロードするためのボタンをクリックし、ページを読み込むことができます。

TreeViewをUpdatePanelに入れますが、データソースにはまだバインドしないでください。また、TreeViewをロードするためのボタンを含めて（例のため）、UpdatePanelのTriggersの1つとして設定します。このように：

今

<asp:UpdatePanel ID="UpdatePanel1" runat="server"> 
    <ContentTemplate> 

     <asp:Button ID="Button1" runat="server" Text="Click here to load the TreeView" onclick="Button1_Click" /> 

     <asp:TreeView ID="TreeView1" runat="server"> 
      // TreeView details go here 
     </asp:TreeView> 

    </ContentTemplate> 
    <Triggers> 
     <asp:AsyncPostBackTrigger ControlID="Button1" EventName="Click" /> 
    </Triggers> 
</asp:UpdatePanel> 

、Button1_Clickでは、Webサービスを呼び出すことによってTreeViewにデータをバインドすることができます。

protected void Button1_Click(object sender, EventArgs e) 
{ 
    // This is where you would bind the data to your TreeView using the web service 
    TreeView1.DataSource = GetData(); 
} 

これはちょうどあなたのUpdatePanelがTreeViewでリロードする原因となります。

<script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script> 
<script type="text/javascript"> 
    function showSpinner() { 
     $("#<%= UpdatePanel1.ClientID %>").append("<img id='spinnerImg' src='/Images/ajaxSpinner.gif' ></img>"); 
    } 
</script> 

注：今、あなたはちょうどあなたが待っている間、ローディング画像を表示するJavaScript関数必要UpdatePanel終了するとリロード、それはロード画像なしでそうするだろう（そう、明示的にそれを削除する必要はありません） 。

Answer 3

私は最終的に私はこの記事に基づいて行うために必要なものを考え出し：

http://www.aspsnippets.com/Articles/Delay-Load-Lazy-Load-UpdatePanel-using-Timer-Control-in-ASP.Net.aspx

Jadarnal27が指摘したように、その一部が別の関数に出ツリービューの私のロードをseperatingの問題でした更新パネル内から呼び出すこと。

私の唯一の問題は、これが私たちのテストサーバー上では完全に機能するのに対し、私たちのプロダクションサーバーでは機能していないということです。私が見ているのは、進歩のない壊れたgifだけです。私の同僚によると、2つのサーバーの唯一の違いは、プロダクションには.Net 1.1,2.0,3.5,4.0があり、テストには2.0,3.5、および4.0しかありません。彼は、これを見ている前に、アップグレードのプロセスのどこかがうまくいかず、それらを修正する唯一の方法は、再インストールすることだと言います...