その1で適当にAJAXを使ったアプリケーションを作ってみた。
そこでキーとなったコントロールは、ScriptManagerとUpdatePanelの2つになる。
ScriptManagerを置くことで、AJAXで使うJavaScriptのライブラリを読み込むようになる。
UpdatePanelは、Panel内だけの部分更新に対応するためのコントロールになる。
ASP.NET AJAXが行う通信は、下のような特徴がある。
- 部分更新でもポストバック時にはページの全データがサーバに送られる
- 普通のポストバックの時と同じようにサーバサイドのイベントが起きる
- 普通のポストバックの後にレスポンスとしてUpdatePanelの部分+ViewStateが返される
こういう動きをするので注意しなきゃいけないことが出てくる。
- むやみやたらにAJAX通信してると画面のちらつきは無くなるけどサーバが重くてたまらん
- UpdatePanelに無いものの書き換えをすると、見た目変は変わらないのにViewStateだけ変わる
具体的に、どういうことがおきるのか見てみようと思う。
まず、ScriptManagerとUpdatePanelを置いて、そこにボタンとラベルを置く。そして、UpdatePanelの外にもラベルとボタンを置く。
丁度下のような感じになる。(UpdatePanelの部分がわかりやすいように青色にしてます)
そして、ぼたん1のクリックイベントで下のようなコードを書く。
protected void Button1_Click(object sender, EventArgs e)
{
Label1.Text += "らべる1";
Label2.Text += "らべる2";
}
UpdatePanelにあるLabel1のTextの更新と、UpdatePanelに置かれてないLabel2のTextの更新をしている。
この状態で実行して、ぼたん1を何回連打してもラベルの値が変わるだけで、Label2の値は変わらない。
じゃぁ、サーバサイドで追加したLabel2の値は消えたのか?というと、見た目に反映されてないだけでViewStateに保持されてるので値は書き換わっている。証拠にぼたん2を押すと今まで空だったLabel2に値が一気に追加されるのがわかる。
ここらへん注意しとかないとはまりそうだ。
- UpdatePanelの非同期ポストバックも普通のポストバックと変わらない
- UpdatePanel以外の部分を書き換えるとおかしなことになりそう
以上!