3

Webmatrix を使い始めたばかりで、HTML テーブルを webgrid に変換しようとしています。データはDBから取得され、アイテムの内容に応じて各td(1列内)のcssクラスを変更したいと考えています。

たとえば、アイテムに "," が含まれている場合は class="multi" を適用し、"," が含まれておらず null でない場合は class="single" を適用し、それ以外の場合は "none" を適用します。 

<td class="multi">
<td class="single">
<td class="none">

webgridの style:とformat:の設定で試してみましたが、項目の値に応じてクラス名を切り替えることができませんでした。始めるには正しい構文が必要だと思います。

ここで私を助けてくれることを願っています。ありがとうございました。

4

1 に答える 1

3

WebGrid を使用する場合、唯一の実際のオプションは、tdレンダリング後に Javascript を介してセル値に基づいてスタイルを設定することです。パラメータは、style適用する CSS クラスを表す文字列のみを受け入れます。

formatまたは、値に基づいてパラメーターのコンテンツを条件付きで設定tdし、spanordivを入力して、次のようにスタイルを設定することもできます。

<style>
    td.nopadding{padding: 0;margin: 0;}
    .green{background-color:green;display: inline-block;width: 100%;height: 100%;}
    .yellow{background-color:yellow;display: inline-block;width: 100%;height: 100%;}
</style>
<div id="grid">
    @grid.GetHtml(    
        tableStyle : "table",
        alternatingRowStyle : "alternate",
        headerStyle : "header",
        columns: grid.Columns(
            grid.Column("Country", style: "nopadding", format: @<text>@Html.Raw(item.Country == "USA" ? 
                                                                 "<span class=\"green\">" + item.Country +"</span>" : 
                                                                 "<span class=\"yellow\">" + item.Country +"</span>")</text>))
    )
</div>

更新: 次のコードは、より複雑な if..else ステートメントが format パラメーターに含まれていることを示しています。

format: @<text>@if(item.YourProperty == null){
                  @Html.Raw("<span class=\"none\">" + some_value +"</span>")
                  }
                  else{
                    if(item.YourProperty.Contains(",")){
                         @Html.Raw("<span class=\"multi\">" + some_value +"</span>")
                    }
                    else{
                        @Html.Raw("<span class=\"single\">" + some_value +"</span>")
                    }
               }
               </text>
于 2013-07-31T09:28:06.843 に答える