web-dev-qa-db-ja.com

ASP.NETリピーターの代替行の完全な強調表示なし<alternatingitemtemplate />

私は、<itemtemplate/>の別の行のdivにcssクラスを追加するだけで、完全な<alternatingitemtemplate/>を含むオーバーヘッドに行かず、多くのマークアップを保持することを強制しようとしています。将来的に同期します。

http://blog.net-tutorials.com/2009/04/02/how-to-alternate-row-color-with-the-aspnet-repeater-control/などのソリューションを見ました 私は使用したいと思っていますが、これはまだ私にとって「臭い」ではありません。

他の誰かがより保守可能で簡単なソリューションを手に入れましたか？理想的には、次のようなことができるようにしたいと思います。

<asp:repeater id="repeaterOptions" runat="server">
        <headertemplate>
            <div class="divtable">
                <h2>Other Options</h2>
        </headertemplate>
        <itemtemplate>
                <div class="item <%# IsAlternatingRow ? "dark" : "light" %>">

しかし、拡張メソッドを使用しても、IsAlternatingRowの実装方法がわかりません。

c#asp.netdata-bindingextension-methodsrepeater
54
Kieran Benton

独自の変数（増分カウンターまたはブール値）を管理する必要はありません。組み込みの ItemIndex プロパティが2で割り切れるかどうかを確認し、それを使用してcssクラスを設定します。

class="<%# Container.ItemIndex % 2 == 0 ? "" : "alternate" %>"

これには、UIコード（ascxまたはaspxファイル）に完全に基づいているという利点があり、JavaScriptに依存しません。

127
Richard Everett

C＃

class="<%# Container.ItemIndex % 2 == 0 ? "" : "alternate" %>"

VB

class="<%# iif(Container.ItemIndex Mod 2 = 0,"","alternate") %>"
17
Richie

これは私を助けました

class='<%# Container.ItemIndex % 2 == 0 ? "" : "alternate" %>'

以前の回答では、「サーバータグの形式が正しくありません」エラーが発生しました。

6
Seven

JQueryでクラスを適用します。

$('.divtable > div:odd').addClass('dark');
$('.divtable > div:even').addClass('light');
4
Lachlan Roche

Little Tweak：空のクラスは次のようなもので削除できます：

  <%# Container.ItemIndex % 2 == 0 ?  "<tr>" : "<tr class='odd'>"  %>
2
Rick

代わりにjQueryを使用できます。前の質問に対する次の回答が役立つ場合があります。 jQuery Zebra selector

2
Keith Bloom

コードは不要です。これが純粋なCSSソリューションです。

.item:nth-child(odd){background-color: #ccc}
.item:nth-child(){background-color: #ddd}

https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-child

0
graphicdivine

IsAlternatingRowは保護されたプロパティにすることができ、ItemDataBoundまたはItemCreatedイベントで設定されます。

protected void rpt_ItemDataBound(object sender, EventArgs e)
{
    IsAlternatingRow = !IsAlternatingRow;
}
0
Kirtan