ASP.NETでAjaxを使用したWebアプリケーションを作成する 3 †
Microsoft ASP.NET AJAXを使う †
ASP.NETでAjaxを使ったWebアプリケーションを作成する方法を前々号から紹介してきました。前回はICallbackEventHandlerインターフェイスを実装する方法を紹介し、全て自分で行う方法と比べ、多少楽をすることができました。それでもやはりJavaScriptのコードを自分で書くことは必要で、JavaScriptの知識が必要でした。
ここで紹介するMicrosoft ASP.NET AJAXを使用すれば、極端に言えば、自分でJavaScriptのコードを一行も書くことなく、Ajaxを使用したページを作成することができます。自分でJavaScriptのコードを書かなければならない場合でも、大幅に簡略化できます。
ASP.NET AJAX(旧名Atlas)はマイクロソフトが公開している無料のフレームワークです。ASP.NET 2.0に対応しています。現在最新のバージョンは1.0であり、ここで説明に使用しているASP.NET AJAXのバージョンも1.0です。
ASP.NET AJAXをインストールする †
ASP.NET AJAXには.NET Framework 2.0が必要ですので、それ未満しか使用できない場合は、残念ながらインストールできません。
ASP.NET AJAXは「ASP.NET AJAX Downloads : The Official Microsoft ASP.NET 2.0 Site」からダウンロードできます。「ASP.NET 2.0 AJAX Extensions」と「ASP.NET AJAX Control Toolkit」がありますが、とりあえずはAJAX Extensionsだけで結構です。Control Toolkitをインストールする時も、AJAX Extensionsのインストール後にしてください。
ダウンロードされたファイルは、"ASPAJAXExtSetup.msi"のようなファイル名になっているでしょう。このファイルをダブルクリックして、インストールを開始してください。インストールするには、管理者権限が必要です。また、前のバージョンのASP.NET AJAXがインストールされている場合は、アンインストールしてから新しいバージョンをインストールしてください。
ASP.NET AJAXがインストールされると、Visual Studio 2005(またはVisual Web Developer Express Edition)にASP.NET AJAX用のプロジェクトのテンプレートがインストールされます。Visual Studioで「新しいWebサイト」ダイアログを表示させると、「ASP.NET AJAX-Enabled Web Site」というテンプレートが見つかるはずです。また、ツールボックスに「AJAX Extensions」というタブが追加され、幾つかのコンポーネントが登録されます。
ASP.NET AJAXを使用するには、Web.configに適切な設定が必要です。テンプレート「ASP.NET AJAX-Enabled Web Site」を使ってプロジェクトを作成したり、「AJAX Extensions」タブにあるコンポーネントをページに配置したりすると、Web.configに必要な設定が書き込まれます。
Visual Studioをインストールしていない場合は、Web.configの設定を自分で書き込む必要があります。どのように書き込むかのサンプルが、ASP.NET AJAXをインストールしたフォルダにあります。ASP.NET AJAXは、通常「C:\Program Files\Microsoft ASP.NET」のようなパスにインストールされ、サンプルのWeb.configはそれ以下の「C:\Program Files\Microsoft ASP.NET\ASP.NET 2.0 AJAX Extensions\v1.0.61025\web.config」のようなパスで見つかるでしょう。
UpdatePanelを使う †
早速ASP.NET AJAXを使ってみましょう。ここでは、前回、前々回と同様、ゆうパックの料金を調べるWebアプリケーションを作成します。
Visual Studioを使用した場合の手順は、次のようになります。
- メニューの[ファイル]-[新規作成]-[Webサイト]から、「ASP.NET AJAX-Enabled Web Site」テンプレートを使用して、新しいWebサイトを作成します。(「ASP.NET AJAX-Enabled Web Site」テンプレートを使用しなかったり、既存のWebサイトを使うことも可能です。)
- Default.aspxのデザインを開きます。ScriptManagerコントロールが一つ配置されていることを確認します。新しいページを作成したなどでScriptManagerが配置されていない場合は、ツールボックスの「AJAX Extensions」タブからScriptManagerをページにドラッグ&ドロップして、配置します。ScriptManagerは必ず1つだけ配置します。
- ツールボックスの「AJAX Extensions」タブからUpdatePanelをページにドラッグ&ドロップして、配置します。
- 前々号の「Ajaxを使用しない方法」で使用したコントロールをUpdatePanelコントロール内に全て配置します。コントロールのプロパティやイベントの設定も「Ajaxを使用しない方法」と全く同じにします。さらに、「Ajaxを使用しない方法」で紹介したコードをそのまま使用します。具体的には、次のようになります(ここでは、単一ページにしています)。
#code(vbnet){{
}}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
| | <%@ Page Language="C#" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script runat="server">
protected void PackageSizeList_SelectedIndexChanged(
object sender, EventArgs e)
{
DropDownList ddl = (DropDownList)sender;
if (ddl.SelectedValue != "0")
{
int fee = this.GetYoupackFee(int.Parse(ddl.SelectedValue));
ResultLabel.Text = string.Format("<p>料金は {0}円</p>", fee);
}
else
{
ResultLabel.Text = "";
}
}
public int GetYoupackFee(int packSize)
{
if (packSize <= 60)
return 600;
else if (packSize <= 80)
return 800;
else if (packSize <= 100)
return 1000;
else if (packSize <= 120)
return 1200;
else if (packSize <= 140)
return 1400;
else if (packSize <= 160)
return 1600;
else if (packSize <= 170)
return 1700;
else
return -1;
}
</script>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>ゆうパック送料検索</title>
</head>
<body>
<h1>ゆうパック送料検索</h1>
<p>同一都道府県内への配達、重量30kgまで</p>
<form id="form1" runat="server">
<div>
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:Label
ID="Label1"
runat="server"
Text="荷物の大きさ(縦・横・高さの合計): "
AssociatedControlID="PackageSizeList">
</asp:Label>
<asp:DropDownList
ID="PackageSizeList"
runat="server"
AutoPostBack="True"
OnSelectedIndexChanged="PackageSizeList_SelectedIndexChanged">
<asp:ListItem Value="0">(選択してください)</asp:ListItem>
<asp:ListItem Value="60">60cmまで</asp:ListItem>
<asp:ListItem Value="80">80cmまで</asp:ListItem>
<asp:ListItem Value="100">100cmまで</asp:ListItem>
<asp:ListItem Value="120">120cmまで</asp:ListItem>
<asp:ListItem Value="140">140cmまで</asp:ListItem>
<asp:ListItem Value="160">160cmまで</asp:ListItem>
<asp:ListItem Value="170">170cmまで</asp:ListItem>
</asp:DropDownList>
<br />
<asp:Label ID="ResultLabel" runat="server"></asp:Label>
</ContentTemplate>
</asp:UpdatePanel>
</div>
</form>
</body>
</html>
|
以上ですべて終了です。
驚くことに、前々回紹介した、Ajaxを使用せずに、今までどおりポストバックを使用する方法と、ほとんど同じになります。コードは全く同じで、違いは、荷物のサイズを選択するDropDownListコントロールと、結果を表示するLabelコントロールがUpdatePanelコントロールの中(<ContentTemplate>の中)に入っていることだけです。自分でJavaScriptを書く必要も、Webサービスを作成する必要もありません。
UpdatePanelコントロールを使うためには、ScriptManagerコントロールが必要です。もしUpdatePanelコントロールを使いたいページにScriptManagerコントロールが無ければ、まずScriptManagerコントロールを追加してから、UpdatePanelコントロールを追加します。ScriptManagerコントロールは、1つのページに1つだけ配置できます。
参考 †
トリガーをUpdatePanelの外に出す †
UpdateProgressコントロールを使って、状況を表示する †
今まで紹介してきたAjaxのサンプルでは、ゆうパックの料金を調べている最中に、「読み込み中...」と表示されていましたが、上記の例では、表示されません。このような現在の状況を表示するには、UpdateProgressコントロールを使います。
上記のサンプルに現在の状況を表示するには、まずページにUpdateProgressコントロールを追加し、その中(<ProgressTemplate>の中)に「読み込み中...」と記入します。また、このUpdateProgressコントロールのAssociatedUpdatePanelIDプロパティを"UpdatePanel1"とし、表示する状況のUpdatePanelと関連付けます。
上記のサンプルにUpdateProgressコントロールを追加して、「読み込み中...」と表示されるようにしたコードは、以下のようになります。なおここでは、DisplayAfterプロパティを0にして、すぐに「読み込み中...」が表示されるようにしています。
#code(vbnet){{
}}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
| | <%@ Page Language="C#" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script runat="server">
protected void PackageSizeList_SelectedIndexChanged(
object sender, EventArgs e)
{
System.Threading.Thread.Sleep(1000);
DropDownList ddl = (DropDownList)sender;
if (ddl.SelectedValue != "0")
{
int fee = this.GetYoupackFee(int.Parse(ddl.SelectedValue));
ResultLabel.Text = string.Format("料金は {0}円", fee);
}
else
{
ResultLabel.Text = "";
}
}
public int GetYoupackFee(int packSize)
{
if (packSize <= 60)
return 600;
else if (packSize <= 80)
return 800;
else if (packSize <= 100)
return 1000;
else if (packSize <= 120)
return 1200;
else if (packSize <= 140)
return 1400;
else if (packSize <= 160)
return 1600;
else if (packSize <= 170)
return 1700;
else
return -1;
}
</script>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>ゆうパック送料検索</title>
</head>
<body>
<h1>ゆうパック送料検索</h1>
<p>同一都道府県内への配達、重量30kgまで</p>
<form id="form1" runat="server">
<div>
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<div>
<asp:Label
ID="Label1"
runat="server"
Text="荷物の大きさ(縦・横・高さの合計): "
AssociatedControlID="PackageSizeList">
</asp:Label>
<asp:DropDownList
ID="PackageSizeList"
runat="server"
AutoPostBack="True"
OnSelectedIndexChanged="PackageSizeList_SelectedIndexChanged">
<asp:ListItem Value="0">(選択してください)</asp:ListItem>
<asp:ListItem Value="60">60cmまで</asp:ListItem>
<asp:ListItem Value="80">80cmまで</asp:ListItem>
<asp:ListItem Value="100">100cmまで</asp:ListItem>
<asp:ListItem Value="120">120cmまで</asp:ListItem>
<asp:ListItem Value="140">140cmまで</asp:ListItem>
<asp:ListItem Value="160">160cmまで</asp:ListItem>
<asp:ListItem Value="170">170cmまで</asp:ListItem>
</asp:DropDownList>
</div>
<div>
<asp:Label ID="ResultLabel" runat="server"></asp:Label>
</div>
</ContentTemplate>
</asp:UpdatePanel>
<asp:UpdateProgress
ID="UpdateProgress1"
runat="server"
AssociatedUpdatePanelID="UpdatePanel1"
DisplayAfter="0">
<ProgressTemplate>
読み込み中...
</ProgressTemplate>
</asp:UpdateProgress>
</div>
</form>
</body>
</html>
|
ページ情報 |
- 作成日 : 2007-10-11 (木) 17:27:24
- 作成者 : DOBON!
- 最終編集日 : 2007-11-17 (土) 19:54:10
- 最終編集者 : DOBON!
|