【タイトル】

    ASP.NET 2.0 - 手軽に AJAX 化(ポップアップカレンダー)

【概要】

    ASP.NET AJAX ベースで作られたサーバコントロール群「ASP.NET AJAX Control Toolkit」を利用する。
    既存の ASP.NET アプリケーションを手軽に AJAX 化(ポップアップカレンダーによる日付入力機能を追加)することで、
    ユーザビリティの向上を図る。

【環境】

    OS:         Windows XP SP2, Windows Server 2003 SP1
    Software: Microsoft .NET Framework 2.0
                  Visual Studio 2005 Professional Edition
                  IIS 6.0
                  IE 6.0, 7.0

【内容(詳細)】

    ASP.NET AJAX Control Toolkit で用意されている「Calendar コントロール」を使用して、ポップアップカレンダーによる
    日付入力補助機能をテキストボックスに追加する。

    ASP.NET AJAX Control Toolkit には AJAX 技術を用いたリッチな UI コントロールが、「Calendar コントロール」以外にも
    多数用意されている。これらのコントロールは全て ASP.NET 標準のサーバコントロールと同様に、ページに配置して必要な
    プロパティ設定を行うだけで動作する(リッチな UI を実現するための複雑な JavaScript はコントロールが裏で自動出力)。

    ※ASP.NET AJAX Control Toolkit のサンプルアプリケーション(下記 Step 3.の AjaxControlToolkit.zip に同梱)にて、
      全てのコントロールのサンプルコード及び動作を確認できる

    以下、実際に ASP.NET AJAX Control Toolkit の「Calendar コントロール」を使用するサンプルである。

    Step 1. ASP.NET AJAX のインストール

        Microsoft ASP.NET AJAX Site(http://www.asp.net/ajax/)から「ASP.NET AJAX Extensions 1.0 for ASP.NET 2.0」の
        インストーラをダウンロードする。
        ダウンロードした「ASPAJAXExtSetup.msi」を実行することで、ASP.NET AJAX のサーバーサイド技術のコア機能である
        「ASP.NET 2.0 AJAX Extensions」がインストールされる。

    Step 2. web.config に設定を追加

        既存の ASP.NET アプリケーションの web.config に、ASP.NET AJAX が機能するための設定を追加する。
        ※インストールした「ASP.NET 2.0 AJAX Extensions」フォルダに格納されている web.config の設定を追加

        また、既存アプリケーションの bin フォルダに「ASP.NET 2.0 AJAX Extensions」に格納されている dll を追加する。

    Step 3. ASP.NET AJAX Control Toolkit のインストール

        ASP.NET AJAX 同様、Microsoft ASP.NET AJAX Site(http://www.asp.net/ajax/)から「ASP.NET AJAX Control Toolkit」を
        ダウンロードし、AjaxControlToolkit.zip を適当なフォルダに解凍する(Version 1.0.20229)。
        解凍したフォルダの「/SampleWebSite/bin/AjaxControlToolkit.dll」を、既存アプリケーションの bin フォルダに追加する。

        また、既存アプリケーションの web.config に、ASP.NET AJAX Control Toolkit のコントロール郡が機能するための設定を
        以下の通り追加する。※中略

            <configuration>
                <system.web>
                    <pages>
                        <controls>
                            <add assembly="AjaxControlToolkit" namespace="AjaxControlToolkit" tagPrefix="ajaxToolkit" />
                        </controls>
                    </pages>
                </system.web>
            </configuration>

        もしくは、使用するページに以下 @Register ディレクティブを追加する。

            <%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajaxToolkit" %>

    Step 4. ソースコードの変更

        - 変更前(既存の ASP.NET アプリケーション)

            <!-- 日付入力用テキストボックス -->
            <asp:textbox id="txtDate" runat="server" />

        - 変更後(ポップアップカレンダーによる日付入力補助機能をテキストボックスに追加)

            <asp:ScriptManager ID="ScriptManager1" runat="server" />

            <!-- 日付入力用テキストボックス -->
            <asp:textbox ID="txtDate" runat="server" />
            <ajaxToolkit:CalendarExtender ID="ClndrExt1" runat="server" TargetControlID="txtDate" Format="yyyy/MM/dd" />

            ------------------------------------------------------------------------------------------------------------
            (1) ScriptManeger コントロール
                  ページに当コントロールを配置することで、Ajax 機能に必要な JavaScript ライブラリが出力される。
                  1つのページに1つだけ、Form 内に配置できる。
            (2) CalendarExtender コントロール
                  関連付けられたテキストボックスにフォーカスを当てると、カレンダーがテキストボックス下部に表示される。
                  カレンダー上の日付をクリックすると、指定書式の日付文字列がテキストボックスに反映される。
                  - TargetControlID プロパティ : 関連付ける TextBox コントロールの ID
                  - Format プロパティ : テキストボックスに日付を反映する際の書式文字列

    以上。

2008/06/27 h.o
一番上に戻る