无需重新绑定数据源实现ASP.NET ListView选中行高亮的方法

方案1：服务端实现（和GridView操作逻辑一致） #

步骤1：修改前台模板 #

首先删除你原来写的SelectedItemTemplate节点（不需要了），给ItemTemplate里的行元素添加服务器标识：

<ItemTemplate>
    <!-- 给tr加runat和ID，方便后台直接操作样式 -->
    <tr style="" id="itemRow" runat="server">
        <td>
            <asp:Label ID="FirstNameLabel" runat="server" Text='<%# Eval("FirstName") %>' />
        </td>
        <td>
            <asp:Label ID="LastNameLabel" runat="server" Text='<%# Eval("LastName") %>' />
        </td>
        <td>
            <asp:Label ID="HotelNameLabel" runat="server" Text='<%# Eval("HotelName") %>' />
        </td>
        <td>
            <asp:Label ID="CityLabel" runat="server" Text='<%# Eval("City") %>' />
        </td>
        <td>
            <asp:Button ID="cmdLstSel" runat="server" Text="View" CssClass="btn" 
                CommandName="Select" CommandArgument='<%# Eval("ID") %>'/>
        </td>
    </tr>
</ItemTemplate>

步骤2：后台逻辑修改 #

给ListView添加OnItemCommand="ListView1_ItemCommand"事件，替换原来的选中事件逻辑：

// 需要先引入命名空间 using System.Web.UI.HtmlControls;
protected void ListView1_ItemCommand(object sender, ListViewCommandEventArgs e)
{
    if (e.CommandName == "Select")
    {
        // 第一步：清空所有行的高亮样式
        foreach (ListViewDataItem item in ListView1.Items)
        {
            HtmlTableRow row = item.FindControl("itemRow") as HtmlTableRow;
            if (row != null)
            {
                row.Attributes["class"] = row.Attributes["class"]?.Replace("alert-info", "").Trim();
            }
        }
        // 第二步：给当前点击的行加高亮
        HtmlTableRow currentRow = e.Item.FindControl("itemRow") as HtmlTableRow;
        if (currentRow != null)
        {
            currentRow.Attributes["class"] += " alert-info";
        }
        // 第三步：保留你原来的业务逻辑，只绑定GPayments即可，不需要重新绑定ListView
        int hID = Convert.ToInt32(e.CommandArgument);
        GPayments.DataSource = MyRst("SELECT * FROM HotelPayments WHERE Hotel_ID = " + hID);
        GPayments.DataBind();
    }
}

方案2：纯客户端实现（性能更高，无额外服务端逻辑） #

如果不需要服务端控制高亮状态，直接用前端JS就能实现，不用改任何后台和模板结构：

// 引入jQuery后加入这段代码即可
$(function(){
    $(document).on('click', 'button.btn', function(){
        // 先清空所有行高亮
        $('tr').removeClass('alert-info');
        // 给当前点击按钮所在的行加高亮
        $(this).closest('tr').addClass('alert-info');
    });
});

内容的提问来源于stack exchange，提问作者Albert D. Kallal