Visual Studio Community 2013にAjax Control Toolkitを追加しました

2015-09-13:最新のAjax Control Toolkitは、この日記を書いた時点のバージョンからかなり変更されています。この日記は当時の古いバージョンに対するものですのでご注意ください。

Visual Studio Community 2013（以下「Visual Studio」）では、ASP.NETのWebフォーム開発で使えるコントロールの種類が少なく、例えば入力欄のオートコンプリート（何文字か入力すると候補を出して補完してくれる）なども簡単には実現できません。そこでAJAX Control Toolkitを導入してみました。その手順をまとめます。

Ajax Control Toolkitはオープンソースのライブラリで、ASP.NETのWebフォームの開発を行う際に、40種類以上のコントロールがドラッグ＆ドロップで簡単に追加できる優れものです。オートコンプリート、バルーンヘルプ、日付入力のためのカレンダー、リッチテキストのエディタ、カラーピッカー、コンボボックス、折りたたみできるパネルなどなど、高機能なものがたくさんあります。

英語ですが、Ajax Control Toolkitのサイトです。詳細はこちらを。
Ajax Control Toolkit (maintained by DevExpress)

2015-09-13:以下のインストール手順は、この日記を書いた当時の古いバージョンに対するものです。最新版ではツールボックスへの設定もインストーラがやってくれます。

まずインストールですが、これはiPentecさんのページが非常にわかりやすくまとまっています。
なお、Visual Studio Community 2013で普通にASP.NETのWebフォームのプロジェクトを作ると.NETは4.5になるので、「Ajax Control Toolkit .NET 4.5」をダウンロードしました。場所はどこでも良いみたいなので、私は「C:\Library\AjaxControlToolkit.Binary.NET45」に展開して使っています。

iPentecさんのサイト：Ajax Control Toolkit のインストール

2015-09-13:以下のプロジェクトごとの作業は、この日記を書いた当時の古いバージョンに対するものです。最新版ではSite.Masterの編集は不要になっています。

Visual Studioへのインストール後、実際に使うためにプロジェクトごとの作業が必要になります。
ここでは以前WebアプリケーションをMicrosoft Azureで動かしてみましたで作った素の状態のWebフォームのプロジェクトで、リッチテキストのエディタコントロールを追加してみます。

プロジェクトを開いたら、まず「Site.Master」を編集します。
Visual StudioでASP.NETのWebフォームのプロジェクトを作ると、AJAXを使えるようにするために、このSite.Masterに「ScriptManager」が自動で挿入されています。しかし、Ajax Control Toolkitのコントロールを使うためには、これを拡張した「ToolkitScriptManager」にすり替える必要があるのです。また、既存のライブラリと競合してしまうので、既存のライブラリを参照しないようにする修正も必要です。

具体的な手順ですが、まず「Site.Master」のソース画面を開きます。

そして、(1)「」を「」を削除します。

変更すると次のようなソースになるはずです。

次に、競合するライブラリの参照を削除します。
ソリューションエクスプローラーの参照設定の中にある「Microsoft.ScriptManager.MSAjax」を右クリックして「削除」します。

参照設定の一覧から「Microsoft.ScriptManager.MSAjax」がなくなればOKです。

これでやっと準備が完了です。

2015-09-13:以下のリッチテキスト入力欄を追加する手順は、この日記を書いた当時の古いバージョンに対するものです。最新版では、まず最初に標準のTextBoxを配置し、そこにAjax Control ToolkitのHtmlEditorExtenderを追加する形になっています。なお、このHtmlEditorExtenderはサニタイズの機能を備えているようで、実際に動かすには別途Sanitizerをインストールするか、もしくはプロパティのEnableSanitizationをFalseにする必要があります。

あとは実際にコントロールを追加するだけです。
「Default.aspx」のデザイン画面を開きます。そして、左のツールボックスからAjax Control ToolktiのEditorコントロールを選び、タイトルの直下にドラッグ＆ドロップで挿入します。この辺は普通にコントロールを挿入するのと同じです。

これでビルドして実行してください。
リッチテキストの入力欄が使えるはずです。

なお、準備の手順が抜けていると分かりにくいエラーが表示されます。手元では次のようなエラーになりました。

特に

JavaScript 実行時エラー : AjaxControlToolkit requires ASP.NET Ajax 4.0 scripts. Ensure the correct version of the scripts are referenced. If you are using an ASP.NET ScriptManager, switch to the ToolkitScriptManager in AjaxControlToolkit.dll.

という方のエラーは、ToolkitScriptManagerに切り替えていてもMicrosoft.ScriptManager.MSAjaxの参照が残っていると起きるので気をつけましょう。

あと、Microsoft Azure（以下「Azure」）を使っている場合は、もう1つ注意があります。
AzureにAjax Control Toolkitを使わない状態で一度発行していると、Azureに不要なライブラリがアップされてしまっており正常に動きません。
Azureに発行しても、なぜか入れたはずのEditorコントロールが表示されなかったりエラーになったりします。

ローカルでは参照設定を外すだけで良いのですが、一度Azureに発行していた場合は、サーバーエクスプローラーでWebサイトの「ファイル」の「bin」の下にある「Microsoft.ScriptManager.MSAjax.dll」を右クリックして「削除」してください。