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