ASP.NET MVC 2とjQuery Template
Visual Studio 2010では、Web Form/MVC 2/Dynamic Data各プロジェクトテンプレートにjQueryが含まれています。マイクロソフト自身も、ASP.NETのクライアントサイドのAJAX実装はjQueryを推奨しています。これによりクライアントサイドの開発にjQueryを使用する機会も多くなるでしょう。
また、『クライアントサイドの開発強化に注目！～VS2010＋ASP.NET 4.0新機能（前編）～ 』で紹介したASP.NET AJAX Libraryですが、現在はASP.NET AJAX Control Toolkitに内包されています。しかし、Beta時代のものを残しているだけです。マイクロソフトもjQueryコミュニティと同じプロセスで技術提供を行う予定です。そのため、今後はjQuery Templateなど、jQueryプラグインなどの使用を推奨しています。
VS 2010は、JavaScriptのデバッグ、インテリセンスの活用というコードエディタに関する機能が提供されていますが、jQueryを使う場合、さらに便利なスニペットがCodePlexで用意されています。
jQuery Code Snippets for Visual Studio 2010は、ショートカットキー並びに、コードスニペット上にjQueryのひな型となるスニペットを131種類内包しているアドインです。利用方法は、コマンドエディタ上で、ショートカット入力し、Tabボタンを押すだけです（図4～図5）。
一部のショートカット例を記載します。
| ショートカット | 概要 |
| jq | <script>タグとjQueryの宣言を行うスニペットを挿入 |
| jqclick | jQuery宣言内で使用できるクリックイベントのテンプレート |
| jqmouseover | jQuery宣言内で使用できるマウスオーバーイベントのテンプレート |
| jqmouseleave | jQuery宣言内で使用できるマウスリーブイベントのテンプレート |
開発者である以上{}などの記号入力にも慣れているとは思いますが、上記ショートカット+Tabキーによる入力文字数の削減は確実に開発生産性の向上につながります。jQuery開発を行う際にはぜひインストールしてみてください。
ショートカットの一覧はjQueryのサイトに記載されているので使用するものだけでも覚えて活用してみましょう。
それでは実際にjQuery Templateを使用してみましょう。なお、本稿で取り扱うjQuery Templateは、Microsoftが開発を進めているTemplateを使用します（jQueryコアチームのTemplateではありませんのでご注意ください）。
jQuery Templateの使用
まずは、jQuery Templateのダウンロードからです。jQuery Templateは現在githubで公開されています。
jQuery Templateのページにアクセスし、［Download Source］をクリックして、zipまたはtar形式どちらかを選択し、ソース一式ダウンロードしてください。その後、プロジェクトのScriptsフォルダ内にjquery.tmpl.jsファイルを追加して、利用ページにスクリプトを宣言します。
jQuery Templateの使用
jQuery TemplateはWPF/Silverlightによるテンプレートと同じ概念です。JSONのデータをjQuery Templateを使用して値をセットします（図6）。
jQuery Templateは大枠で言うと3ブロックに分かれます。
<!-- （1）テンプレートを格納する要素 -->
<ul id="ulContainer"></ul>
<!-- （2）テンプレートを適用する要素 -->
<script id="liTemplate" type="text/html">
<li>
名前 : {{= name }}
</li>
</script>
<!-- （3）JSONデータと、jQuery Template構文 -->
<script type="text/javascript">
var people = [
{ name: "ナオキ"},
{ name: "ふじこ"},
{ name: "たまき"}
];
$("#liTemplate").tmpl(people).appendTo("#ulContainer");
</script>
順に説明します。
（1）テンプレートを適用した要素を格納する要素です。そのテンプレートに応じて必要な要素を宣言してください。1つしか要素がない場合は要素タグでもOK（今回の例では$(ul)など）。
（2）テンプレートを適用するscriptタグ。typeはtext/htmlにします。値を表示するために{{=データ名}}という式を記載します。
（3）peopleオブジェクトを用意（実際活用する場合はWebサービスなどで取得したJSONデータ）し、後はjQueryでコードを記述します。tmplメソッドはjQuery Templateが提供するメソッドで、パラメタとして渡されたオブジェクトを"id=liTemplate"の要素に対して値の文字列を追加します。そしてappendToメソッドで"id="ulTemplate"の要素に格納しています。
さまざまな場面で利用の価値はありますが、恐らくWCF Data Servicesとの連動などが多くなる可能性があります。
WCF Data ServicesとjQuery Templateを利用する
WCF Data Servicesは、AtomPubとJSONフォーマットがサポートされています。そのため、jQueryのgetJSONメソッドを利用することで、WCF Data ServicesからJSONによるデータ取得ができます（図7～8）。では、実際に利用してみましょう。手順は次のとおりです。
- WCF Data Servicesのサービスにアクセス
- jQueryのgetJSONメソッドを記述
- jQuery Templateの記述を行う
今回は今年実施されたTech・Ed North America 2010のサイトにある“TechEd 2010 OData Service”を利用します。
もし、自前のWCF Data Servicesを用意する場合は、下記要領で実施します。
- 新たにWebプロジェクトを追加（WCF Data Servicesを利用できるなら何でもOK）
- PubsデータベースのEDMを作成
- WCF Data Servicesを作成
- 元のプロジェクトにjQueryのgetJSONメソッドを記述
- jQuery Templateの記述を行う
こちらに関する詳しいコードはサンプル（GetWDS.aspx）に含まれているので、そちらを参照ください。
jQuery Templateを利用する際に、サービスからどのようなJSONオブジェクトが取得されているか知ることが重要です。調べる方法はいくつかありますが、お勧めはFiddlerというツールです。
Fiddler起動後に［Request Builder］タブをクリックします。図9のようにURLと、RequestHeadersに”Accept: application/json”と記述し、Executeボタンをクリックします。
クリックすると、左のペインに実際リクエストした結果が表示されます。ダブルクリックした後、右下のペインにあるRawタブをクリックするとJSONの形式を確認できます（図10）。
次にgetJSONメソッドを記述します。
jQueryのgetJSONメソッドとjQuery Templateの記述
クライアントサイドから、WCF Data ServicesにJSONの応答を実行するgetJSONメソッドと、Data Servicesにアクセスした直後の値をjQuery Templateで表示させます。実際の記述は以下のとおりです。
- 新しくViewPageを追加（名前は何でもOK。サンプルではGetWDS.aspx）し、コントローラー側でルーティング設定を実施
- 各種スクリプトの宣言とgetJSONメソッドの記述など
下記のように記述します。
<script type="text/javascript" src="<%= ResolveUrl("~/Scripts/jquery-1.4.1.js") %>"></script>
<script type="text/javascript" src="<%= ResolveUrl("~/Scripts/jquery.tmpl.js") %>"></script>
<h3>Tech・Ed North America 2010のセッションタイトルとレベルを表示</h3>
<!-- （1）テンプレートを格納する要素 -->
<ul id="sessions">
</ul>
<!-- （2）テンプレートを適用する要素 -->
<script id="contacttmpl" type="text/html">
<li><b>セッションタイトル</b>：{{= Title }}
<ul>
<li><b>レベル</b>：{{= Level }}</li>
</ul>
</li>
</script>
<!-- （3）JSONデータと、jQuery Template構文 -->
<script type="text/javascript">
function callWSD() {
$(function () {
// WCF Data Servicesにリクエストと応答時のテンプレート処理
$.getJSON("http://odata.msteched.com/sessions.svc/Sessions?$select=Title,Level", function (response) {
$("#contacttmpl").tmpl(response.d.results).appendTo("#sessions")
});
});
}
</script>
<input type="button" value="サービス呼び出し" onclick="callWSD()" />
順に解説します。
（1）最初のサンプルと変わりありません。idでsessionsを指定しています。
（2）jQuery Templateでは、if、else、eachステートメントをサポートしています。記述は{{ }}で宣言的に記述するだけです。今回は、取得したJSONデータ（Title、Levelの項目のみ格納）を<ul><li>タグで記述しています。
（3）テンプレートを適用する"id=contacttmpl"に対してレスポンスとして取得したデータ（response.d.results）を渡します。その後、appendToメソッドで"id=sessions"の要素に格納しています。なお、この関数はボタンクリック時にcallWSDメソッドとして呼び出されます。
$.getJSONメソッドですが、の第一パラメタにサービスのURLを、第二パラメタにコールバック関数を記述します。今回はURLにTechEd 2010 OData Serviceを、第二パラメタにjQuery Templateを記述します。
実行結果は図7～8のようになります。
ご覧のように、テンプレートはWCF Data Servicesとの相性が良いです（WCF+JSONでももちろんOK）。実務の中で組み合わせて活用してみてはいかがでしょうか。
まとめ
ASP.NET MVC 2に関する新機能部分を前中後編に分けてお送りしました。ASP.NET自身も順当に進化していますが、MVCはさらに早い進化を遂げています。MVC 3は来年にはリリースされますので、MVCは逆行的だ！と言わずに進化している部分得意としている部分を認知し選択肢を広めてみてはいかがでしょうか。
また、最後になりますが、Microsoftのエバンジェリスト井上章さんが作成されたMVC 2のサンプルアプリケーションEdtterがCodePlexにあります。MVC 2の基本的な機能は網羅されていますので、MVC 2に興味があるけど実際のサンプルが欲しい！という方は参考にしてみることをお勧めします。
