ASP.NET AJAX Libraryによるスクリプトからのコントロール呼び出し
さて、ここで実際にASP.NET AJAX Libraryに統合されたAJAX Controlの使い方を紹介します。基本的な構文は次のとおりです。
Sys.create.使用したいコントロール("要素(IDまたはクラスを指定)");
構文が統一化され、利用しやすくなっています。必要に応じて、プロパティの値を第2パラメーター以降に設定します。また、jQueryの統合により、jQueryライクな構文も利用できるようになっています。
$("要素(IDまたはクラスを指定)").使用したいコントロール();
どちらの記載でも結果は同じなので利用しやすい方で記述してください。
それでは実際に上記構文を利用してAJAX Controlを使用してみましょう。
Watermarkコントロール
テキストボックスに値が入力されるまで、指定された文字列を表示させるWatermarkコントロールです。
使用方法は次のとおりです。
<head runat="server">
<title>Watermark</title>
<link rel="stylesheet" type="text/css" href="Stylesheet.css" />
<script src="http://ajax.microsoft.com/ajax/beta/0911/Start.debug.js" type="text/javascript"></script>
<script src="http://ajax.microsoft.com/ajax/beta/0911/extended/ExtendedControls.debug.js" type="text/javascript"></script>
<script type="text/javascript">
// requireメソッドで、jQueryとWatermarkコントロールに必要なスクリプトをダウンロード
Sys.require([Sys.scripts.jQuery, Sys.components.watermark], function () {
// .sampleクラスのテキストボックスにWatermarkコントロールを生成
Sys.create.watermark(".sample", "文字を入力してください", "Watermark");
// IDが#jsampleのテキストボックスにWatermarkコントロールを生成
$("#jsample").watermark("jQueryライクな構文で作成", "Watermark");
});
</script>
</head>
<body>
<p>
<input class="sample" type="text" />
</p>
<p>
<input id="jsample" type="text"/>
</p>
</body>
Sys.require()メソッドは、ASP.NET AJAX Libraryで追加されたメソッドで、第一パラメタで指定したコンポーネントに必要なファイルをMicrosoft Ajax CDNからダウンロードします。複数のコンポーネントのスクリプトファイルをダウンロードしたい場合は、配列型で記載します。このメソッドは、コントロールを生成するスクリプトファイルを意識することなく利用できるため、ASP.NET 4.0時代に活用しやすいメソッドであると言えます。
上記メソッドを利用するとWatermarkコントロールを生成する準備が出来ます。肝心のWatermarkコントロールですが、生成にはSys.create.watermark()メソッドを使用します。第1パラメーターにはクラスを、第2パラメーターにWatermarkTextプロパティを、第3パラメーターにはWatermarkCssClassプロパティの値をそれぞれ入力しています。
Watermarkコントロールを生成する為に必要なスクリプトファイルはASP.NET AJAX Library内のTextboxWatermark.debug.jsファイルを見ると解ります。これは、各コントロールに共通しているので、各コントロールのスクリプトファイルを知りたい場合に活用してください。
jQueryライクな構文では、最初に要素を指定しているため、watermarkメソッドでは、第1パラメーターにWatermarkTextプロパティを、第2パラメーターにWatermarkCssClassプロパティの値を設定しています。
実行結果は図5の通りです。
Calendarコントロール
テキストボックスに対する拡張コントロールで、ポップアップでカレンダーが表示されます。
使用方法は次のとおりです。
<head runat="server">
<link href="http://ajax.microsoft.com/ajax/beta/0911/extended/Calendar/Calendar.css" rel="stylesheet" type="text/css" />
<script src="http://ajax.microsoft.com/ajax/beta/0911/Start.debug.js" type="text/javascript"></script>
<script src="http://ajax.microsoft.com/ajax/beta/0911/extended/ExtendedControls.debug.js" type="text/javascript"></script>
<script type="text/javascript">
// requireメソッドで、jQueryとCalendarコントロールに必要なスクリプトをダウンロード
Sys.require([Sys.scripts.jQuery, Sys.components.calendar], function () {
Sys.create.calendar(".calendar");
// IDが#jsampleのテキストボックスにCalendarコントロールを生成
$("#jsample").calendar();
});
</script>
</head>
<body>
<p>
通常の構文で作成
<input Class="calendar" />
</p>
<p>
jQueryライクな構文で作成
<input id="jsample" type="text"/>
</p>
</body>
CalendarコントロールではSys.require()を使用してCalndarコントロールのスクリプトファイルをダウンロードした後、基本構文通りにCalendarコントロールを生成しています。
jQueryライクな構文では、基本構文通りの記述を行っています。
実行結果は図6の通りです。
データアクセス
JavaScriptで定義したオブジェクトを簡単に表示できるデータバインディングも実現できるようになりました。詳しくは既存の記事「ASP.NET AJAX 4.0を予習する（前編）」に記載されているのでそちらを参照ください。
まとめ
今回はASP.NET 4.0の全体像とコア機能、新機能を紹介しました。特に、クライアントサイド開発部分に大きな強化を感じられたのではないでしょうか？ もちろん、サーバーサイドの新機能や機能強化はありますし、次回はそちらについて触れる予定ですが、ASP.NET 4.0は多くのWeb開発者にアプローチを行うという傾向を強く押し出しているため、筆者の感想としてASP.NET 4.0はクライアントサイド開発の大幅な強化が目玉になるのではないかと思います。
今目の前で変革してきているASP.NET／VS 2010に興味を持っていただければ幸いです。
