Shoeisha Technology Media

CodeZine(コードジン)

特集ページ一覧

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

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

Controllerを実装

 Controllerでは先ほどのMallModelクラスのGetMallList()メソッドを使用し、View側に項目一覧を渡します。この際、GridDataSourceActionと指定することで、View側のjQueryグリッドにグリッドデータ取得アクションであることを明示します。

HomeController.cs
[Infragistics.Web.Mvc.GridDataSourceAction]
public ActionResult GetMallList()
{
    // ビューにモール情報の一覧を渡します。
    return View(Models.MallModel.GetMallList());
}

Viewを実装

 ビュー側では先ほど追加したInfragistics.Web.MVC.dllで実装されているラッパークラスを用いてjQueryグリッドの設定を行うことが可能です。

 まずは、名前空間のインポートを行います。

Index.cshtml
@using Infragistics.Web.Mvc;

 次にHtmlヘルパーを利用し、グリッドの宣言を行います。データ表示を行うための次のプロパティを設定します。

  • DataSourceまたはDataSourceUrl
  • Columns

 その後、DataBind()メソッドを呼び出しデータのバインディングを、Render()メソッドを実行し、スクリプトの出力を行います。

@(Html.Infragistics().Grid<InfraShoppingMall.Models.Mall>()
    .ID("igGrid1")
    .DataSourceUrl(Url.Action("GetMallList"))
    .Columns(columns =>
        {
            columns.For(x => x.ID).HeaderText("ID");
            columns.For(x => x.Name).HeaderText("モール名");
            columns.For(x => x.OpenTime).HeaderText("営業開始時刻");
            columns.For(x => x.CloseTime).HeaderText("営業終了時刻");
            columns.For(x => x.ShoppingCart).HeaderText("大型店舗");
            columns.For(x => x.PhotoStudio).HeaderText("写真館");
            columns.For(x => x.MedicalRoom).HeaderText("クリニック");
            columns.For(x => x.PrintingService).HeaderText("印刷サービス");
            columns.For(x => x.ShippingService).HeaderText("発送サービス");
        })
    .DataBind()
    .Render()
    )

 出力されたスクリプトと、描画されたグリッドは次のようになります。スクリプトの内容をこちらの記事と比べてみてください。「jQueryを利用した軽量・高機能なクライアントサイド実装!

<table id="igGrid1"></table>
<script type="text/javascript">
    $(function(){$('#igGrid1').igGrid({ 
        dataSource: '/Home/GetMallList',autoGenerateColumns: false,
        responseDataKey: 'Records', generateCompactJSONResponse: false,
        columns: [ 
            { key: 'ID', dataType: 'number', headerText: 'ID' }, 
            { key: 'Name', dataType: 'string', headerText: 'モール名' }, 
            { key: 'OpenTime', dataType: 'string', headerText: '営業開始時刻' }, 
            { key: 'CloseTime', dataType: 'string', headerText: '営業終了時刻' }, 
            { key: 'ShoppingCart', dataType: 'bool', headerText: '大型店舗' }, 
            { key: 'PhotoStudio', dataType: 'bool', headerText: '写真館' }, 
            { key: 'MedicalRoom', dataType: 'bool', headerText: 'クリニック' }, 
            { key: 'PrintingService', dataType: 'bool', headerText: '印刷サービス' }, 
            { key: 'ShippingService', dataType: 'bool', headerText: '発送サービス' } ], 
        localSchemaTransform: false });});
</script>
図9 グリッドにデータが表示された
図9 グリッドにデータが表示された

jQueryテンプレートを利用し、表示をカスタマイズ

 このようにASP.NET MVCラッパーを使用しjQueryグリッドを生成することができましたが、データを単純に表示するだけではユーザーが情報を正しく理解することが難しくなります。このigGridではjQueryで提供されているテンプレート機能を利用し、それぞれのセルの表現をカスタマイズできます。jQueryテンプレートについは次の記事・サイトを参考にしてください。

 igGridでjQueryテンプレートを利用する場合は次のプロパティを設定する必要があります。

  • JQueryTemplate
  • RowTemplate

 テンプレートの実装を行う前に、今回の目標を設定します。

  1. 営業開始時刻、営業終了時刻を1列にまとめ、営業時間列とし、正しい情報を表示する
  2. 設備・サービス情報についても1列にまとめ、さらにユーザーが分かりやすいような表記とする

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

著者プロフィール

バックナンバー

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

もっと読む

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