ASP.NET C# WebForms ListView Highlight Item When Clicking

Question

I am trying to have the clicked on(selected) ListView item be highlighted. However what is currently happening is the last selected item is being highlighted instead.

Here is my asp.net code:

<asp:ListView ID="UsersListView" AutoPostBack="true" runat="server" OnSelectedIndexChanging="UsersListView_SelectedIndexChanging" OnSelectedIndexChanged="UsersListView_SelectedIndexChanged" >
        <LayoutTemplate>         
            <table id="itemPlaceholderContainer" runat="server" border="0" style="">
                <tr>
                    <td id="itemPlaceholder" runat="server">
                    </td>
                </tr>
            </table>     
        </LayoutTemplate>
        <ItemTemplate>
            <tr runat="server">
                <td>
                    <asp:LinkButton ID="UserNameLinkButton" CommandName="Select" runat="server" Text='<%# Container.DataItem %>'/>
                </td>
            </tr>
        </ItemTemplate>
        <SelectedItemTemplate>
            <tr runat="server" style="background-color: #336699;">
                <td>
                    <asp:LinkButton ID="UserNameLinkButton" CommandName="Select" runat="server" Text='<%# Container.DataItem %>' BackgroundColor="#336699" ForeColor="White" />
                </td>
            </tr>
        </SelectedItemTemplate>
    </asp:ListView>

Here is my C# code beside:

protected void Page_Load(object sender, EventArgs e)
    {
        if(!Page.IsPostBack)
        {
            List<string> users = new List<string>()
        {
            "Gary",
            "Joe",
            "Brian"
        };
            UsersListView.DataSource = users;
            UsersListView.DataBind();
        }
    }

    protected void UsersListView_SelectedIndexChanging(object sender, ListViewSelectEventArgs e)
    {
        UsersListView.SelectedIndex = e.NewSelectedIndex;
    }

    protected void UsersListView_SelectedIndexChanged(object sender, EventArgs e)
    {

    }

Thank you for your help.

Answer 1

You have to use OnCommand for link button or use ListViewItemCommand and pass Item.DisplayIndex as argument to linkButton attribute CommandArgument while you are selecting item and in your case when link button is not to highlight because you are focusing on selecting not over LinkButton.So do your code on Server Side for HighLight Item Button.

Aspx

<asp:ListView ID="UsersListView" AutoPostBack="true" runat="server" OnSelectedIndexChanged="UsersListView_SelectedIndexChanged" OnItemCommand="UsersListView_ItemCommand" OnSelectedIndexChanging="UsersListView_SelectedIndexChanging">
    <LayoutTemplate>         
        <table id="itemPlaceholderContainer" runat="server" border="0" style="">
            <tr>
                <td id="itemPlaceholder" runat="server">
                </td>
            </tr>
        </table>     
    </LayoutTemplate>
    <ItemTemplate>
        <tr runat="server">
            <td>
                <asp:LinkButton ID="UserNameLinkButton" CommandName="Select" OnCommand="UserNameLinkButton_Command" CommandArgument="<%# Container.DisplayIndex %>" runat="server" Text='<%# Container.DataItem %>'/>
            </td>
        </tr>
    </ItemTemplate>
    <SelectedItemTemplate>
        <tr runat="server">
            <td>
                <asp:LinkButton ID="UserNameLinkButton" CommandName="Select"  CommandArgument="<%# Container.DisplayIndex %>" runat="server" Text='<%# Container.DataItem %>' ForeColor="White" />
            </td>
        </tr>
    </SelectedItemTemplate>
</asp:ListView>

cs(Code)

protected void Page_Load(object sender, EventArgs e)
{
    if (!IsPostBack)
    {
        List<string> users = new List<string>()
    {
        "Gary",
        "Joe",
        "Brian"
    };
        UsersListView.DataSource = users;
        UsersListView.DataBind();
    }
}
int selectedIndex=0;
protected void UsersListView_ItemCommand(object sender, ListViewCommandEventArgs e)
{

     foreach(var item in UsersListView.Items)
     {
         LinkButton reset=item.FindControl("UserNameLinkButton") as LinkButton;
         reset.BackColor = System.Drawing.Color.White;
         reset.ForeColor = System.Drawing.Color.Blue;
     }
     LinkButton linkButton = (e.Item.FindControl("UserNameLinkButton")) as LinkButton;
     linkButton.BackColor = System.Drawing.ColorTranslator.FromHtml("#336699");
     linkButton.ForeColor = System.Drawing.Color.White;

}
protected void UsersListView_SelectedIndexChanging(object sender, ListViewSelectEventArgs e)
{

}
protected void UsersListView_SelectedIndexChanged(object sender, EventArgs e)
{

}
protected void UserNameLinkButton_Command(object sender, CommandEventArgs e)
{
    //you can also do work here for when one of link button give command.(clicked)
}

Tested