jQuery対応グリッドをASP.NET MVCで利用し、リッチな表現を簡単に実現する

　Webアプリケーション開発におけるJavaScriptライブラリのデファクトスタンダードとも呼べるjQueryは軽量かつ高機能なライブラリです。本記事ではこの利点を活かしたjQuery対応コンポーネント集であるNetAdvantage for jQueryを利用しリッチなグリッド表示を簡単に実現します。

　また、このコンポーネント集ではMicrosoft社のASP.NET MVCに対応したラッパークラスを提供しているため、ASP.NET MVC 3のRazor記法に慣れている場合はこのラッパーを利用しコントロールを利用できます。

対象読者

　jQueryに興味のある人。ASP.NET MVCに興味のある人。

必要環境

　「jQueryを利用した軽量・高機能なクライアントサイド実装！」において紹介されているようにjQueryコンポーネントを単体で利用する場合には下記のソフトウェアのみで利用できます。

• NetAdvantage for jQuery

　本記事ではASP.NET MVC3を利用するため、さらに次のソフトウェアが必要になります。

• NetAdvantage for jQuery
• Visual Studio 2010あるいはVisual Web Developer 2010 Express
• ASP.NET MVC 3 RTM Tools Update
• SQL Server 2008 R2 RTM Express

　サンプルはVisual Studio 2010 SP1 Ultimate＋ASP.NET MVC 3で作成しています。また、Windows 7 Ultimate 64bit版において動作を検証しています。

サンプル実行時の注意環境

　サンプルには必要なCSSスクリプトファイルが組み込まれていません。「jQueryを利用した軽量・高機能なクライアントサイド実装！」記事の「NetAdvantage for jQuery の利用方法」項や本記事の「プロジェクトに必要なファイルを追加」項を参考に必要ファイルを組み込んでください。また、アイコンファイルについてもNetAdvantage ICONS各製品のサンプルアイコンを利用しているため、含まれていません。製品ページよりサンプルアイコンをダウンロードしてください。

コンポーネントのインストール

　はじめてNetAdvantage for jQueryを使用する場合は、事前にソフトウェアをインストールする必要があります。インフラジスティックス社のWebページからインストーラーをダウンロードしてください。この製品は有償ですが、20日間すべての機能を試用できる無償トライアル版としても利用が可能です。

サンプルのシナリオ

　今回作成するサンプルではとある地域の複合商業施設一覧を表示するグリッド部分の実装を行います。完成版のスクリーンショットは下記のとおりとなります。

図1 今回のサンプル（完成版）