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

ASP.NET MVCプロジェクトの作成

　まず、Visual Studioを開き、新しいASP.NET MVC 3アプリケーションを作成します。プロジェクト名は"InfraShoppingMall"とします。プロジェクトテンプレートではインターネットアプリケーションを選択し、ビューエンジンはRazorを選択します。詳細については「ASP.NET MVC 3Tools UpdateとView周りの改良点」を参考にしてください。

プロジェクトに必要なファイルを追加

　作成されたプロジェクトのScript、ContentフォルダーにそれぞれIGという名前のフォルダーを作成し、次のファイルをNetAdvantage for jQueryのインストールフォルダーからコピーします。

• Content/IGフォルダー
  • themes\minフォルダー内のフォルダー、ファイル
• Scripsts/IGフォルダー
  • ig.ui.min.js

　ここまでのフォルダー構造は次のようになっています。

図2 必要ファイルの組み込み

　次に、追加したこれらのCSS, スクリプトファイルを画面側で参照する必要があります。Sharedフォルダーの_Layout.cshtmlファイルで参照するとすべてのビューに反映されます。

_Layout.cshtml

<script src="@Url.Content("~/Scripts/jquery-ui-1.8.11.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/IG/ig.ui.min.js")" type="text/javascript"></script>
<link href="@Url.Content("~/Content/IG/base/ig.ui.grid.min.css")" rel="stylesheet" type="text/css" />
<link href="@Url.Content("~/Content/IG/ig/jquery.ui.custom.min.css")" rel="stylesheet" type="text/css" />

　さらに、ASP.NET MVC 3用に用意されているラッパークラスアセンブリInfragistics.Web.MVC.dllへの参照を追加し、ビュー編集画面においてラッパーを利用するためにアセンブリのプロパティ画面でローカルコピーをTrueと設定します。

図3 MVCラッパーへのアセンブリ参照

図4 Trueと設定することでBinフォルダーにアセンブリがコピーされる