Question

I want to change this list so that it is dynamically populated:

<ul>
 <li id="Tab1" class="selected" runat="server">
     <asp:LinkButton ID="LinkButton1" OnClick="LinkButton1_Click"runat="server">
         Tab1 Text
     </asp:LinkButton>
 </li>
 <li id="Tab2" runat="server">
     <asp:LinkButton ID="LinkButton2" OnClick="LinkButton2_Click" runat="server">
         Tab2 Text
     </asp:LinkButton>
 </li>
 <li id="Tab3" runat="server">
     <asp:LinkButton ID="LinkButton3" OnClick="LinkButton3_Click" runat="server">
         Tab3 Text
     </asp:LinkButton>
 </li>
</ul>

I tried using this code:

<asp:ListView ID="ListView_Tabs" OnItemCommand="ListView_ChangeTab" runat="server">
    <LayoutTemplate>
        <div class="tabs">
            <ul>
                <li id="itemPlaceholder" runat="server" />
            </ul>
        </div>
    </LayoutTemplate>
    <ItemTemplate>
        <li>
            <asp:LinkButton Text='<%# Eval("displayName") %>' CommandName='<%# Eval("parameterName") %>' runat="server"/>
        </li>
    </ItemTemplate>
</asp:ListView>

and populate it in code behind:

  ListView_Tabs.DataSource = comeClass.GetTabs();
  ListView_Tabs.DataBind();

But I don’t see any clear way to set class=’selected’ to the last link I clicked ( or rather the list item that contains the link )

So my question is

What is the cleanest way to make a dynamic list of buttons in asp.net, or even just in .net?

It doesn’t have to be anything like my approach. I’m not even sure using ListView is the best approach to solve this.

Answer 1

You can leverage the SelectedItemTemplate and SelectedIndex attributes of your ListView to accomplish this.

Change the CommandName property to “Select” in your ListItemTemplate. That way when the the postback occurs, the ListView will have the row index of the LinkButton you selected. You can then set your custom command to the CommandArgument paramter for any custom processing when the ItemSelected event is raised by clicking the LinkButton.

Then in your SelectedItemTemplate, you can apply the class right there. Your ListView would look something like this:

<asp:ListView ID="ListView_Tabs" OnItemCommand="ListView_ChangeTab" runat="server">
    <LayoutTemplate>
        <div class="tabs">
            <ul>
                <li id="itemPlaceholder" runat="server" />
            </ul>
        </div>
    </LayoutTemplate>
    <ItemTemplate>
        <li>
            <asp:LinkButton Text='<%# Eval("displayName") %>' CommandName="Select"  CommandArgument='<%# Eval("parameterName") %>' runat="server"/>
        </li>
    </ItemTemplate>
    <SelectedItemTemplate>
        <li>
            <asp:LinkButton Text='<%# Eval("displayName") %>' CommandName="Select" CommandArgument='<%# Eval("parameterName") %>' CssClass="selected" runat="server"/>
        </li>
    </SelectedItemTemplate>
</asp:ListView>