*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つだけ配置できます。 ***参考 [#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> }} //これより下は編集しないでください #pageinfo(,2007-10-11 (木) 17:27:24,DOBON!,2007-11-17 (土) 19:54:10,DOBON!) |