How to get index of current records in C# ASP.NET ListView in Render Time

Question

I have a list view like below:

<asp:ListView ID="lstTopRanks" runat="server">
    <ItemTemplate>
        <div class="Amazing-{recordNumber}">{itemdata}</div>
    </ItemTemplate>
</asp:ListView>

I would like to replace {recordNumber} with a running counter so the first record shown have 1 the second will be 2 and so on.

How can I do this?

Thanks in advance

Answer 1

You can do it with Container.DisplayIndex, or Container.DataItemIndex, if the ID is not coming from for example a database.

The key is this: class="Amazing-<%#Container.DisplayIndex + 1 %>".

If recordNumber does come from an external datasource, you can do that as well like this: class='Amazing-<%# Eval("YourDatabaseIDColumn") %>'.

DisplayIndex and DataItemIndex differ if you are paging your datasource. DisplayIndex is a running index always starting on the current page, and DataItemIndex is a running number in your whole datasource.

Here is an example:

CodeBehind:

//just to represent something like a db table with an ID and a description
Pair[] data = new Pair[] { new Pair(123, "row1"), new Pair(124, "row2"), new Pair(125, "row3"), new Pair(126, "row4"), new Pair(127, "row5"), new Pair(128, "row6"), new Pair(129, "row7"), new Pair(130, "row8"), new Pair(131, "row9"), new Pair(132, "row10") };

lstTopRanks.DataSource = data;
lstTopRanks.DataBind();

ASPX:

  <asp:ListView ID="lstTopRanks" runat="server">
     <LayoutTemplate><asp:PlaceHolder ID="ItemPlaceHolder" runat="server"></asp:PlaceHolder></LayoutTemplate>
     <ItemTemplate>
        <div class="Amazing-<%#Container.DisplayIndex + 1 %>">
           DisplayIndex: <b><%#Container.DisplayIndex %></b>;
           DataItemIndex: <b><%#Container.DataItemIndex %></b>, 
           ID and Text: <i><%#((Pair)Container.DataItem).First %>, <%#((Pair)Container.DataItem).Second %></i>
        </div>
     </ItemTemplate>
  </asp:ListView>

  <asp:DataPager ID="DataPagerProducts" runat="server" PagedControlID="lstTopRanks" PageSize="3" >
     <Fields>
        <asp:NextPreviousPagerField ShowFirstPageButton="True" ShowNextPageButton="False" />
        <asp:NumericPagerField />
        <asp:NextPreviousPagerField ShowLastPageButton="True" ShowPreviousPageButton="False" />
     </Fields>
  </asp:DataPager>

And the result: