このところ、Microsoft ASP.NET MVC Framework(リンク)がますます取り上げられている。ASP.NET MVCの能力および柔軟性のおかげで、デベロッパが同梱されているライブラリ以外のライブラリを使用することができる。人気のあるJavaScriptフレームワークであるjQuery(リンク)も例外ではない。
どんなWeb開発プラットフォームから使用しやすいJavaScriptラ イブラリとして使用されているjQueryの人気が、次期ASP.NET MVC Frameworkを特に魅力的にしている。InfoQのJames Estes氏による記事「バージョン1.2とjQuery UIの公開と共に勢いを増したjQuery」(参考記事)は、近ごろのリリースについての詳細や多くのすばらしい機能について取り上げている。
デベロッパが jQueryのような第三者のライブラリを使用することができる理由の1つは、デザインインされたASP.NET MVCの拡張可能性である。ASP.NET AJAXの代わりにASP.NET WebformsおよびjQueryを使用することは、いっそう多くの作業であった。
この記述時に、ASP.NET MVCはPreview 4にあり、Preview 4で動作するテクニックによっては、以前のプレビューでは動作しない場合がある。Preview 4は、CodePlexからダウンロードすることができる(リンク)。
設定する
jQueryについての完全なチュートリアルを意図したものではないが、ASP.NET MVCでJavaScriptライブラリの使用例を提示する。Chad Myers氏によるチュートリアル(リンク)は、開始方法についての見識を述べている。
- ASP.NET MVCでのjQueryの使用の最初は、確実にMVC Frameworkを用意し、CodePlexからダウンロードおよびインストール(リンク)(注：ASP.NET MVC Frameworkの実行のため、Visual Studio 2008を実行している必要がある)。
- ASP.NET MVC Frameworkのインストール後は、新たにASP.NET MVC Web Applicationプロジェクトを作成する必要がある。
- 次にjQueryをダウンロードし(リンク)、PackedまたはMinifiedバージョンを取得し、新たなWebアプリケーションプロジェクトのContentフォルダーに配置する。
- ContentフォルダのjQueryファイルにリファレンスを追加する。
<script type="text/javascript" src="../../Content/jquery-1.2.6.pack.js"> </script>
単純な例
近ごろRyan Lanciaux氏によって書かれた記事、「jQuery and the ASP.NET MVC Framework」(リンク)は、 ASP.NET MVC FrameworkでjQueryを使用する主な要因について概説している。Ryan氏は、自身の記事内でその詳細について詳述し、うまく細分化してい る。
まず初めにおこなうことは、ASP.NET MVC (Preview 4) Projectを作成することである。Homeコントローラーの下で新しいビューとコントローラーアクションを作成し、以下のラインをビューに追加する。
This is red text, this is blue and this is green
新たなMVCプロジェクトからControllersフォルダを右クリックし、Add New Itemを選択し、MVC Controllerクラスを選択すると、この作業は完了する。次は新たなController Actionの作成である。
次にModelからカラー値を返すController Actionを作成する必要がある。あいにく、ページやそのようなものを再ロードしたくはない。Ajaxでおこないたい。MVC Frameworkについてよい事は、これを達成するために使用できるJsonResult型があることである。
public JsonResult RGBColors() { Colors.RGB color = new Colors.RGB(); return Json(color); }
次に単純なクラスを作成して、モデルからのカラーを表す。
namespace Colors{
public class RGB
{
public string Red = “#FF0000″;
public string Green = “#00FF00″;
public string Blue = “#0000FF”;
}
}
そして最後に、すべてをjQueryと結び付ける。
$(document).ready(function() {
$.getJSON(“/Home/RGBColors”,
{},
function(data){
$(“.red”).css(“color”, data.Red);
$(“.blue”).css(“color”, data.Blue);
$(“.green”).css(“color”, data.Green);
});
});
Ryan氏は以下のような重要点を指摘している。
このjQueryコードがコントローラにあるJSONメソッドを呼び出していることに注意してください。ページの再ロードの場合、モデルで定義されたカ ラー値を取得しています。ほとんど痛みが伴いません。かなり単純ですが、この技術をWebで採用する場合は、可能性が大きく広がります。
この簡潔な例では、JSONを使用した技法を示しているが、完全なアプリケーションはRyan氏とJoel氏兄弟によって記述されたTheme Generator Tool(リンク)である。これを書いたとき、MicrosoftがASP.NET MVC FrameworkのPreview 5をリリースしていることに注意する。