Shoeisha Technology Media

CodeZine(コードジン)

特集ページ一覧

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

  • ブックマーク
  • LINEで送る
  • このエントリーをはてなブックマークに追加
目次

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 必要ファイルの組み込み
図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ラッパーへのアセンブリ参照
図3 MVCラッパーへのアセンブリ参照
図4 Trueと設定することでBinフォルダーにアセンブリがコピーされる
図4 Trueと設定することでBinフォルダーにアセンブリがコピーされる

  • ブックマーク
  • LINEで送る
  • このエントリーをはてなブックマークに追加

著者プロフィール

バックナンバー

連載:Infragistics NetAdvantageチュートリアル

もっと読む

All contents copyright © 2005-2019 Shoeisha Co., Ltd. All rights reserved. ver.1.5