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

テンプレートプラグインの組み込みと列定義の変更

　まずはjQueryテンプレートプラグインを_Layout.cshtmlに組み込みます。本記事執筆時点はベータ版という扱いとなっていることに注意してください。

_Layout.cshtml

<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery.templates/beta1/jquery.tmpl.js"></script>

　列の定義に関しては複数の列データをまとめるため、現在の列数は必要ありません。今回は4列を残し削除しました。また併せてヘッダーテキスト、幅を設定します。

Index.cshtml

.Columns(columns =>
{
    columns.For(x => x.ID).HeaderText("ID") .Width("100px");
    columns.For(x => x.Name).HeaderText("モール名") .Width("200px");
    columns.For(x => x.OpenTime).HeaderText("営業時間") .Width("200px");
    columns.For(x => x.ShoppingCart).HeaderText("設備・サービス") .Width("400px");
})

テンプレートの有効化と定義

　igGridでテンプレートを利用するため、JQueryTemplate, RowTemplateプロパティを設定します。RowTemplateプロパティでは各行に適用されるテンプレートを定義することになります。サンプルとしてそれぞれの列に固定値を割り当てるテンプレート定義は下記のとおりとなります。

.JQueryTemplating(true)
//テンプレートの定義
.RowTemplate("<tr><td>1</td><td>2</td><td>3</td><td>4</td></tr>")

　この場合の実行結果は下記のようにそれぞれのセルに対して固定の値が設定されました。

図10 jQueryテンプレートサンプル

　上記の定義ではテンプレートの定義部分を文字列として定義していますが、複雑なテンプレートを生成する場合、可読性が落ちてしまいます。このような場合にはテンプレート部分を外だしで定義できます。

Index.cshtml

@*テンプレート*@
<script id="GridRowTemplate" type="text/x-jquery-tmpl">
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
    </tr>
</script>

@(Html.Infragistics().Grid<InfraShoppingMall.Models.Mall>()
    .ID("igGrid1")
    .DataSourceUrl(Url.Action("GetMallList"))
    .Columns(columns =>
    {
        columns.For(x => x.ID).HeaderText("ID") .Width("100px");
        columns.For(x => x.Name).HeaderText("モール名") .Width("200px");
        columns.For(x => x.OpenTime).HeaderText("営業時間") .Width("200px");
        columns.For(x => x.ShoppingCart).HeaderText("設備・サービス") .Width("400px");
    })
    .JQueryTemplating(true)
    // テンプレート呼び出し
    .RowTemplate("{{tmpl '#GridRowTemplate'}}")
    .DataBind()
    .Render()
    )