Jak używać innego stylu dla pierwszego przedmiotu w repeterze?

Question

Na pierwszej pozycji chcę użyć następujących <div>:

<div class="six columns"> 
    <a href=""> 
    <img src="" /> 
     <h3>Israeli Embassy Promotes Peace</h3> 
     <h4>At a time when Israel is facing threats of...</h4> 
    </a> 
</div> 

a to dla reszty chcę używać następujących <div>:

<div class="six columns"> 
    <ul> 
     <li><a href=""> 
      <h3>This is the first alskdjlak s</h3> 
      </a></li> 
     <li><a href=""> 
      <h3>asd sad asd asd asdasdasdas d</h3> 
      </a></li> 
     <li><a href=""> 
      <h3>dsad asd asd asd asd asd asd</h3> 
      </a></li> 
    </ul> 
</div> 

Jak to zrobić?

Answer 1

najpierw użyć jedną liczbę na kod związany, że jest zacząć od 1. następnie na peryferyjnym sprawdzić tę wartość i przejść jak:

<asp:Repeater ID="Repeater1" runat="server"> 
    <ItemTemplate> 
     <% if (iCounter == 1) { %> 
      <br />First line id: <%# GetID(Container.DataItem) %> 
     <% } else { %> 
      <br />Next lines id: <%# GetID(Container.DataItem) %> 
     <% } 
      iCounter++; 
     %> 
    </ItemTemplate> 
</asp:Repeater> 

i na kodzie za:

public int iCounter = 1; 

List<int> oMainIds = new List<int>(); 

protected void Page_Load(object sender, EventArgs e) 
{ 
    for (int i = 0; i < 10; i++) 
    { 
     oMainIds.Add(i); 
    } 

    Repeater1.DataSource = oMainIds; 
    Repeater1.DataBind(); 
} 

public int GetID(object oItem) 
{ 
    return (int)oItem; 
} 

Należy pamiętać, że do testu, tutaj umieszczenia nd 10 linii danych. Ten przykład renderuje:

First line id: 0 
Next lines id: 1 
Next lines id: 2 
Next lines id: 3 
Next lines id: 4 
Next lines id: 5 
Next lines id: 6 
Next lines id: 7 
Next lines id: 8 
Next lines id: 9 

Answer 2

owinąć div w kontroli zastępczego i ustawić widoczność elementów zastępczych w OnItemCreated przypadku repeatera użyciu e.Item.ItemIndex celu ustalenia, czy obecna pozycja jest pierwszą, czy nie.

lub uczynić je DIV server-side (z runat = server) i ustawić widoczność div bezpośrednio w MSP sposób

Answer 3

Użyj CSS.

.six_columns ul li 
{ 
    /* Item style */ 
} 

.six_columns ul li:first-child 
{ 
    /* First item style */ 
} 

Istnieją również sposoby editing content via CSS.

Answer 4

Wystarczy aktualizację Aristos odpowiedź, bez metody kodu z opóźnieniem, aby uzyskać identyfikator.

<asp:Repeater ID="Repeater1" runat="server"> 
    <ItemTemplate> 
    <asp:Panel ID="pnlFirst" runat="server" Visible="<%# (Repeater1.DataSource as List<int>).IndexOf((int)Container.DataItem) ==0 %>"> 
    <br />First Item 
    </asp:Panel> 
    <asp:Panel ID="pnlRest" runat="server" Visible="<%# (Repeater1.DataSource as List<int>).IndexOf((int)Container.DataItem) !=0 %>"> 
    <br /> 
    Item: <%# (Repeater1.DataSource as List<int>).IndexOf((int)Container.DataItem) %> 
    </asp:Panel> 
</ItemTemplate> 
</asp:Repeater> 

w kodzie za

List<int> oMainIds = new List<int>(); 

protected void Page_Load(object sender, EventArgs e) 
{ 
    for (int i = 0; i < 10; i++) 
    { 
    oMainIds.Add(i); 
    } 

    Repeater1.DataSource = oMainIds; 
    Repeater1.DataBind(); 
}