Ajax Control Toolkit の最新版かつ最終版 v20.1.0 のデモを自分の開発環境で動くようにする手順を備忘録として書いておきます。基本的には先の記事「Ajax Control Toolkit 17.1.1 デモ」の v17.1.1 の場合とほぼ同じですが、入手する .zip ファイルとか、NuGet パッケージのバージョンとか、Visual Studio 2026 を使ったところなどが異なります。

まず、GitHub のページ DevExpress/AjaxControlToolkit の下の方の Assets 欄の［Source code (zip)］をクリックして AjaxControlToolkit-20.1.0.zip をダウンロードします。

ダウンロードしたファイル AjaxControlToolkit-20.1.0.zip の中に AjaxControlToolkit.SampleSite というフォルダがあるので、それを丸ごと解凍して適当な場所にコピーします。

そのホルダには Web サイトプロジェクト形式の ASP.NET Web Forms アプリが含まれています。ただし、そのフォルダ内の bin フォルダには AjaxControlToolkit.dll など必要な .dll が含まれていないので、そのままでは動きません。NuGet から必要なパッケージをインストールする必要があります。

NuGet から必要なパッケージをインストールするには、Visual Studio 2026 を使っていれば Tools > NuGet Package Manager > NuGet Package Manager for Solution... から管理画面を開いて行うと思いますが、そのためにはソリューションとしてアプリを開いていないとダメなようです。しかし、ダウンロードした AjaxControlToolkit.SampleSite フォルダには .sln ファイルは含まれていません。

.sln ファイルを作成するには、一旦、Visual Studio 2026 の File > Open > Web Site... で AjaxControlToolkit.SampleSite フォルダを開いた後、Visual Studio 2026 を閉じると下のダイアログが表れるので、[Save] ボタンをクリックしてやります。そうすれば指定した場所に .sln ファイルを生成してくれます。（ほかにもっと簡単な方法があるかもしれませんが）

その後、Visual Studio 2026 を起動し、File > Open > Project/Solution... で上の操作で生成された .sln ファイルを選んでプロジェクトを開いてやれば、 Tools > NuGet Package Manager > NuGet Package Manager for Solution... で管理画面を開くことができます。

自分が NuGet からインストールしたパッケージおよびそのバージョンは以下の通りです。バージョンはこの記事を書いた時点での最新版です。

1. AjaxControlToolkit v20.1.0
2. Antlr v3.5.0.2
3. HtmlAgilityPack v1.12.4
4. Microsoft.AspNet.Web.Optimization v1.1.3
5. Microsoft.Web.Infrastructure v2.0.0
6. Newtonsoft.Json v13.0.4
7. WebGrease v1.6.0
8. AjaxControlToolkit.HtmlEditor.Sanitizer v20.1.0
9. Microsoft.AspNet.Web.Optimization.WebForms v1.1.3
10. AjaxControlToolkit.StaticResources　v20.1.0

上のリストの 1 番目の AjaxControlToolkit をインストールすると 2 ～ 7 番目の NuGet パッケージも同時にインストールされるはずです。ただし、バージョンが古いものがあったので最新版にアップデートしました。加えて 8 ～ 10 番の 3 つの NuGet パッケージも管理画面でインストールします。

上に書いた NuGet でのパッケージのインストールが完了するとアプリケーションの bin フォルダは以下のようになるはずです。

自分が上の操作を行った時、何が問題だったのか不明ですが、System.Web.Optimization.dll がインストールされず (.refresh のまま)、実行すると「型または名前空間名 'Optimization' は名前空間 'System.Web' に存在しません。アセンブリ参照が不足しています。」というエラーになりました。

その問題は、関係する以下の NuGet パッケージをアンインストールしてから再インストールすることで解決できました。

• Microsoft.AspNet.Web.Optimization
• Microsoft.AspNet.Web.Optimization.WebForms
• AjaxControlToolkit.StaticResources

最後に web.config を以下のように修正します。

1. <trust level="Medium" /> を削除
2. siteMap / providers 要素に <remove name="MySqlSiteMapProvider" /> を追加

以上でデモは動くはずです。

（メモ: C:\WebSites2026\AjaxControlToolkit.SampleSiteVisual フォルダにある Web サイトプロジェクト。Visual Studio でそのフォルダ下の AjaxControlToolkit.SampleSite.sln を選んで開けばサンプルが動く）

Ajax Control Toolkit の CalendarExtender を、下の画像のようにテキストボックスなし（実際は非表示）で、img 要素（普通のボタンでも可）をクリックして表示し、ユーザーがカレンダー上で選択した日付をサーバー側に送信する方法を書きます。

今時 CalendarExtender を使うことはあまりなさそうで、しかもこの記事に書いてあるような特殊な使い方をすることはまずなさそうですが、せっかく考えたので備忘録として書いておくことにしました。

CalendarExtender の基本的な使い方については、DevExpress のデモページ「Calendar Demonstration」と、@IT の記事「Calendarコントロールで日付入力ボックスを定義するには？」が参考になると思いますので一読されることをお勧めします。

カレンダーを img 要素（または普通のボタン）をクリックして表示する方法ですが、DevExpress のデモページの「Calendar with an associated button」と @IT の記事の「補助カレンダーを任意のボタンから起動する」を見てください。

この記事では、DevExpress のデモページと同じ画像を img 要素を使って表示し、CalendarExtender の PopupButtonID プロパティに img 要素の id を設定して、その img 要素をクリックしてカレンダーを表示します。img 要素に代えて <button type="button"> も使えます。ただし、クリックするとポストバックが起こる Button コントロールなどを使う場合は、ポストバックが起こらないように処置する必要があるので注意してください。

CalendarExtender の対象となるテキストボックスを指定する TargetControlID の設定は必須です。なので必ずテキストボックスをページに配置する必要があります。非表示にしたい場合は CSS で display: none; を設定してください。TextBox.Visible プロパティを false に設定するのはダメです。

カレンダーの表示位置はデフォルトでは自動的にテキストボックス直下になります。テキストボックスを非表示にする場合は自力で JavaScript を書いてカレンダーの表示位置を設定する必要があります。

その方法は Code Project の記事 Ajax CalendarExtender pop up position の Solution 1 を参考にさせてもらいました。

最後に、ユーザーが選択した日付をサーバーに送信する方法ですが、選択した時点で日付はテキストボックスに自動的に入力されますので、何らかの手段でポストバックをかければサーバー側で Text プロパティから取得できます。

CalendarExtender の OnClientDateSelectionChanged プロパティに JavaScript のリスナを設定してそこで取得し、Ajax を使ってサーバーに送信することもできます。

以上を実装したサンプルコードを下に載せておきます。この記事の上の画像を表示したものです。

CalendarExtender.aspx.cs

using System.Web.UI;

namespace WebForms1
{
    public partial class CalendarExtender : System.Web.UI.Page
    {
        protected void Page_Init(object sender, EventArgs e)
        {
            // マスターページに配置した ScriptManager のプロパティ
            // EnableScriptGlobalization を true に設定する
            ScriptManager sm = ScriptManager.GetCurrent(this.Page);
            sm.EnableScriptGlobalization = true;
        }

        protected void Page_Load(object sender, EventArgs e)
        {
            // ユーザーが選択した日付を取得・表示
            Label1.Text = TextBox1.Text;
        }
    }
}

CalendarExtender.aspx.cs

<%@ Page Title="" Language="C#" MasterPageFile="~/Site.Master"    
    AutoEventWireup="true" CodeBehind="CalendarExtender.aspx.cs" 
    Inherits="WebForms1.CalendarExtender" %>

<asp:Content ID="Content1" ContentPlaceHolderID="HeaderContent" runat="server">

    <script type="text/javascript">
        // Calendar の表示位置を img 要素直下に調整する
        function onCalendarShown(sender, args) {
            var img = $get('image1');

            sender._popupDiv.parentElement.style.top =
                img.offsetTop + img.height + 'px';
            sender._popupDiv.parentElement.style.left =
                img.offsetLeft + 'px';
        }

        // ユーザーが日付を選択すると発生するイベントのリスナ
        function sendResult(sender) {
            // 選択した日付は以下のようにして取得できる
            var selectedDate = sender.get_selectedDate();

            // ポストバックすればサーバー側では TextBox1.Text 
            // プロパティから選択した日付を取得できる
            var btn = $get('<%=Button1.ClientID %>');
            btn.click();
        }
    </script>

    <style type="text/css">
        /* TextBox1 を非表示にする */
        .style1 {
            display: none;
        }
    </style>

</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
    <h3>Ajax Control Toolkit CalendarExtender</h3>    
   
    <asp:TextBox ID="TextBox1" runat="server" CssClass="style1">
    </asp:TextBox>

    <%--PopupButtonID に設定するのはサーバーコントロールでなくても可--%>
    <img src="images/Calendar_scheduleHS.png" id="image1" alt="" />

    <ajaxToolkit:CalendarExtender ID="CalendarExtender1" 
        runat="server" 
        PopupButtonID="image1"
        TargetControlID="TextBox1" 
        DaysModeTitleFormat="yyyy年M月"
        TodaysDateFormat="yyyy年M月d日"
        Format="yyyy/MM/dd"
        OnClientDateSelectionChanged="sendResult" 
        OnClientShown="onCalendarShown" />

    <br />
    <%--ポストバックするための Button コントロール--%>
    <asp:Button ID="Button1" runat="server" Text="PostBack" />

    <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
</asp:Content>

なお、本題とは関係ないことですが、カレンダー上の日付の表示はデフォルトではなく、先の記事「CalendarExtender の日付の表示」に書いたように日本語形式にしています。

Ajax Control Toolkit は v7.x 以前では、使用する複数のスクリプトファイルをバンドルするために ToolkitScriptManager を使っていました。（ScriptManager ではなくて）

v15.1 以降では、DevExpress の記事 How to use Bundling and CDN にありますように、ScriptManager を使ってのバンドリングが可能となっています。（ちなみに、v15.1 以降 ToolkitScriptManager は提供されていません）

以下の画像の赤枠で囲った部分を見てください。これが Ajax Control Toolkit 用の複数のスクリプトファイルがバンドルされた結果です。

ASP.NET 4.5 以降で、Visual Studio Commnunity 2015 の［Web フォーム］のテンプレートを利用して作った ASP.NET Web Forms プロジェクトに、Ajax Control Toolkit を追加し、必要なスクリプトファイルを ScriptManager で統合できるようにしてみましたので、その方法や結果から分かったことを備忘録として書いておきます。

先の記事「ASP.NET 4.5 ScriptManage」に書きましたように、Microsoft Ajax、jQuery 等のスクリプトファイルが ScriptManager で統合できるようになり、［Web フォーム］のテンプレートを利用して作ったプロジェクトでは、それらが設定済みとなっています。

なので、そのプロジェクトに Ajax Control Toolkit 用のバンドル機能を追加すると、重複などの問題で修正が必要かも知れないと思っていましたが、自分が試した限りはそういうことはなかったです。

まず、NuGet で AjaxControlToolkit のパッケージをインストールします。それだけでも基本的なコントロールは動くようになりますが、ScriptManager を利用したバンドリングを可能にするためには、StaticResources パッケージも追加でインストールする必要があります。

バージョンは Ajax Control Toolkit 本体と合わせた方がよさそうです。ここでは、先にインストールした既存の Ajax Control Toolkit 本体が v17.1.1 なので、StaticResources のバージョンもそれに合わせて v17.1.1 にしました。

なお、Visual Studio で［空］のテンプレートを選択してプロジェクトを作った場合は StaticResources パッケージだけでは不足です。追加で Antlr, WebGrease などの NuGet パッケージもインストールする必要がありますが、StaticResources をインストールする際それらも自動的に追加されるはずです。

StaticResources のインストールが完了すると、以下の画像の赤枠で示したフォルダが生成され、その中に CSS ファイル、イメージ、スクリプトファイルが格納されます。

Content/AjaxControlToolkit フォルダ下の Images フォルダには .gif, .jpg, .png などの画像ファイルが、Styles フォルダには minify してない .css ファイルと minify した .min.css ファイルの両方が格納されます。

Scripts/AjaxControlToolkit フォルダ下の Debug フォルダには minify してない .debug.js ファイルが、Release フォルダには minify した .js ファイルが格納されます。

さらに、web.config にはデフォルトで以下の設定が追加されます。

<ajaxControlToolkit 
    useStaticResources="true" 
    renderStyleLinks="false" />

DevExpress の記事 How to use Bundling and CDN の説明によるとバンドル機能をコントロールするもののようです。

あとは、DevExpress の記事 "Manual changes required" のセクションを参考に、ScriptManager に ScriptReference を追加してやればスクリプトは一番上の画像に示したようにバンドルされます。

具体的には以下の画像の赤枠で示したコードを追加してやります。

赤枠部分以外の ScriptManager のコードは、Visual Studio の［Web フォーム］のテンプレートを利用して作った ASP.NET Web Forms アプリのマスタページ Site.master に自動生成されたものです。

.css ファイルについても、DevExpress の記事に従って Styles.Render をページの適当な場所に追加してやれば、.css ファイルを参照する link 要素がレンダリングされます。

ただし、.css ファイルは web.config の compilation 要素で debug="false" とするか、Global.asax の Application_Start メソッドで BundleTable.EnableOptimizations を true に設定しないとバンドルされませんので注意してください。（スクリプトファイルと異なります。理由不明）

BundleTable.EnableOptimizations を true に設定する意味については Microsoft の文書 Bundling and Minification を見てください。抜粋すると "The following code (true に設定すること) enables bundling and minification and overrides any setting in the Web.config file." ということだそうです。

web.config の compilation 要素の debug 属性の true / false でどう異なるかですが、自分が検証した限りでは、

• .css ファイル: true で minify ＆バンドルあり、false で minify なしでバンドルもなし。
• スクリプトファイル: true / false の設定にかかわらず minify ＆バンドルあり。

・・・となりました。

スクリプトファイルの結果がちょっと解せないです。そのままでは、debug="true" にしてもスクリプトのデバッグができません。

.debug.js 版をダウンロードさせてデバッグ可能なようにするには、上の ScriptManager の設定のところで ScriptReference をコメントアウトする他なさそうです。

あと、minify＆バンドルされたスクリプトファイルのサイズですが、何と 1,248,841 バイトもありました。Ajax Control Toolkit は使わないのにスクリプトをダウンロードするように設定するというのは避けた方がよさそうです。

ちなみに、.CSS ファイルの方は minify＆バンドル後で 56,240 バイトでした。

最後にもう一つ、HtmlEditorExtender には AjaxControlToolkit.HtmlEditor.Sanitizer, HtmlAgilityPack が必要です。

それなしでは先の記事「Ajax Control Toolkit デモ」で述べたような意味不明のエラーが出てハマるかもしれませんのでご注意ください。