Определение другого цвета фона для выбранного элемента asp: ListView

Question

Мое приложение имеет <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>. Проблема в том, что это генерирует много избыточного кода: хотя я просто хочу изменить стиль фона, но я переписываю все поля.

Это лучший способ сделать это или кто-то может предложить лучший?

Спасибо!

Answer 1

В событии ordersList_ItemDataBound вы можете проверить, равен ли текущий индекс элемента выбранному индексу списка, вот так:

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

Если это правда, вы можете добавить стиль к вашему div, но чтобы получить ваш div на стороне сервера, вы должны сделать свой сервер div runat и присвоить ему идентификатор, что-то вроде:

<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;";
  }