Datalist嵌套以及属性生成器和页面样式

要实现的页面效果是：

1.页面添加数据绑定控件（在ddlBigType里嵌套了ddlSmallType）

代码

< asp:DataList ID = " ddlBigType "  runat = " server "  
         onitemdatabound = " ddlBigType_ItemDataBound "  Width = " 192px " >
         < ItemTemplate >
           < div  class = " classblock " >
           < dl >< dt >
  < a target = " _blank "  href = " Trade-<%# Eval( " id " ) %>.html " >
            <% # Eval( " TYPE " )  %>
              </ a ></ dt >
              < dd >
             < asp:DataList ID = " ddlSmallType "  runat = " server "  Font - Bold = " False "  Font - Italic = " False "  
                     Font - Overline = " False "  Font - Strikeout = " False "  Font - Underline = " False "  
                     HorizontalAlign = " Left "  RepeatColumns = " 3 "  RepeatDirection = " Horizontal "  
                     RepeatLayout = " Flow " >                 
                 < ItemTemplate >
              
                      < a href = ' Trade-<%# Eval("id") %>.html ' >   <% # Eval( " TYPE " )  %></ a >
               
                 </ ItemTemplate >
             </ asp:DataList >
             </ dd >
             </ dl >
            </ div >  
         </ ItemTemplate >
        
     </ asp:DataList >

 

 2.进行数据绑定

ddlBigType要使用dataTable绑定数据，否则会出现异常；

然后在ddlBigType的ddlBigType_ItemDataBound事件中加入如下代码(根据自己需要适当修改)：

代码

　　　　if  (e.Item.ItemType  ==  ListItemType.Item  ||  e.Item.ItemType  ==  ListItemType.AlternatingItem)
        {
            DataList dataList  =  (DataList)e.Item.FindControl( " ddlSmallType " );
            DataRowView rowv  =  (DataRowView)e.Item.DataItem;
             int  id  =  Convert.ToInt32(rowv[ " Id " ]);
            
             if  (id  >   0 )
            {
                DataTable dt  =  IndustryTypeService.GetSmallType(id);
                 if  (dt  !=   null )
                {
                     try
                    {
                        dataList.DataSource  =  dt;
                        dataList.DataBind();
                    }
                     catch  (Exception ex)
                    {
                         throw   new  Exception(ex.Message);
                    }
                }
            }

　　　　｝

 

 

3.进行版式控制

回到页面进入设计模式 选择datalist的  属性生成器

属性生成器界面如下：

设置方向为水平，布局为流

点击格式 设置 水平对齐 居左

4.样式

代码

.classblock  {
    float : left ;  width : 200px ;   border-bottom : #eeeeee 1px dashed ;  text-align : left ;  height : 110px ;  overflow : hidden
}
.classblock dl  {
    float : left ;  width : 200px ;  overflow : hidden ;
}
.classblock dl dt  {
    float : left ;  width : 200px ;  height : 30px ;  line-height : 30px ;  font-weight : bold ;  font-size : 14px
}
.classblock dl dd  {
    float : left ;  width : 200px ;  line-height : 20px ;  color : #666 ;
}  
.classblock dl dt a:link  {  color : #003CC8 ;  text-decoration : none ; }
.classblock dl dt a:visited  {  text-decoration : none ;  color : #003CC8 ; }
.classblock dl dt a:hover  {  color : #FF7300 ;  text-decoration : underline ; }
.classblock dl dt a:active  {  text-decoration : underline ;  color : #FF7300 ; }
.classblock dl dd a:link  {  color : #555 ;  text-decoration : none ; }
.classblock dl dd a:visited  {  text-decoration : none ;  color : #555 ; }
.classblock dl dd a:hover  {  color : #FF7300 ;  text-decoration : underline ; }
.classblock dl dd a:active  {  text-decoration : underline ;  color : #FF7300 ; }

 

 

转载于:https://www.cnblogs.com/Simcoder/archive/2010/09/09/1822414.html