- 追加された行はこの色です。
- 削除された行はこの色です。
*Microsoft ASP.NET AJAXを使う [#d37ae965]
*ASP.NETでAjaxを使用したWebアプリケーションを作成する 3 [#w8702adf]
前回、前々回とASP.NETでAjaxを使ったWebアプリケーションを作成する方法を紹介してきました。前回はICallbackEventHandlerインターフェイスを実装する方法を紹介し、多少楽をすることができました。それでもJavaScriptのコードを自分で書く必要があり、JavaScriptの知識を必要とします。
**Microsoft ASP.NET AJAXを使う [#d37ae965]
今回紹介するMicrosoft ASP.NET AJAXを使用すれば、極端に言えば、自分でJavaScriptのコードを一行も書くことなく、Ajaxを使用したページを作成することができます。自分でJavaScriptのコードを書く必要があるケースでも、大幅に簡略化できます。
ASP.NETでAjaxを使ったWebアプリケーションを作成する方法を前々号から紹介してきました。前回はICallbackEventHandlerインターフェイスを実装する方法を紹介し、全て自分で行う方法と比べ、多少楽をすることができました。それでもやはりJavaScriptのコードを自分で書くことは必要で、JavaScriptの知識が必要でした。
なお、ここで説明するASP.NET AJAXのバージョンは、1.0です。
ここで紹介する[[Microsoft ASP.NET AJAX>http://asp.net/ajax/default.aspx]]を使用すれば、極端に言えば、自分でJavaScriptのコードを一行も書くことなく、Ajaxを使用したページを作成することができます。自分でJavaScriptのコードを書かなければならない場合でも、大幅に簡略化できます。
**Microsoft ASP.NET AJAXをインストールする [#z541599a]
ASP.NET AJAX(旧名Atlas)はマイクロソフトが公開している無料のフレームワークです。ASP.NET 2.0に対応しています。現在最新のバージョンは1.0であり、ここで説明に使用しているASP.NET AJAXのバージョンも1.0です。
Microsoft ASP.NET AJAXをインストールするには、.NET Framework 2.0以上が必要です。
***ASP.NET AJAXをインストールする [#z541599a]
まず、ASP.NET AJAXをダウンロードします。MSIファイルとして提供されています。以下のページからダウンロードできます。
ASP.NET AJAXには.NET Framework 2.0が必要ですので、それ未満しか使用できない場合は、残念ながらインストールできません。
-[[AJAX : The Official Microsoft ASP.NET 2.0 Site>http://go.microsoft.com/fwlink/?LinkId=75350]]
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のインストール後にしてください。
ここでは、「ASP.NET 2.0 AJAX Extensions」をダウンロードしてください。「ASP.NET AJAX Control Toolkit」もインストールしたい場合は、「ASP.NET 2.0 AJAX Extensions」をインストールした後にしてください。
ダウンロードされたファイルは、"ASPAJAXExtSetup.msi"のようなファイル名になっているでしょう。このファイルをダブルクリックして、インストールを開始してください。インストールするには、管理者権限が必要です。また、前のバージョンのASP.NET AJAXがインストールされている場合は、アンインストールしてから新しいバージョンをインストールしてください。
ダウンロードした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がインストールされると、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に必要な設定が書き込まれます。
このようなテンプレートでプロジェクトを作成したり、「AJAX Extensions」タブにあるコンポーネントをページに配置したりすると、Web.configに必要な設定が書き込まれます。Visual Studio(またはVisual Web Developer Express Edition)をインストールしていない場合は、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」のようなパスにあります。
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]
***UpdatePanelを使う [#r8e2732e]
まずは、ASP.NET 2.0 AJAX ExtensionsサーバーコントロールであるUpdatePanelを使用する方法を紹介します。前回、前々回同様、ここでもゆうパックの料金を調べるWebアプリケーションを作成します。
早速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>
<div>
</div>
<div>
<br />
<asp:Label ID="ResultLabel" runat="server"></asp:Label>
</div>
</ContentTemplate>
</asp:UpdatePanel>
</div>
</form>
</body>
</html>
}}
前々回紹介した、Ajaxを使用せずに、今までどおりポストバックを使用する方法と、ほとんど同じです。コードは全く同じで、違いは、荷物のサイズを選択するDropDownListコントロールと、結果を表示するLabelコントロールがUpdatePanelコントロールの中(<ContentTemplate>の中)に入っていることだけです。自分でJavaScriptを書く必要も、Webサービスを作成する必要もありません。
以上ですべて終了です。
UpdatePanelコントロールを使うためには、ScriptManagerコントロールが必要です。もしUpdatePanelコントロールを使いたいページにScriptManagerコントロールが無ければ、まずScriptManagerコントロールを追加してから、UpdatePanelコントロールを追加します。これらのコントロールは、Visual Studioのツールバーの「AJAX Extensions」内にあります。ScriptManagerコントロールは、1つのページに1つだけ配置できます。
驚くことに、前々回紹介した、Ajaxを使用せずに、今までどおりポストバックを使用する方法と、ほとんど同じになります。コードは全く同じで、違いは、荷物のサイズを選択するDropDownListコントロールと、結果を表示するLabelコントロールがUpdatePanelコントロールの中(<ContentTemplate>の中)に入っていることだけです。自分でJavaScriptを書く必要も、Webサービスを作成する必要もありません。
UpdatePanelコントロールを使うためには、ScriptManagerコントロールが必要です。もしUpdatePanelコントロールを使いたいページにScriptManagerコントロールが無ければ、まずScriptManagerコントロールを追加してから、UpdatePanelコントロールを追加します。ScriptManagerコントロールは、1つのページに1つだけ配置できます。
***参考 [#l5014b26]
-[[UpdatePanel Control Tutorials>http://asp.net/AJAX/Documentation/Live/tutorials/UpdatePanelTutorials.aspx]]
***トリガーを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>
}}
**ASP.NET AJAXを使って、WebサービスのメソッドをJavaScriptから呼び出す [#p124f866]
ASP.NET AJAXを使うと、まるでWebサービスのメソッドをJavaScriptから直接呼び出すかのように、Webサービスにアクセスすることができます。
ここでは、前々号で紹介したアプリケーションと同じものをこの機能を使って実現してみます。
まず、WebサービスのクラスにScriptServiceAttribute属性を適用します。
#code(vbnet){{
}}
#code(csharp){{
<%@ WebService Language="C#" Class="WebService" %>
using System;
using System.Web;
using System.Web.Services;
using System.Web.Services.Protocols;
[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
[System.Web.Script.Services.ScriptService]
public class WebService : System.Web.Services.WebService
{
[WebMethod]
public int GetYoupackFee(int packSize)
{
//(省略)
}
}
}}
もし「ASP.NET AJAX-Enabled Web Site」テンプレートを使用してプロジェクトを作成していないのであれば、Web.configに以下のような設定を追加して、ScriptHandlerFactory HTTPハンドラを登録する必要があります。
#pre{{
<system.web>
<httpHandlers>
<remove verb="*" path="*.asmx"/>
<add verb="*" path="*.asmx" type="System.Web.Script.Services.ScriptHandlerFactory" validate="false"/>
</httpHandlers>
<system.web>
}}
次に、Webサービスを呼び出すJavaScriptを作成します。
次に、Webサービスを呼び出すページを作成します。コントロールの配置は、今までと同じままとし、ScriptManagerコントロールを一つ配置します。
//これより下は編集しないでください
#pageinfo(,2007-10-11 (木) 17:27:24,DOBON!,2007-10-19 (金) 03:25:06,DOBON!)
#pageinfo(,2007-10-11 (木) 17:27:24,DOBON!,2007-11-17 (土) 19:54:10,DOBON!)