.NETプログラミング研究/80 のバックアップ差分(No.4)

追加された行はこの色です。
削除された行はこの色です。
*Microsoft ASP.NET AJAXを使う [#d37ae965]

前回、前々回とASP.NETでAjaxを使ったWebアプリケーションを作成する方法を紹介してきました。前回はICallbackEventHandlerインターフェイスを実装する方法を紹介し、多少楽をすることができました。それでもJavaScriptのコードを自分で書く必要があり、JavaScriptの知識を必要とします。

今回紹介するMicrosoft ASP.NET AJAXを使用すれば、極端に言えば、自分でJavaScriptのコードを一行も書くことなく、Ajaxを使用したページを作成することができます。自分でJavaScriptのコードを書く必要があるケースでも、大幅に簡略化できます。

なお、ここで説明するASP.NET AJAXのバージョンは、1.0です。

**Microsoft ASP.NET AJAXをインストールする [#z541599a]

Microsoft ASP.NET AJAXをインストールするには、.NET Framework 2.0以上が必要です。

まず、ASP.NET AJAXをダウンロードします。MSIファイルとして提供されています。以下のページからダウンロードできます。

-[[AJAX : The Official Microsoft ASP.NET 2.0 Site>http://go.microsoft.com/fwlink/?LinkId=75350]]

ここでは、「ASP.NET 2.0 AJAX Extensions」をダウンロードしてください。「ASP.NET AJAX Control Toolkit」もインストールしたい場合は、「ASP.NET 2.0 AJAX Extensions」をインストールした後にしてください。

ダウンロードした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」というタブが追加され、幾つかのコンポーネントが登録されます。

このようなテンプレートでプロジェクトを作成したり、「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」のようなパスにあります。

**UpdatePanelを使う [#r8e2732e]

まずは、ASP.NET 2.0 AJAX ExtensionsサーバーコントロールであるUpdatePanelを使用する方法を紹介します。UpdatePanelを使えば、JavaScriptのコードを自分で書く必要がありません。
まずは、ASP.NET 2.0 AJAX ExtensionsサーバーコントロールであるUpdatePanelを使用する方法を紹介します。前回、前々回同様、ここでもゆうパックの料金を調べるWebアプリケーションを作成します。

**ASP.NET AJAXを使う [#n4f31489]
早速ですが、コードから示します。前々回からお読みいただいている方は、あまりに簡単で、本当にたったこれだけでいいのかと驚かれるのではないでしょうか。

#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>
                <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つだけ配置できます。

-[[UpdatePanel Control Tutorials>http://asp.net/AJAX/Documentation/Live/tutorials/UpdatePanelTutorials.aspx]]

***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-18 (木) 02:42:07,DOBON!)
#pageinfo(,2007-10-11 (木) 17:27:24,DOBON!,2007-10-19 (金) 03:25:06,DOBON!)
▲ ▼
DoboWiki
