Shoeisha Technology Media

CodeZine(コードジン)

特集ページ一覧

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

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

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

目次

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

対象読者

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

必要環境

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

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

 サンプルは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 今回のサンプル(完成版)
図1 今回のサンプル(完成版)

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

著者プロフィール

バックナンバー

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

もっと読む

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