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

テンプレートの設定

　Index.cshtmlにおいてテンプレートのID, 名前列ではそのまま生のデータを表示するように設定します。

<td>${ID}</td>
<td>${Name}</td>

　営業時間のデータはOpenTime, CloseTimeから生成するため、別関数を呼び出すよう設定します。

<td>${ConvertToOpenHours(OpenTime, CloseTime)}</td>

　このConvertToOpenHours関数は開始時刻、終了時刻から営業時間の文字列を返すように定義します。

@*スクリプト*@
<script type="text/javascript">
    function ConvertToOpenHours(oTime, cTime) {
        return AddZeros(String(oTime.Hours), 2) + ":"
        + AddZeros(String(oTime.Minutes), 2) + ":"
        + AddZeros(String(oTime.Seconds), 2) + " - "
        + AddZeros(String(cTime.Hours), 2) + ":"
        + AddZeros(String(cTime.Minutes), 2) + ":"
        + AddZeros(String(cTime.Seconds), 2);
    }

    function AddZeros(str, num) {
        for (var i = 0; i < num - str.length; i++) {
            str = "0" + str;
        }
        return str;
    }
</script>

　最後に設備・サービスが提供されている施設ではアイコンを表示するという表現を行い、ユーザーが情報を把握しやすいように設定します。Imagesフォルダーを作成し、NetAdvantage ICONSのサンプルアイコンをいくつか追加しました。

図11 NetAdvantage ICONSのサンプルファイルを追加

　テンプレートでは条件判定を行う{{if}} {{/if}}を利用し、それぞれの項目の値がtrueの場合、画像を表示するように設定します。

<td>
    {{if ShoppingCart == true}}
        <img src='/Images/ShoppingCart64.png' title='大型施設'></img>
    {{/if}}
    {{if PhotoStudio == true}}
        <img src='/Images/CameraDigital64.png' title='写真館'></img>
    {{/if}}
    {{if MedicalRoom == true}}
        <img src='/Images/MedicalBag64.png' title='クリニック'></img>
    {{/if}}
    {{if ShippingService == true}}
        <img src='/Images/FactoryAutomationEquipment64.png' title='発送サービス'></img>
    {{/if}}
    {{if PrintingService == true}}
        <img src='/Images/ReportWithChart64.png' title='印刷サービス'></img>
    {{/if}}            
</td>

　これですべての設定が完了しました。実行結果は下記のとおりとなります。

図12 リッチなグリッドが実現された

まとめ

　今回はASP.NET MVC 3とEntity Framework、さらにNetAdvantage for jQueryで提供されているASP.NET MVCラッパーを利用しデータを表示しました。また、igGridでサポートしている、jQueryテンプレートという強力なテンプレートエンジンを利用しリッチなグリッド表示を迅速に実現しました。この igGridをはじめとしたNetAdvantage for jQueryの関連情報についてはこちらでも提供されていますのでぜひご覧ください。