かるあ のメモ

アクセスカウンタ

zoom RSS 非同期ポストバックのデータ

<<   作成日時 : 2007/06/16 12:49   >>

ブログ気持玉 0 / トラックバック 1 / コメント 0

ASP.NET AJAX では非同期ポストバックを使用して画面の描画を書き換えることができます。
では実際にどのような仕組みで画面の描画を行っているのかを見ていこうと思います。
とりあえず今回は非同期ポストバック時にどのようなデータがやり取りされているかを確認します。

非同期ポストバック時の通信データ
ASP.NET AJAX の非同期ポストバック時にはすべてのフォームデータがポストされ、受信されます。
非同期ポストバックの内容をキャプチャしてみるとどのようなデータがやり取りされているかのぞき見ることができます。

今回使用する画面はこれ
画像
idTypeNote
TextBox1TextBoxUpdatePanel外のテキスト
TextBox2TextBoxUpdatePanel内のラベル
Label1LabelUpdatePanel内のラベル
Label2LabelUpdatePanel内のラベル
Button1Button 


Button1 がクリックされると
TextBox1 の内容を Label1 に TextBox2 の内容を Label2 に表示します。
実行してみるとわかりますが、TextBox1 は UpdatePanel の外側にあるにもかかわらず、
Button1 をクリックしたときには Label1 に TextBox1 の値が表示されます。
これは非同期ポストバック時にフォームの全てのデータがポストされていることを示します。

実際にやりとりされているデータは次のようなものになります。
Firebug で取得したデータを見やすく整形したものです。
Post データ
ポストデータIdポストデータ
Button1Button
ScriptManager1UpdatePanel1|Button1
TextBox1TextBox1の入力値
TextBox2TextBox2の入力値
__EVENTARGUMENT 
__EVENTTARGET 
__EVENTVALIDATION/wEWBAKKnpWpAwLs0bLrBgLs....
__VIEWSTATE/wEPDwUJNTQwNzU3MzQ1ZG....

UpdatePanel 外の TextBox1 のデータも送信されています。
ViewState なども一緒に送信されていることがわかります。
これは特に Changed 系のイベントを使っているような場合に予期しないことが起こりそうです。

Response データ
 コントロールTypeコントロールId
274updatePanelUpdatePanel1<input name="TextBox2" type="text" value="TextBox2の入力" id="TextBox2" /&rt;
<input type="submit" name="Button1" value="Button" id="Button1" /&rt;<br /&rt;
<span id="Label1"&rt;TextBox1の入力</span&rt;<br /&rt;
<span id="Label2"&rt;TextBox2の入力</span&rt;|
160hiddenField__VIEWSTATE/wEPDwUJNTQwNzU3MzQ1D2QWAgIDD2QWA....
64hiddenField__EVENTVALIDATION/wEWBALG8ODlCgLs0fbZDAKM54rGBgLs0b....
0asyncPostBackControlIDs  ;
0postBackControlIDs  
13updatePanelIDstUpdatePanel1 ;
0childUpdatePanelIDs  ;
12panelsToRefreshIDs|UpdatePanel1 
2asyncPostBackTimeout 90
12formAction ;default.aspx
13pageTitle ;Untitled Page


updatePanel1 には非同期ポストバック後に書き換える HTML が格納されています。
UpdatePanel の innerHTML にデータを書き込むことで表示の切り替えをしています。
また、 ViewState も同時に降ってくるため、例えば UpdatePanel 外のデータを書き換えた場合、次回のポストバック時にその変更が適用されます。

このあたりの詳しい流れを知るには、Microsoft AJAX Library の MicrosoftAjaxWebForms.debug.js をみるとよくわかります。
Sys.WebForms.PageRequestManager クラスは必見です。
特にこのあたり
_initializeInternal
_updatePanel(updatePanelElement, rendering)
_onFormSubmitCompleted


テーマ

注目テーマ 一覧


月別リンク

ブログ気持玉

クリックして気持ちを伝えよう!
ログインしてクリックすれば、自分のブログへのリンクが付きます。
→ログインへ

トラックバック(1件)

タイトル (本文) ブログ名/日時
非同期ポストバックの動き
ということで前回の続きで_initializeInternal, updatePanel, onFormSubmitCompleted の動きを簡単に追って見ます。 ...続きを見る
かるあ のメモ
2007/06/17 02:27

トラックバック用URL help


自分のブログにトラックバック記事作成(会員用) help

タイトル
本 文

コメント(0件)

内 容 ニックネーム/日時

コメントする help

ニックネーム
本 文
非同期ポストバックのデータ かるあ のメモ/BIGLOBEウェブリブログ
文字サイズ:       閉じる