*ASP.NETでAjaxを使用したWebアプリケーションを作成する 3 [#w8702adf]
**Microsoft ASP.NET AJAXを使う [#d37ae965]
ASP.NETでAjaxを使ったWebアプリケーションを作成する方法を前々号から紹介してきました。前回はICallbackEventHandlerインターフェイスを実装する方法を紹介し、全て自分で行う方法と比べ、多少楽をすることができました。それでもやはりJavaScriptのコードを自分で書くことは必要で、JavaScriptの知識が必要でした。
ここで紹介する[[Microsoft ASP.NET AJAX>http://asp.net/ajax/default.aspx]]を使用すれば、極端に言えば、自分でJavaScriptのコードを一行も書くことなく、Ajaxを使用したページを作成することができます。自分でJavaScriptのコードを書かなければならない場合でも、大幅に簡略化できます。
ASP.NET AJAX（旧名Atlas）はマイクロソフトが公開している無料のフレームワークです。ASP.NET 2.0に対応しています。現在最新のバージョンは1.0であり、ここで説明に使用しているASP.NET AJAXのバージョンも1.0です。
***ASP.NET AJAXをインストールする [#z541599a]
ASP.NET AJAXには.NET Framework 2.0が必要ですので、それ未満しか使用できない場合は、残念ながらインストールできません。
ASP.NET AJAXは「[[ASP.NET AJAX Downloads : The Official Microsoft ASP.NET 2.0 Site>http://www.asp.net/ajax/downloads/]]」からダウンロードできます。「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を使う [#r8e2732e]
早速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){{
}}
#code(csharp){{
<%@ 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の外に出す [#pc5317bb]
***UpdateProgressコントロールを使って、状況を表示する [#j39e4fc2]
今まで紹介してきたAjaxのサンプルでは、ゆうパックの料金を調べている最中に、「読み込み中...」と表示されていましたが、上記の例では、表示されません。このような現在の状況を表示するには、UpdateProgressコントロールを使います。
上記のサンプルに現在の状況を表示するには、まずページにUpdateProgressコントロールを追加し、その中（<ProgressTemplate>の中）に「読み込み中...」と記入します。また、このUpdateProgressコントロールのAssociatedUpdatePanelIDプロパティを"UpdatePanel1"とし、表示する状況のUpdatePanelと関連付けます。
上記のサンプルにUpdateProgressコントロールを追加して、「読み込み中...」と表示されるようにしたコードは、以下のようになります。なおここでは、DisplayAfterプロパティを0にして、すぐに「読み込み中...」が表示されるようにしています。
#code(vbnet){{
}}
#code(csharp){{
<%@ 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>
}}
***参考 [#l5014b26]
-[[UpdatePanel Control Overview>http://asp.net/AJAX/Documentation/Live/overview/UpdatePanelOverview.aspx]]
-[[UpdatePanel Control Tutorials>http://asp.net/AJAX/Documentation/Live/tutorials/UpdatePanelTutorials.aspx]]
-[[UpdatePanel Class>http://asp.net/AJAX/Documentation/Live/mref/T_System_Web_UI_UpdatePanel.aspx]]
//これより下は編集しないでください
#pageinfo(,2007-10-11 (木) 17:27:24,DOBON!,2007-11-18 (日) 02:49:14,DOBON!)
|
Site admin: DOBON!
PukiWiki 1.5.0 Copyright © 2001-2006 PukiWiki Developers Team. License is GPL.
Based on "PukiWiki" 1.3 by yu-ji. Powered by PHP 5.6.40. HTML convert time: 0.007 sec.