3

この Web サイトには EPiServer を使用しています。とは異なりasp:DataList、EPiServer:PAGEList には がありませんAlternatingItemTemplate。

したがって、カウンターを作成し、このカウンターを私の で増やして<ItemTemplate>から、modulus を使用して、どの CSS スタイルを記事/ページに追加するかを返す必要があります。

モジュラス「コード」 - コードビハインドから:

 return index % 2 == 0 ? "styleA" : "styleB";

しかし、私はカウンターを広告してこれを増やすことができません<ItemTemplate>.

どんな提案でも大歓迎です！

更新
ここに私のEPiServerページリストコントローラがあります:

 <EPiServer:PageList runat="server" id="pageList" SortDirection="Ascending" Count="4" OnDataBinding="pageList_OnDataBinding">
    <HeaderTemplate>
        <ul id="articleList1">
    </HeaderTemplate>

    <ItemTemplate>
            <li>
                   <h2><a href="<%# Eval("LinkURL") %>" title="<%# Eval("PageName") %>"><EPiServer:Property id="Property1" PropertyName="PageName" runat="server" /></a></h2>
                   <div class="articleImage">
                      <%# ArticleImage(Container.CurrentPage)%>                            
                   </div>
                   <div class="introText">
                      <%# IntroText(Container.CurrentPage)%> 
                   </div>
                   <div class="readMore floatRight"><a href="<%# Eval("LinkURL") %>" title="<%# Eval("PageName") %>">Les mer</a></div>
            </li>
    </ItemTemplate>

    <FooterTemplate>
        </ul>     
    </FooterTemplate>
 </EPiServer:PageList>

ANSWER
私は、.NET をいじるよりも jQuery を使用する方がはるかに簡単であると判断しました。それは私の好みの解決策ではありませんが、うまくいきます。私が使用するコードは次のとおりです。

if (jQuery("#articleList1").length > 0) {
    jQuery('li:odd').addClass("odd");
}
4

8 に答える 8

7

リピーターの場合、私はこれを行います:-

<itemtemplate>
<tr class='<%#(Container.ItemIndex % 2 == 0) ? "odd" : "even" %>'>

アイテムのデータバインドイベントの編集は、行カウンターを追跡します...

private int counter;
protected void list_databound(object sender, RepeaterItemEventArgs e)
    {
     if ((e.Item.ItemType == ListItemType.Item) || ((e.Item.ItemType == ListItemType.AlternatingItem))
     {
      counter++;
      //find server control and use counter as modulus
     }
    }

ここで編集してください... OOPSはHtmlTableRowである必要がありました!!

HtmlTableRow row = e.Item.FindControl("row") as HtmlTableRow;
if (row != null) 
  row.Attributes.Add("class", ((counter % 2 == 0) ? "odd": "even") );

これも必要になります

<tr id="row" runat="server" ...
于 2009-12-16T16:48:19.480 に答える
3

これは、サポートされているブラウザーが IE9+ であると仮定すると、純粋な CSS で実行できます。

tr:nth-child(even) {
    background-color: #000000;
}
于 2015-09-15T17:01:41.860 に答える
3

探しているのが代替行の視覚的なスタイリングだけである場合は、Javascript と jQuery を使用して、クライアントでの実行時にスタイルを操作する方がうまくいく可能性があります。場合によっては、純粋な CSS を使用して目的の結果を得ることができます (ただし、これにより、異なるブラウザーで同じように見えない実装になる可能性があります)。

交互の行に対して異なる情報を実際にレンダリングする必要がある場合は、バインド先のデータ ソースに、情報を公開するプロパティを追加する必要がある場合があります。または、一部のコントロールはItemDataBound、サーバー上でサブスクライブして出力を変更するために使用できるイベントをサポートしています。

編集：

ItemDatabound イベントをサブスクライブすることを選択した場合 (コントロールに実際にこの機能があると仮定)、増分値を計算し、それをバインド先のデータ項目に割り当てます。次に、これをモジュラ演算と一緒に使用して(count % 2)、奇数/偶数行に異なるスタイルを適用できます。

もう 1 つの方法は、ASP.NET でマークアップ展開を使用してハッキングし、マークアップだけでインクリメントする数値を生成することです。リピーターを使用した例を次に示します。

<asp:Repeater runat='server' id='whatever'>
    <HeaderTemplate>
        <% int counter = 0; %>
    </HeaderTemplate>
    <ItemTemplate>
         <li class='<%= (counter++) % 2 ? "regularStyle" : "alternateStyle"'>
           ... content here ...
         </li>
    </ItemTemplate>
</asp:Repeater>
于 2009-12-16T16:47:34.177 に答える
1

残念ながら、EpiServer は Container インスタンスの ItemIndex を「非表示」にしますが、回避策として独自の「グローバル」カウンターを作成します。

コード ビハインドにプロパティを追加します。

protected Int32 ItemIndex;

そして、あなたのaspxファイルで：

<EPiServer:PageList runat="server">
    <HeaderTemplate>
        <% this.ItemIndex = 0; %>
    </HeaderTemplate>

    <ItemTemplate>
         <li class="<%# this.ItemIndex++ % 2 == 0 ? "odd" : "even" %>">
           Content
         </li>
    </ItemTemplate>
</EPiServer:PageList>
于 2010-03-12T11:07:16.553 に答える
1

以下のように実装しました。

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

私を助けたのは Richard Everett answerでした。

詳細な答え：

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

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

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

これは私の日を救った！

于 2015-08-21T16:03:06.937 に答える
0

EPiServer の PageList コントロールは DataSource としても機能するため、お気に入りの ASP.NET テンプレート コントロールを代替項目と共に使用してレンダリングし、単純に DataSourceId をページリストの ID に設定できない理由はありません。

于 2009-12-22T02:47:51.490 に答える
0

サーバーコントロールでこの種の問題に遭遇したとき、私は通常、それらを手動でcssするだけです

于 2009-12-16T16:47:30.143 に答える
-2

これは私のために働いた。（@Rippoへのクレジット）

私はちょうどbgcolorテーブルのを使用しました：

bgcolor ='<%#(Container.ItemIndex % 2 == 0) ? "#FFFFFF" : "#FEFFE8" %>'
于 2012-09-11T07:10:15.543 に答える