将边框样式更改为datalist中的所有图像按钮时，Css丢失 [英] Css lost when change border style to all imagebutton in datalist

问题描述

在所有图像的边缘执行操作



CSS样式

< style type =text / css> 
 .CCSImageButton：悬停
 {
 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 =UpdatePanel1runat = 服务器 > 
< ContentTemplate> 
< asp：DataList ID =DataList1runat =serverRepeatDirection =Horizo​​ntalRepeatLayout =TableRepeatColumns =0SeparatorStyle-Horizo​​ntalAlign =NotSetSelectedItemStyle-Wrap =FalseSelectedItemStyle- Horizo​​ntalAlign =NotSetHorizo​​ntalAlign =NotSetItemStyle-Horizo​​ntalAlign =NotSetFooterStyle-Wrap =Falseclass =auto-style1> 
< ItemTemplate> 
< td> 
< asp：ImageButton ID =ImageButton1runat =serverImageUrl ='<％#Container.DataItem％>'Height =200pxOnClick =ImageButton1_ClickImageAlign =MiddleEnableTheming = FalseCssClass =CCSImageButton/> 
< / td> 
< / ItemTemplate> 
< / asp：DataList> 
< / ContentTemplate> 
< / asp：UpdatePanel> 
< / div> 

cs file



wthout the cicle foreach .... CSS工作

 受保护 < span class =code-keyword> void  ImageButton1_Click（ object  sender，ImageClickEventArgs e）
 {
  //  如果此块处于活动状态 
  //   css设置不再有效 
  //    
  foreach （DataListItem item  in  DataList1.Items）
 {
（item.FindControl（  ImageButton1） as  ImageButton）.BorderStyle = BorderStyle.None; 
  //  无效 
  //  （item.FindControl（ImageButton1）as ImageButton）.CssClass =CCSImageButton;  
} 
 
  //  读取索引图像点击 
 ImageButton imgbtnid =（ImageButton）sender; 
 DataListItem item1 =（DataListItem）imgbtnid.NamingContainer; 
 
  //   get image index  
  int  idx = item1.ItemIndex; 
 
  //  显示图片 
 ImageButton img = sender  as  ImageButton; 
 
  / *   
 img.BorderStyle = BorderStyle.Solid; 
 img.BorderWidth = 2; 
 img.BorderColor = System.Drawing.Color.Red; 
 * /  
 
 Image1.ImageUrl = img.ImageUrl; 
 
  //  显示说明 
 ImageDescr = GetListOfDescription（）; 
 Label2.Text = ImageDescr [idx]; 
 
 img.CssClass =   CCSImageButton;  //   ha not not effect  
} 

我尝试过：

 foreach（DataListItem项目in DataList1.Items）
 {
（item.FindControl（ImageButton1）as ImageButton）.BorderStyle = BorderStyle.None; 
 //没有影响
（item.FindControl（ImageButton1）作为ImageButton）.CssClass =CCSImageButton; 
} 

如果不执行此操作，CSS工作

（item.FindControl（ImageButton1）as ImageButton）.BorderStyle = BorderStyle.None; 

解决方案

您正在使用两种不同的样式方法：CSS和WebControl外观属性（ BorderStyle ）。



然后一个需要优先于另一个。请参阅：

ASP.NET Web服务器控件和CSS样式 [ ^ ]：

如果同时设置外观属性和Style属性，则各个外观属性优先于Style属性。

A可能您的问题的解决方案可能是为无边框渲染创建CSS类，并仅更改 CssClass 属性：

 < span class =code-leadattribute>< style  type =text / css> 
。 CCSImageButtonNoBorder  
 {
  border-style  ：  none;  
} 
 < /   style  >  

 img .CssClass = hasBorder？   CCSImageButton：  CCSImageButtonNoBorder; 

也可以取消设置 BorderStyle 外观属性，以便再次使用CSS样式（我目前无法测试）：

 img.BorderStyle = BorderStyle.NotSet; 

Performing an operation on the edge of all images

CSS style

<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 file

<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 file

wthout the cicle foreach.... the CSS work

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
    }

What I have tried:

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

if not execute this , CSS work

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

解决方案

You are using two different style methods: CSS and a WebControl appearance property (BorderStyle).

Then one takes precedence over the other. See:

ASP.NET Web Server Controls and CSS Styles[^]:

If you set both appearance properties and the Style property, the individual appearance properties take precedence over the Style property.

A possible solution to your problem might be creating a CSS class for borderless rendering and change only the CssClass property:

<style type="text/css">
.CCSImageButtonNoBorder
{      
   border-style:none;
} 
</style>

img.CssClass = hasBorder ? "CCSImageButton" : "CCSImageButtonNoBorder";

It should be also possible to unset the BorderStyle appearance property so that the CSS style is used again (I can't test it at the moment):

img.BorderStyle = BorderStyle.NotSet;

这篇关于将边框样式更改为datalist中的所有图像按钮时，Css丢失的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！