翻訳: ヴァレンス
時間: 2007-06-11
原文: http://ajax.asp.net/docs/overview/AJAXClientEvents.aspx
どなたでもコメントを歓迎します。積極的に修正していきます。
はじめに [はじめに]
Microsoft Ajax は、ASP.NET 2.0 ページのサーバー側のライフ サイクル イベントと同様のクライアント側のライフ サイクル イベントを提案します。これらのクライアント側イベントにより、従来のポストバックと非同期ポストバック (部分的なページ更新) の両方に合わせてユーザー インターフェイスをカスタマイズできます。また、ページのライフサイクル全体にわたってカスタム スクリプトを管理および使用するのにも役立ちます。
これらのクライアント側イベントは、Microsoft の AJAX Libray クラスで提案されています (AJAX Libray クラスで見つけることができます)。これらのクラスは、AJAX でサーバー コントロールを読み込むときに自動的にインスタンス化 (インスタンス化?) されます。これらのクラスは、イベントをイベント プロバイダー ハンドラーにバインドできるようにいくつかの API を提供します。また、AJAX ライブラリはブラウザに依存しないため、作成したコードはサポートされているすべてのブラウザで動作します。
主要なイベントは、リクエストと非同期ポストバックを開始するアプリケーション インスタンスのロード イベントです。ロード ハンドラー イベント中にスクリプトが実行されると、すべてのスクリプトとコンポーネントがロードされ、使用できるようになります。 UpdatePanel コントロールを使用してページの一部が更新される場合、すべてのクライアント イベントの中で最も重要なのは PageRequestManager クラスです。これらのクライアント側イベントにより、特定のシナリオを実装できます。例としては、ポストバックを元に戻す、ポストバックの優先度を高く設定する、更新時の UpdatePanel の対話性を向上させるなどがあります。
これらのイベントは、ページの作成やコンポーネントの作成に非常に役立ちます。 Web 開発者の場合は、ページのロードとアンロードにカスタム スクリプトを使用できます。
サーバー側のライフ サイクル イベントの詳細については、Microsoft AJAX クラス ライブラリの「ASP.NET ページ ライフ サイクルの概要」を参照してください。AJAX
Web ページのクライアント
ライフ サイクルには 2 つの主要なクラスが提案されています。 Application クラスと PageRequestManager クラス。
Application クラスは、ブラウザーが ScriptManager コントロールを含むページを要求するとインスタンス化されます。 Application クラスはサーバー側の Page コントロールに似ていますが、Control クラスからも継承されますが、(サーバー側のイベントと比較して) いくつかの追加機能があります。同様に、Application は Sys.COMponent クラスを継承し、クライアントのライフサイクル中に多くの操作可能なイベントも提供します。
ページに ScriptManager と 1 つ以上の UpdatePanel コントロールが含まれている場合、ページは部分的な更新効果を実現できます。その場合、ブラウザは PageRequestManager クラスのインスタンスを使用できます。 PageRequestManager によって提供されるクライアント イベントはすべて、非同期ポストバックに関するものです。部分ページの生成の詳細については、「部分ページ レンダリングの概要」を参照してください。
クライアント イベントのハンドラーの追加 [クライアント イベントのハンドラーの追加]
ここで、Application クラスと PageRequestManager クラスの add_eventname メソッドと reomve_eventname メソッドを使用して、イベントを追加または削除します。次の例は、MyLoad という名前のハンドラーを Application オブジェクトの init イベントに追加する方法を示しています。
Sys.Application.add_init(MyInit);
関数 MyInit(送信者) {
}
Sys.Appplication.remove_init(MyInit);
コメント; この例では、add_eventname メソッドとremove_eventname メソッドを使用する構文のみを示します。このイベントの使用方法の詳細については、後のトピックで説明します。
アプリケーションのロード イベントとアンロード イベントの処理 [操作アプリケーションのロード イベントとアンロード イベント]
アプリケーション オブジェクトのロード イベントとアンロード イベントを操作するには、操作イベントに明示的にバインドする必要はありません。代わりに、予約キーワード pageLoad および pageUnload を使用して関数を直接作成できます。次の例は、アプリケーションのロード イベントにアクションを追加する方法を示しています。
関数 pageLoad(sender, args) {
}
他のクライアント クラスのイベント [その他のクライアント クラス]
このトピックでは、Application クラスと PageRequestManager クラスによって提供されるイベントのみについて説明します。 Microsoft の AJAX クラス ライブラリには、DOM 要素イベントを追加、クリア、削除するための次のクラスも含まれています。これらのクラスには次のものが含まれます。
Sys.UI.DomEvent.addHandler メソッドまたは短縮表現の $addHandler があります
。 Sys.UI.DomEvent.clearHandlers メソッドまたは短縮表現の $clearHandlers があります。
Sys.UI.DomEvent.removeHandler メソッドまたは短縮表現の $ があります。
このトピックでは、
DOM 原則によって提供されるイベントについては説明しません。
Application クラスと PageRequestManager クラスのクライアント イベント [Application クラスと PageRequestManager クラスのクライアント イベント]
次の表に、AJAX ASP.NET ページで使用できる Application クラスと PageRequestManager クラスのクライアント イベントを示します。イベントの順序については、後のトピックで説明します。
イベント
(イベント名)
説明
（説明する）
初期イベント
【初期化イベント】
このイベントは、すべてのスクリプトがロードされた後、オブジェクトが作成される前に発生します。コンポーネント (スクリプト) を作成する予定がある場合、init イベントは、コンポーネント (スクリプト) をページに追加するライフサイクルのポイントを提供します。このコンポーネントは、ライフサイクル内の他のスクリプトから呼び出すことができます。 Web 開発者の場合、ほとんどの場合、init イベントの代わりにload イベントを使用することをお勧めします。
init イベントは、ページの生成が開始されるときに 1 回だけ作成されます。後続の部分的なページ更新では、init イベントはトリガーされません。
ロードイベント
【ローディングイベント】
このイベントは、すべてのスクリプトがロードされ、$create で初期化されたすべてのプログラム オブジェクトが作成された後に発生します。このイベントは、非同期ポストバックを含む、サーバーへのすべてのポストバックによって発生します。
Web 開発者の場合は、load イベント自体によって提供される pageLoad という関数を作成できます。 pageLoad オペレーション (ハンドラー) は、add_load メソッドを通じてロード イベントに追加されたオペレーションの後に呼び出すことができます。
ロード イベントには、eventargs パラメーターとして Sys.ApplicationLoadEventArgs オブジェクトが必要です。このパラメータを使用すると、ページに部分更新を表示する必要があるかどうかを決定できます。また、最後の読み込みイベントが発生した後にどのコンポーネントを作成するかを決定することもできます。
アンロードイベント
【アンインストールイベント】
すべてのオブジェクトが解放される前、およびブラウザの window.unload イベントが発生する前に発生します。
アンロード イベントは、システム自体が提供する pageUnload と呼ばれる関数を通じて処理できます。 pageUnload イベントは、ページがブラウザーにアンロードされるときに呼び出されます。このイベント中に、コードによって占有されているすべてのリソースを解放する必要があります。
propertyChangedイベント
【属性変更イベント】
コンポーネントのプロパティが変更されたときに発生します。アプリケーション オブジェクトは、このイベントを Component クラスから継承します。このイベントは、開発者がプロパティ値を設定するときに Sys.Component.raisePropertyChange メソッドを呼び出した場合にのみ発生します。
詳細については、「カスタム コンポーネント プロパティの定義」および「PropertyChanged イベントの発生」を参照してください。
プロパティ変更イベントには、eventargs パラメーターとして Sys.applicationLoadEventArgs オブジェクトが必要です。
イベントの処理
【リリースイベント】
このイベントは、アプリケーション インスタンスが解放されるときに発生します。アプリケーション オブジェクトは、このイベントを Component クラスから継承します。
初期化要求イベント
【初期化要求イベント】
このイベントは、非同期リクエストの開始時に発生します。このイベントを使用して、従来のポストバックをキャンセルすることができます。たとえば、非同期ポストバックが優先されるようにすることができます。
初期化要求イベントには、Sys.WebForms.InitializeRequestEventArgs オブジェクトによって提供されるeventargs パラメーターが必要です。このオブジェクトは、ポストバックと基礎となるリクエストを引き起こすオブジェクトの便利な要素を提供します。このイベントは cancel 属性も公開します。 cancel を true に設定すると、新しいポストバックはキャンセルされます。
beginRequest イベント
【リクエストイベント開始】
このイベントは、サーバーへの非同期ポストバックが開始される前に発生します。ポストバック プロセスがすでに存在する場合は、(abortPostBack メソッドを使用して) 停止されます。このイベントを使用して、リクエスト ヘッダーを設定したり、リクエストが進行中であることを示す興味深い (アニメーション) プロンプトをページに表示したりできます。
このイベントには、eventargs パラメーターとして Sys.WebForms.BeginRequestEventArgs オブジェクトが必要です。このオブジェクトは、ポストバックを発生させるための便利な要素と、基礎となるリクエスト オブジェクトを提供します。
ページ読み込みイベント
[ページ読み込みイベント]
サーバーが非同期ポストバックを受信したときに、ページ上のコンテンツが更新される前に発生します。このイベントを使用して、更新が必要なコンテンツにカスタムのトランジション効果を提供できます。
このイベントには、eventargs パラメーターとして Sys.WebForms.PageLoadingEventArgs オブジェクトが必要です。このオブジェクトは、最新の非同期ポストバックの結果としてどのパネルが削除および更新されるかに関する有用な情報を提供します。
pageLoaded イベント
【ページ読み込み完了イベント】
ページのすべてのコンテンツが同期または非同期ポストバック結果によって更新された後に発生します。同期ポストバック中はパネルの作成のみが可能ですが、非同期ポストバック中はパネルの作成と更新が可能です。このイベントを使用して、更新が必要なコンテンツのカスタム変更効果を管理できます。
このイベントには、eventargs パラメーターとして Sys.WebForms.PageLoadedEventArgs オブジェクトが必要です。このオブジェクトは、最新のポストバック中にどのパネルが更新および作成されたかに関する有用な情報を提供します。
endRequest イベント
【終了リクエストイベント】
応答として非同期ポストバックが完了してページが更新された後、またはリクエスト中にエラーが発生した後に発生します。エラーが発生した場合、ページは更新されません。このイベントを使用して、カスタマイズされたエラー メッセージを訪問者に提供したり、エラー ログに記録したりできます。
このイベントには、eventargs パラメーターとして Sys.WebForms.EndRequestEventArgs オブジェクトが必要です。このオブジェクトは、発生したエラーと、エラーが処理されたかどうかに関する有用な情報を提供します。また、対応するオブジェクトに関する入手可能な情報も提供します。
イベント順序の例 [イベント順序の例]
次の例は、2 つの入れ子になった UpdatePanel コントロールを含むページでクライアント側イベントがどのように発生するかを示しています。親パネルのボタンをクリックすることと、埋め込みパネルのボタンをクリックすることの違いに注意してください。親パネルのボタンにより親パネルが更新され、その中に埋め込まれているパネルが削除されて再作成されます。埋め込みパネルを含むボタンでは、埋め込みパネルのみが更新されます。
ページコード:
1<%@ ページ言語="C#" %>
2
3<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
4「 http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd 」
5
6<script runat="サーバー">
7
8</script>
9
10<html xmlns=" http://www.w3.org/1999/xhtml " >
11<head runat="サーバー">
12 <title>クライアント イベントの例</title>
13 <style type="text/css">
14 #OuterPanel { 幅: 600 ピクセル; 高さ: 200 ピクセル; 青一色
15 #NestedPanel {幅: 596px; 高さ: 60px; 境界線: 2px 実線の緑色;
16 マージン左:5 ピクセルマージン右:5 ピクセル;}
17 </スタイル>
18</頭>
19<ボディ>
20 <form id="form1" runat="server">
21 <ディビジョン>
22 <asp:ScriptManager ID="ScriptManager1" runat="server">
23 <スクリプト>
24 <asp:ScriptReference Path="ClientEventTest.js" />
25 </スクリプト>
26 </asp:スクリプトマネージャー>
27 <asp:UpdatePanel ID="OuterPanel" UpdateMode="Conditional" runat="server">
28 <コンテンツテンプレート>
29 外側パネルと内側パネルの内側からのポストバックは、
30 の非同期ポストバック。PRM = Sys.WebForms.PageRequestManager。APP = Sys.Application。
31
32<br /><br />
33 <asp:Button ID="OPButton1" Text="アウター パネル ボタン" runat="server" />
34 最終更新日
35 <%= DateTime.Now.ToString() %>
36<br /><br />
37
38 <asp:UpdatePanel ID="NestedPanel" UpdateMode="Conditional" runat="server">
39 <コンテンツテンプレート>
40 <asp:Button ID="NPButton1" Text="ネストされたパネル 1 ボタン" runat="server" />
41 最終更新日
42 <%= DateTime.Now.ToString() %>
43<br />
44 </ContentTemplate>
45 </asp:UpdatePanel>
46 </ContentTemplate>
47 </asp:UpdatePanel>
48
49 <input type="button" onclick="Clear();" value="Clear" />
50
51 <asp:Button ID="FullPostBack" runat="server" Text="フル ポストバック" />
52 <a href=" http://www.microsoft.com">テストウィンドウのアンロード</a>
53<br />
54 <span id="ClientEvents"></span>
55 </div>
56 </form>
57</body>
58</html>
59
スクリプトコード:
1// アプリケーション イベント ハンドラーを接続します。
2var app = Sys.Application;
3app.add_load(アプリケーションロード);
4app.add_init(ApplicationInit);
5app.add_disposing(アプリケーションの廃棄);
6app.add_unload(アプリケーションアンロード);
7
8
9//コンポーネント開発者向けのアプリケーション イベント ハンドラー。
10function ApplicationInit(送信者) {
11 var prm = Sys.WebForms.PageRequestManager.getInstance();
12 if (!prm.get_isInAsyncPostBack())
13 {
14 prm.add_initializeRequest(InitializeRequest);
15 prm.add_beginRequest(BeginRequest);
16 prm.add_pageLoading(ページロード);
17 prm.add_pageLoaded(PageLoaded);
18 prm.add_endRequest(EndRequest);
19}
20 $get('ClientEvents').innerHTML += "APP:: アプリケーションの初期化。<br/>";
21}
22関数 ApplicationLoad(送信者, 引数) {
23 $get('ClientEvents').innerHTML += "APP:: アプリケーションの読み込み。";
24 $get('ClientEvents').innerHTML += "(isPartialLoad = " + args.get_isPartialLoad() + ")<br/>";
25}
26関数 ApplicationUnload(送信者) {
27alert('APP::アプリケーションのアンロード。');
28}
29関数 ApplicationDisposing(送信者) {
30 $get('ClientEvents').innerHTML += "APP:: アプリケーションを破棄しています。<br/>";
31
32}
33//ページ開発者向けのアプリケーション イベント ハンドラー。
34関数 pageLoad() {
35 $get('ClientEvents').innerHTML += "PAGE:: ロード。<br/>";
36}
37
38関数 pageUnload() {
39alert('ページ:: ページのアンロード。');
40}
41
42// PageRequestManager イベント ハンドラー。
43関数 InitializeRequest(送信者, 引数) {
44 $get('ClientEvents').innerHTML += "<hr/>";
45 $get('ClientEvents').innerHTML += "PRM:: 非同期リクエストを初期化しています。<br/>";
46}
47関数 BeginRequest(送信者, 引数) {
48 $get('ClientEvents').innerHTML += "PRM:: 非同期リクエストの処理を開始します。<br/>";
49}
50関数 PageLoading(送信者, 引数) {
51 $get('ClientEvents').innerHTML += "PRM:: 非同期リクエストの結果をロードしています。<br/>";
52 var updatedPanels = printArray("PanelsUpdating", args.get_panelsUpdating());
53 var selectedPanels = printArray("PanelsDeleting", args.get_panelsDeleting());
54
55 var message = "-->" + updatedPanels + "<br/>-->" + deletePanels + "<br/>";
56
57 document.getElementById("ClientEvents").innerHTML += メッセージ;
58}
59関数 PageLoaded(送信者, 引数) {
60 $get('ClientEvents').innerHTML += "PRM:: 非同期リクエストの結果の読み込みを終了しました。<br/>";
61 var updatedPanels = printArray("PanelsUpdated", args.get_panelsUpdated());
62 var createdPanels = printArray("PaneslCreated", args.get_panelsCreated());
63
64 var message = "-->" + updatedPanels + "<br/>-->" + createdPanels + "<br/>";
65
66 document.getElementById("ClientEvents").innerHTML += メッセージ;
67}
68関数 EndRequest(送信者, 引数) {
69 $get('ClientEvents').innerHTML += "PRM:: 非同期リクエストの終了。<br/>";
70}
71
72// ヘルパー関数。
73関数クリア()
74{
75 $get('ClientEvents').innerHTML = "";
76}
77関数 printArray(名前, arr)
78{
79 var パネル = 名前 + '=' + arr.length;
80 if(配列の長さ > 0)
81 {
82 パネル += "(";
83 for(var i = 0; i < arr.length; i++)
84 {
85 パネル += arr[i].id + ',';
86}
87 パネル = パネル.部分文字列(0, パネル.長さ - 1);
88 パネル += ")";
89 }
リターンパネル90枚。
91}
92
実行効果 コードの表示
一般的なシナリオのイベント順序 [一般的なイベント順序]
イベント トリガーの順序は、ページで使用されているコントロールと、発生する要求の種類 (初期化要求、従来のポストバック、または非同期ポストバック) によって異なります。このセクションでは、いくつかの一般的なシナリオのイベント要求シーケンスについて説明します。
初期リクエスト [初期化リクエスト]
ページ初期化リクエスト中に、少数のクライアント イベントがトリガーされます。以下が初期化リクエストのシナリオであると仮定します。
· ページには ScriptManager コントロールが含まれており、コントロールの SupportsPartialRendering プロパティと EnablePartialRendering プロパティは両方とも true です。
· リクエストは GET タイプです。
・サーバーは正常に応答できます。
クライアント側でイベントが発生する順序は次のとおりです。
1. サーバーに対して初期化要求が発生します。
2. クライアントは応答を受け取ります。
3. アプリケーション インスタンスが init イベントをトリガーします。
4. アプリケーション インスタンスがロード イベントをトリガーします。
初期化イベントは、アプリケーションがインスタンス化されるときに、ページのライフ サイクル全体で 1 回だけ発生します。後続の非同期ポストバックでは発生しません。最初のリクエスト中 (リクエストに注意してください)、PageRequestManager イベントは発生しません。
非同期ポストバック [非同期ポストバック]
非同期ポストバックは、一部のページ データをサーバーに送信し、サーバー側の応答を受信して、ページの一部を更新します。次の非同期ポストバック シナリオを想定します。
· ページには ScriptManager コントロールが含まれており、コントロールの SupportsPartialRendering プロパティと EnablePartialRendering プロパティは両方とも true です。
· ページ上に UpdatePanel コントロールがあり、コントロールの ChildrenAsTriggers プロパティの値が true に変更されます。
· UpdatePanel 内には、非同期ポストバックをトリガーするためのボタンがあります。
· サーバー側からの応答を正常に取得します。
クライアント側でイベントが発生する順序は次のとおりです。
1. UpdatePanel コントロールのボタンをクリックすると、非同期ポストバックが発生します。
2. PageRequestManager インスタンスが、initializeRequest イベントをトリガーしました。
3. PageRequestManager インスタンスが beginRequest イベントをトリガーしました。
4. リクエストがサーバーに送信されます。
5. クライアントは応答を受け取ります。
6. PageRequestManager インスタンスが pageLoading イベントをトリガーしました。
7. PageRequestManager インスタンスが pageLoaded イベントをトリガーしました。
8. アプリケーション インスタンスがロード イベントをトリガーしました。
9. PageRequestManager インスタンスが endRequest イベントをトリガーしました。
アプリケーションのロード イベントは、PageRequestManager の pageLoaded イベントの後、endRequest イベントの前にあることに注意してください。
複数の非同期ポストバック [複数の非同期ポストバック]
前のリクエストがサーバーまたはブラウザーで実行中にユーザーが新しいリクエストを送信すると、複数の非同期ポストバックが発生します。次のシナリオは複数の非同期ポストバックのケースを説明していると仮定します。
· ページには ScriptManager コントロールが含まれており、コントロールの SupportsPartialRendering プロパティと EnablePartialRendering プロパティは両方とも true です。
· このページには UpdatePanel コントロールが含まれています。
· UpdatePanel で、非同期ポストバックを引き起こすボタン コントロールが 2 回クリックされます。 2 回目のクリックは、サーバーが最初のクリックによって開始されたリクエストを処理している間に発生します。
· サーバーから返された最初のリクエストに対するレスポンスを取得しました。
クライアント側でイベントが発生する順序は次のとおりです。
1. UpdatePanel のボタンをクリックすると、非同期ポストバックがトリガーされます。
2. PageRequestManager インスタンスが、initializeRequest イベントをトリガーしました。
3. PageRequestManager インスタンスが beginRequest イベントをトリガーしました。
4. リクエストがサーバーに送信されます。
5. クライアントは応答を受け取ります。
6. ボタンをもう一度クリックすると、2 番目の非同期ポストバックがトリガーされます。
7. PageRequestManager インスタンスは、2 回目のクリックに対して、initializeRequest イベントをトリガーします。
8. PageRequestManager インスタンスは、2 回目のクリックで beginRequest イベントをトリガーします。
9. 北方遠征の 2 回目のクリック リクエストでサーバーがスキャンされました。
10. クライアントは 2 回目のクリックの応答を受け取ります。
11. PageRequestManager インスタンスが pageLoading イベントをトリガーしました。
12. PageRequestManager インスタンスが pageLoaded イベントをトリガーしました。
13. アプリケーション インスタンスがロード イベントをトリガーしました。
14. PageRequestManager インスタンスが endRequest イベントをトリガーしました。
デフォルトの非同期ポストバック動作では、最新の非同期ポストバックが優先されます。 2 つの非同期ポストバックが連続して発生し、最初の非同期ポストバックがまだブラウザーによって処理されている場合、最初の非同期ポストバックはキャンセルされます。最初のポストバックがサーバーに送信された場合、サーバーは 2 番目のリクエストが到着するまで最初のリクエストを返しません。非同期ポストバックの優先順位の設定方法の詳細については、「特定の非同期ポストバックを優先する」を参照してください。
[他のページを閲覧する]
ユーザーがあるページから他のページにアクセスすると、現在のページが表示されます。ブラウザーのアンロードにより、アンロード イベントを操作してリソースを解放できます。このシナリオを以下でシミュレートすると仮定します。
· ページには ScriptManager コントロールが含まれており、コントロールの SupportsPartialRendering プロパティと EnablePartialRendering プロパティは両方とも true です。
・対象のページが存在する。
クライアント側でイベントが発生する順序は次のとおりです。
1. 新しいページのリクエストを開始します。
2. ブラウザは、新しいページを要求する応答を受け取ります。
3. アプリケーション インスタンスがアンロード イベントをトリガーします。
4. 新しいページが表示されます。
新しいページのリクエスト時にエラーが発生した場合でも、アンロード イベントは発生しますが、新しいページは表示されません。
【以上】