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 グリッドにデータが表示された
jQueryテンプレートを利用し、表示をカスタマイズ
このようにASP.NET MVCラッパーを使用しjQueryグリッドを生成することができましたが、データを単純に表示するだけではユーザーが情報を正しく理解することが難しくなります。このigGridではjQueryで提供されているテンプレート機能を利用し、それぞれのセルの表現をカスタマイズできます。jQueryテンプレートについは次の記事・サイトを参考にしてください。
igGridでjQueryテンプレートを利用する場合は次のプロパティを設定する必要があります。
- JQueryTemplate
- RowTemplate
テンプレートの実装を行う前に、今回の目標を設定します。
- 営業開始時刻、営業終了時刻を1列にまとめ、営業時間列とし、正しい情報を表示する
- 設備・サービス情報についても1列にまとめ、さらにユーザーが分かりやすいような表記とする
