asp.net mvc - Razorで交互の行のスタイリングを提供する最も簡単な方法

与えられた以下の剃刀コード:

<tbody>
    @foreach (Profession profession in Model)
    {
        <tr>
            <td>@profession.Name</td>
            <td>@profession.PluralName</td>
            <td>@Html.ActionLink("Edit", "AddOrEdit", new { Id = profession.ProfessionID })</td>
        </tr>
    }
</tbody>

何らかの代替の行スタイル設定を提供する最も簡単な方法は何ですか? (すなわち、奇数行と偶数行の異なるスタイリング)。

私は bool 変数を宣言するために任意のC#を追加できないようですが、 foreach ループの各繰り返しを反転させて > tr などです。

10

5 答え

45
追加された
これはCSS3です。 すべてのブラウザでサポートされているわけではありません。
追加された 著者 Aliostad,
はい、ただし、あなたの聴衆が誰であるかによって異なります。私が入っている業界では、ほとんどのブラウザはIE6です。
追加された 著者 Aliostad,
英国NHSへようこそ。イギリスのNHSのブラウザの90%はIE6です。 2012年にIE7への移行計画彼らには、IE6専用に構築されたアプリケーションがありました。これは、IE6でしか動作しません。
追加された 著者 Aliostad,
さて、クロムフレームでソフトウェアを実行する必要があると言いましたので、理論的には tr:nth-​​child を使用できます。しかし、依然として最も幅広い視聴者を魅了します。
追加された 著者 Aliostad,
@Aliostad - 私たちはNHSの人々のためのウェブアプリも書いています。あなたの痛みが分かります。しかし、これは内部だけなので、私が好きなCSS3をすべて実行できます。わーい!
追加された 著者 David,
私はそれが私のために働くので、これは親指を上げています、そして、それは最も簡単な解決です。
追加された 著者 David,
現代のブラウザがそれをサポートしています。また、従来のブラウザーでは行の色が交互に変わることはありません=>大したことではありません。従来のブラウザーを使用している人は、すでにインターネット上で異なるレンダリングされたWebサイトを見ていることにおそらく慣れているでしょう。
追加された 著者 Darin Dimitrov,
@Aliostad、Microsoftの最新テクノロジーを使用してWebアプリケーション(ASP.NET MVC 3)を開発しようとする業界が、3世代の古いWebブラウザを使用しているということは、私にとっては非常に奇妙なことです。私はIE6を意味します、本当に、これはまだ存在しますか?
追加された 著者 Darin Dimitrov,
2012年のIE7への移行計画神があなたの魂に慈悲を持つようにしてください。
追加された 著者 Darin Dimitrov,
ほとんどの製薬業界で同じことが起こります。ブラウザのトラフィックの95%がIE6です。
追加された 著者 Simon Halsey,
確かに、私は躊躇していましたが、質問は「最も単純な方法」を求めました、そして、私はこれが信じています。
追加された 著者 harriyott,

JQueryはクライアント側でこれを行うことができます(サーバーロジックではなくクライアントサイドスクリプトを使用します)。

 $("tr:odd").css("background-color", "#bbbbff");

単純な変数を使ってcssクラスを設定することもできます(ほぼ擬似コード)。

@foreach (Profession profession in Model)
{
    @i++;
    <td class="@i%2==0?"even":"odd""> 

}
10
追加された
視覚的なスタジオ使用ブラケットからの苦情を避けるため、 <tr class = "@(i%2 == 0?" ":" alt ")">
追加された 著者 Ronnie,

他にもたくさんの方法があります。私の言うところでは、これは最もシンプルではありませんが、もう少し簡単です。

<tbody>
    @var oddEven = new List { "odd", "even" };
    @var i = 0;
    @foreach (Profession profession in Model)
    {
        <tr style="@oddEven[i++ % 2]">
            <td>@profession.Name</td>
            <td>@profession.PluralName</td>
            <td>@Html.ActionLink("Edit", "AddOrEdit", new { Id = profession.ProfessionID })</td>
        </tr>
    }
</tbody>
3
追加された

あなたが既にマークアップをしているので、これはやや不明瞭な答えですが、テーブルがかなり標準的に見えるので、Mvc Web Grid Helperを使用して切り替えることができます。このようなテーブルのためのきれいなツールです。私はあなたのコードがこの特定のテーブルのために少し短く/よりシンプルになると思っています。そして交互の行スタイルの実際の実装は非常に簡単です:

alternatingRowStyle: "alternateRow"

このasp.netブログ

2
追加された
私はこのコントロールのアイデアが気に入っていますが、他のソリューションよりもかなり多くの作業が必要になります。しかし、リンクをありがとう。
追加された 著者 David,

@helper関数を利用してMVC Razorを使用しているので、最もシンプルでクリーンで最善のアプローチです。

プロジェクトのApp_Codeフォルダに新しい項目を追加するか、既存のCustomeHelpers.cshtmlファイルを次のコードで変更します。

@helper AlternateBackground(string color, Int32 iViewBagCount) {
    if (iViewBagCount == null) { iViewBagCount = 0; }
    style="background-color:@(iViewBagCount % 2 == 1 ? color : "none")"
    iViewBagCount++;
}

次に、あなたのforeachループ内で、tablerowコードを次のように置き換えてください:

<tr @CustomHelpers.AlternateBackground("#ECEDEE", ViewBag.count)>

or

<tr @CustomHelpers.AlternateBackground("Red", Model.Count())>

Whichever is appropriate for your foreach loop

This way you only have to add the @Helper function once and it propagates throughout your application and it can be called on each view as needed by referencing the @CustomHelpers function. Create as many helpers as you need and call them with the @CustomeHelpers.NameOfYourFunction() and go from there.

Simple and effective...

1
追加された