ASP.NET AJAXに入門してみる！
とりあえずHello worldを作ることを今回の目標とします！！
まず、ASP.NET AJAXを使わずにHello wroldを作ります。ラベルとテキストボックスとボタンを置いて下のような感じのページを作ります。
そして、ボタンのクリックイベントで下のようにHello worldをさくっと実装する。
using System;
using System.Configuration;
using System.Data;
using System.Linq;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.HtmlControls;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Xml.Linq;
public partial class _Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
}
protected void Button1_Click(object sender, EventArgs e)
{
Label1.Text = "Hello world!!" + TextBox1.Text;
}
}
そして実行！！テキストフィールドに何か入れてボタンを押すとHello worldが動く。
ここまでは問題ない。いつも通りのASP.NETのHello worldです。
これをAJAXで非同期通信してみようと思う。AJAXでごにょごにょしようとする場合は、下にあるようなAJAX Extensionsを使う。
とりあえず、必須なのはScriptManagerというコントロール。これを置くことで、ページでAJAXの通信とかが出来るようになるっぽい。
ということで置いてみた。
そして次にUpdatePanelを置いて、ラベルとテキストボックスとボタンをUpdatePanelに突っ込む。
これで、非同期にポストバックが行われてUpdatePanelの中身が書き換わるようになる。
ScriptManagerとUpdatePanelを置いてみたところ。
そして実行！ボタンを押すとAJAX通信が裏で行われてラベルの値が書き換わる。
といっても静止画じゃわからん！？ということでWeb Development HelperというものをIE7に入れて通信状況をキャプチャしてみた。
Web Development HelperっていうのはFirefoxのFireBugみたいな雰囲気のものみたい。
Web開発には必須になりそうなツール！お勧めされたので入れてみた。
それを使って、どんなリクエストとレスポンスがボタンが押されたときにやり取りされているのかをとってみた。
リクエストを見ると、通常のポストバックと同様にパラメータがわたっているのがわかる。
ただし、レスポンスが普通のHTML形式とはちょっと違う感じになってる。
丁度UpdatePanelの中身とViewStateの値が返されてるような感じだ。
この結果を受け取って、ASP.NET AJAXのJavaScriptが一生懸命ページを書き換えてるみたいだ。
ということでわかったこと。
- ScriptManagerとUpdatePanelを置けばとりあえずAJAXできそう
- Web Development Helperが便利そう