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