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

时间:2011-06-07 13:58:53

标签: c# asp.net listview webforms

我的申请有一个<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>


问题是:

我这样做会复制<ItemTemplate><SelectedItemTemplate>的代码并只更改<div>的样式。问题是这会产生大量冗余代码:虽然我只是想改变背景样式,但我重新复制了所有字段。

这是实现这一目标的最佳方式,还是有人建议更好的方法?

谢谢!

1 个答案:

答案 0 :(得分:2)

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

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

如果确实如此,您可以将样式添加到div中,但是要在服务器端获取div,您必须创建div runat服务器并为其分配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;";
  }