为asp:ListView的Selected Item定义不同的背景色

本文关键字：定义 背景色 Item Selected asp ListView | 更新日期: 2023-09-27 17:58:30

我的应用程序有一个<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>的样式。问题是，这会生成大量冗余代码：尽管我只是想更改背景样式，但我会重新复制所有字段。

这是实现这一目标的最佳方法，或者有人能建议一个更好的方法吗？

谢谢！

为asp:ListView的Selected Item定义不同的背景色

在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;";
  }
相关文章：