AJAX の UpdatePanel - "ステートフルな" コントロール UPDATE トリガ
私は大量のメールを受け取ります。マイクロソフトの開発者コミュニティで 7 年間働いている間に、私の電子メール アドレスはかなり広まりました。私が受信する電子メールは、1 日に約 1000 通です。コードを作成するように依頼してくる開発者も頻繁にいます。
通常、私にはそのような時間はありません。ところが、単純そうに見えて必ずしも答えが明白ではない問題を真剣に解決しようとしている開発者からメールを受け取ることがあります。
今週、ある開発者から UpdatePanel の更新に関する電子メールが送られてきました。
ASP.NET の真の強みの 1 つは、開発者のニーズや好みの開発スタイルに基づき、さまざまな方法でアプリケーションを作成できることです。
UpdatePanel コントロールはすばらしいとは思いますが、私は AJAX スタイルのプログラミングが好みなので、クライアント側コードをより多く作成し、JavaScript 対応の Web サービス呼び出しを介してサーバーと通信できるようにすることが多いのです。
問題は、この開発者が UpdatePanel を使用しており、ビジネス レイヤでの機能のために、ユーザーが送信ボタンを続けて 2 回クリックできないようにする必要があったことです。つまり、UpdatePanel を更新したボタンをユーザーがクリックする際に、UpdatePanel の更新が完了するまでそのボタンを無効にしておく必要がありました。
これは、クリックする前の状態です。
これは、クリックした後、UpdatePanel の更新が完了する前の状態です。
もちろん、実際のアプリケーションでは、なんらかの更新インジケータを追加する必要があります。
したがって、UpdatePanel の定義は次のようになります。
22 <div>
23 <asp:UpdatePanel ID="UpdatePanel1" runat="server">
24 <ContentTemplate>
25 <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
26 <br />
27 <br />
28 <asp:Label ID="Label1" runat="server" Text="Label" Width="622px"></asp:Label><br />
29 <br />
30 </ContentTemplate>
31 </asp:UpdatePanel>
32 </div>
33 <br />
34 <input id="SubButton" style="width: 618px" type="button" value="Call UpdatePanel Method" onclick="return SubButton_onclick()" />
35 <br />
36 <br />
HTML ボタン コントロール "SubButton" は UpdatePanel の外部にあり、UpdatePanel のトリガとして定義されていないことに注意します。
このボタンをオフにして UpdatePanel を更新するために、これをすべて JavaScript で行うことにします。
ASP.NET の Button コントロールを使用し、OnClientClick イベント ハンドラでボタンを無効にする場合、そのコードが最初に実行され、ポストバックは発生しません。
JavaScript の "SubButton_onclick()" 関数は次のようになります。
4 <script type="text/javascript">
5 <!--
6 function SubButton_onclick()
7 {
8 var prm = Sys.WebForms.PageRequestManager.getInstance();
9 var mybutton = document.getElementById('SubButton')
10 mybutton.disabled = true;
11 prm._doPostBack('UpdatePanel1', '');
12 }
13 // -->
14 </script>
このコードを説明する必要はありませんね。
ボタンが無効になり、UpdatePanel ポストバックが開始されます。
では、どのようにして更新が完了したことがわかるのでしょう。それがわからなければボタンを再度有効にするタイミングがつかめません。
37 <script type="text/javascript">
38 <!--
39 var prm = Sys.WebForms.PageRequestManager.getInstance();
40
41 prm.add_endRequest(EndRequest);
42
43 function EndRequest(sender,args)
44 {
45 var mybutton = document.getElementById('SubButton');
46 mybutton.disabled = false;
47 }
48 -->
49 </script>
幸運にも、PageRequestManager は完全にイベントによって制御されます。
"EndRequest" イベント ハンドラを追加するだけで、このボタンを再度有効にできます。
このように、この問題を簡単に解決できることがおわかりでしょう。
投稿 : 2008年4月13日 15:53:57 JoeStagner
Joe Stagner - https://www.misfitgeek.com/default,date,2008-04-13.aspx (英語) より