ダウンロード サンプルファイル (1.2 MB)
ASP.NET MVCとASP.NET AJAX Control Toolkit
ASP.NET MVCでの開発はクライアントサイドスクリプト抜きには語れないと言っても過言ではありません。プロジェクトに標準で付加されているjQueryやMicrosoft AJAX LibraryなどのJavaScriptライブラリを活用することが多いことでしょう。本項ではASP.NETユーザーにとって馴染み深いControl Toolkitが提供しているJavaScriptライブラリを活用したASP.NET MVCのサイト構築方法を学びます。
ASP.NET MVCでAJAX Control Toolkit
それでは、さっそくASP.NET AJAX Control ToolkitをASP.NET MVCのサイト上で利用する方法について紹介します。
ASP.NET MVCでは紹介済みの通りサーバーコントロールを利用しないため、本来であればAJAX Control Toolkitは利用できません。しかし、必要な環境の所にも書いたようにAJAX Control Toolkitは現在ScriptファイルとCSS/GIFなどを格納したScriptFilesOnly版も公開されています。こちらを利用して、ダイレクトにスクリプトを活用することで、AJAX Control Toolkitの機能をASP.NET MVCのサイト上でも利用できるようになります（図6～図7）。
AJAX Control Toolkitを利用するスクリプトを知る方法
ScriptFilesOnly版は数多くのスクリプトが格納されています。例えば、CalendarExtenderの機能を利用したい！と思っていても、それを表示させるためには次の項目を知っている必要があります。
- どのようなスクリプトファイルが必要なのか？
- どの順番でスクリプトファイルを読み込ませるか？
- どのように記述してスクリプト実行するか？
理想は時間をかけてScriptFilesOnlyにあるファイルに目を通して知れればいいのですが、開発者の方は往々にして時間に追われていることがあります。そのため、ちょっとした工夫をしてみましょう。多少手間はかかりますが、最適化されたScriptを改行して読み進めるよりは現実的です。
CalendarExtenderコントロールのスクリプトを知る
それでは見た目にも分かりやすいCalendarExtenderコントロールを例に見てみましょう。
（1）Scriptファイルの数と種類、宣言順を調べる
AJAX Control TookitはScriptFilesOnly版の他に、Extenderコントロールのソースが含まれているAjaxControlToolkitSource版があります。こちらを別途ダウンロードして、Extender名.debug.jsファイルを参照すれば記述されています。
CalendarBehavior.debug.jsファイルを開くと、上部に次の参照コードが記述されています。
/// <reference name="MicrosoftAjax.debug.js" /> /// <reference name="MicrosoftAjaxTimer.debug.js" /> /// <reference name="MicrosoftAjaxWebForms.debug.js" /> /// <reference path="../ExtenderBase/BaseScripts.js" /> /// <reference path="../Common/Common.js" /> /// <reference path="../Common/DateTime.js" /> /// <reference path="../Common/Threading.js" /> /// <reference path="../Compat/Timer/Timer.js" /> /// <reference path="../Animation/Animations.js" /> /// <reference path="../Animation/AnimationBehavior.js" /> /// <reference path="../PopupExtender/PopupBehavior.js" />
上記のソースから、必要なスクリプト（CSS）と読み込み順が下記と分かります。
- MicrosoftAjax.debug.js
- ExtenderBase/BasScripts.js
- Common/Common.js
- Common/DateTime.js
- Common/Threading.js
- Compat/Timer/Timer.js
- Animation/Animations.js
- Animation/AnimationBehavior.js
- PopupExtender/PopupBehavior.js
- Calendar.CalendarBehavior.js（自分自身も追加）
ASP.NET MVCでは、MicrosoftAjaxTimer.debug.js、MicrosoftAjaxWebForms.debug.jsの2ファイルは存在していないので追加はしません。また、CalendarBehavior.jsファイル自身は記述されていないので、末尾に追加します。以上のスクリプトファイルが実行するために必要なファイルです。
この記事は参考になりましたか？
- ASP.NET MVCフレームワーク 正式版 入門連載記事一覧
-
- ASP.NET MVCと周辺技術の活用テクニック
- ASP.NET MVCのセキュリティ対策とクライアントサイドスクリプト活用方法
- ASP.NET MVCの開発応用編1 ～リポジトリパターンをマスターする～
- この記事の著者
-
山田 祥寛（ヤマダ ヨシヒロ）
静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for Visual Studio and Development Technologies。執筆コミュニティ「WINGSプロジェクト」代表。主な著書に「独習シリーズ（Java・C#・Python・PHP・Ruby・JSP＆サーブレットなど）」「速習シリーズ（ASP.NET Core・Vue.js・React・TypeScript・ECMAScript、Laravelなど）」「改訂3版JavaScript本格入門」「これからはじめるLaravel実践入門」「はじめてのAndroidアプリ開発 Kotlin編 」他、著書多数。
※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です
-
WINGSプロジェクト ナオキ（ナオキ）
＜WINGSプロジェクトについて＞有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ（代表 山田祥寛）。主にWeb開発分野の書籍／記事執筆、翻訳、講演等を幅広く手がける。 2026年時点での登録メンバは約50名で、現在も執筆メンバを募集中。興味のある方は、どしどし応募頂きたい。著書、記事多数。 RSS X: @WingsPro_info（公式）、@WingsPro_info/wings（メンバーリスト） Facebook
※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です
この記事は参考になりましたか？
この記事をシェア
