为 asp:ListView 的选定项定义不同的背景颜色答案

【问题标题】：Defining a different background-color to the Selected Item of a asp:ListView为 asp:ListView 的选定项定义不同的背景颜色
【发布时间】：2011-06-07 13:58:53
【问题描述】：

我的应用程序有一个<asp:ListView>。当一个项目被选中时，我只想改变背景颜色为所选项目提供焦点。

代码摘录：

<asp:ListView id="ordersList" runat="server"
                InsertItemPosition="LastItem" 
                onpagepropertieschanged="ordersList_PagePropertiesChanged" 
                onitemdeleting="ordersList_ItemDeleting" 
                oniteminserting="ordersList_ItemInserting" 
                onitemupdating="ordersList_ItemUpdating" 
                onitemcanceling="ordersList_ItemCanceling" 
                onitemediting="ordersList_ItemEditing" 
                onitemdatabound="ordersList_ItemDataBound" 
    DataKeyNames="OrderID" 
    onselectedindexchanging="ordersList_SelectedIndexChanging">
    <LayoutTemplate>
        <asp:PlaceHolder runat="server" ID="itemPlaceholder"></asp:PlaceHolder>                        
    </LayoutTemplate>

    <ItemTemplate>
        <div>
            <asp:ImageButton ID="imgSelect"  ImageUrl="~/img/bullet_go.png" runat="server" 
                CommandName="Select" ToolTip="select item" meta:resourcekey="imgSelectResource1"/>
            <asp:ImageButton ID="imgEdit"  ImageUrl="~/img/pencil.png" runat="server" 
                CommandName="Edit" ToolTip="edit item" meta:resourcekey="imgEditResource1"/>
            <asp:ImageButton ID="imgDelete"  ImageUrl="~/img/delete.png" runat="server" 
                CommandName="Delete" ToolTip="delete item" meta:resourcekey="imgDeleteResource1"/>

            <!-- Fields goes here -->
            <asp:Label ID="lblOrderId" Text='<%# Eval("OrderID") %>' runat="server" />
            <asp:Label ID="lblCustomer" Text='<%# Eval("Customer.CompanyName") %>' runat="server" />
            <asp:Label ID="lblEmployee" Text='<%# Eval("Employee.FullName") %>' runat="server" />
            <asp:Label ID="lblOrderDate" Text='<%# Eval("OrderDate", "{0:d}") %>' runat="server" />
            <asp:Label ID="lblRequiredDate" Text='<%# Eval("RequiredDate", "{0:d}") %>' runat="server" />
            <asp:Label ID="lblShippedDate" Text='<%# Eval("ShippedDate", "{0:d}") %>' runat="server" />
            <asp:Label ID="lblTotal" Text='<%# Eval("Total", "{0:N2}") %>' runat="server" />
        </div>
    </ItemTemplate>
    <SelectedItemTemplate>
        <div style="background-color:Navy; color:White; padding:0px;>
            <asp:ImageButton ID="imgSelect"  ImageUrl="~/img/bullet_go.png" runat="server" 
                CommandName="Select" ToolTip="select item" meta:resourcekey="imgSelectResource1"/>
            <asp:ImageButton ID="imgEdit"  ImageUrl="~/img/pencil.png" runat="server" 
                CommandName="Edit" ToolTip="edit item" meta:resourcekey="imgEditResource1"/>
            <asp:ImageButton ID="imgDelete"  ImageUrl="~/img/delete.png" runat="server" 
                CommandName="Delete" ToolTip="delete item" meta:resourcekey="imgDeleteResource1"/>
            <!-- Fields goes here -->
            <asp:Label ID="lblOrderId" Text='<%# Eval("OrderID") %>' runat="server" />
            <asp:Label ID="lblCustomer" Text='<%# Eval("Customer.CompanyName") %>' runat="server" />
            <asp:Label ID="lblEmployee" Text='<%# Eval("Employee.FullName") %>' runat="server" />
            <asp:Label ID="lblOrderDate" Text='<%# Eval("OrderDate", "{0:d}") %>' runat="server" />
            <asp:Label ID="lblRequiredDate" Text='<%# Eval("RequiredDate", "{0:d}") %>' runat="server" />
            <asp:Label ID="lblShippedDate" Text='<%# Eval("ShippedDate", "{0:d}") %>' runat="server" />
            <asp:Label ID="lblTotal" Text='<%# Eval("Total", "{0:N2}") %>' runat="server" />
        </div>
    </SelectedItemTemplate>
</asp:ListView>

问题是：

我这样做是在 <SelectedItemTemplate> 中复制 <ItemTemplate> 的代码，只是更改 <div> 的样式。问题是这会产生很多冗余代码：虽然我只是想改变背景样式，但我重新复制了所有字段。

这是完成此任务的最佳方法，或者有人可以提出更好的方法吗？

谢谢！

【问题讨论】：

标签： c# asp.net listview webforms

【解决方案1】：

在您的 ordersList_ItemDataBound 事件中，您可以检查当前项目索引是否等于所选列表索引，就像这样：

if (((ListView)sender).SelectedIndex == e.Item.DisplayIndex)

如果是真的，您可以将样式添加到您的 div，但要让您的 div 在服务器端，您必须使您的 div 运行在服务器上并为其分配一个 id，例如：

<div runat="server" id="area">

最终代码如下所示：

  if (((ListView)sender).SelectedIndex == e.Item.DisplayIndex)
  {
      var ctrl = (HtmlContainerControl)e.Item.FindControl("area");
      ctrl.Attributes["style"] = "background-color:Navy; color:White; padding:0px;";
  }

【讨论】：