Member 13174280 Ответов: 1

Css теряется при изменении стиля границы на все imagebutton в datalist


Выполнение операции на краю всех изображений

стиль CSS

<style type="text/css">
.CCSImageButton:hover
{      
   border-width:5px;
   border-color: yellow; 
   border-style:ridge;
} 
.CCSImageButton
{      
   !border:2px solid #021a40;
   !border-color: red;
   border-width:2px;
   border-style:groove;
} 
</style>


файл ASPX

<div style="overflow-x:scroll; overflow-y:no-content; height:280px"
            <asp:UpdatePanel ID="UpdatePanel1" runat="server">
              <ContentTemplate>
                 <asp:DataList ID="DataList1" runat="server" RepeatDirection="Horizontal" RepeatLayout="Table" RepeatColumns="0" SeparatorStyle-HorizontalAlign="NotSet" SelectedItemStyle-Wrap="False" SelectedItemStyle-HorizontalAlign="NotSet" HorizontalAlign="NotSet" ItemStyle-HorizontalAlign="NotSet" FooterStyle-Wrap="False" class="auto-style1">                         
                   <ItemTemplate>
                    <td>                       
                       <asp:ImageButton ID="ImageButton1" runat="server" ImageUrl='<%# Container.DataItem %>' Height="200px" OnClick="ImageButton1_Click" ImageAlign="Middle" EnableTheming="False" CssClass="CCSImageButton"/>           
                     </td>
                    </ItemTemplate>
                 </asp:DataList>
              </ContentTemplate>             
            </asp:UpdatePanel>
</div>     


cs файл

без cicle foreach.... работа CSS


protected void ImageButton1_Click(object sender, ImageClickEventArgs e)
    {
        //if this block is active 
        //the css settings no longer have effect
        //
        foreach (DataListItem item in DataList1.Items)
        {
            (item.FindControl("ImageButton1") as ImageButton).BorderStyle = BorderStyle.None;
            //has not effect
            //(item.FindControl("ImageButton1") as ImageButton).CssClass= "CCSImageButton";
        }
      
        //read Index od Image Clicked
        ImageButton imgbtnid = (ImageButton)sender;
        DataListItem item1 = (DataListItem)imgbtnid.NamingContainer;

        //get Image index               
        int idx = item1.ItemIndex;
       
        //Show Image       
        ImageButton img = sender as ImageButton;
        
        /*
        img.BorderStyle = BorderStyle.Solid;
        img.BorderWidth = 2;
        img.BorderColor = System.Drawing.Color.Red;
        */

        Image1.ImageUrl = img.ImageUrl;

        //Show Description
        ImageDescr = GetListOfDescription();
        Label2.Text = ImageDescr[idx];

        img.CssClass = "CCSImageButton";  //ha not effect
    }


Что я уже пробовал:

foreach (DataListItem item in DataList1.Items)
        {
            (item.FindControl("ImageButton1") as ImageButton).BorderStyle = BorderStyle.None;
            //has not effect
            (item.FindControl("ImageButton1") as ImageButton).CssClass= "CCSImageButton";
        }


если не выполнить это , CSS работает

(item.FindControl("ImageButton1") as ImageButton).BorderStyle = BorderStyle.None;

1 Ответов

Рейтинг:
1

Jochen Arndt

Вы используете два разных метода стиля: CSS и свойство внешнего вида WebControl (BorderStyle).

Тогда одно имеет приоритет над другим. Видеть:

Если вы зададите как свойства внешнего вида, так и свойство стиля, то отдельные свойства внешнего вида будут иметь приоритет над свойством стиля.

Возможным решением вашей проблемы может быть создание CSS-класса для рендеринга без полей и изменение только CssClass собственность:
<style type="text/css">
.CCSImageButtonNoBorder
{      
   border-style:none;
} 
</style>
img.CssClass = hasBorder ? "CCSImageButton" : "CCSImageButtonNoBorder";

Кроме того, должна быть возможность отменить настройку BorderStyle свойство внешнего вида, так что стиль CSS используется снова (я не могу проверить его в данный момент):
img.BorderStyle = BorderStyle.NotSet;