DataList嵌套GridView实现文章分类列表显示

昨天晚上花了三个多小时写一个程序实现下面这种功能的：

现在我把我的代码贴上来大家分享一下，这个用到一个DataList，和GridView。先到Dreamwaver里面把布局布好，我用的是div+css布局的
然后在DataList中嵌套进GridView控件，在把样式做好，然后就开始写代码了
.aspx中代码：

 1<div id="div_bodyright">
 2
 3<asp:DataList ID="list" runat="server" RepeatColumns="2" RepeatDirection="Horizontal" DataKeyField="TypeID"
 4    RepeatLayout="Flow" OnItemDataBound="list_ItemDataBound">
 5    <ItemTemplate>
 6        <div id="div11" class="bodyleft">
 7            <div id="title1" class="cls_title">
 8                <div id="tl1" class="cls_tleft"><img src="images/bullet1.gif" alt="Title"/>&nbsp;<label id="t1" class="lbTxt"><%# DataBinder.Eval(Container.DataItem, "TypeName")%></label></div>
 9                <div id="tr1" class="cls_tright"><img src="images/more.gif" alt="More" /></div> 
10            </div>
11            <div id="list1" class="divlist">
12            <asp:GridView ID="gvArticle1" runat="server" ShowHeader="false" ShowFooter="false" AutoGenerateColumns="False"  CellPadding="4" ForeColor="#333333" GridLines="None" width="100%">
13            <FooterStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" />
14                <Columns>
15                    <asp:TemplateField HeaderText="标题">
16                        <ItemStyle Width="80%" />
17                        <ItemTemplate>
18                            <asp:HyperLink ID="title" runat="server" NavigateUrl='<%#"Article.aspx?aid=" + DataBinder.Eval(Container.DataItem,"ArticleId")%>' title='<%#"标题：" + DataBinder.Eval(Container.DataItem, "ArticleTitle") + "\n发布日期：" + DataBinder.Eval(Container.DataItem,"ArticleDateTime") + "\n点击量：" + DataBinder.Eval(Container.DataItem,"ArticleClick")%>'><%# DataBinder.Eval(Container.DataItem, "ArticleTitle")%></asp:HyperLink>
19                        </ItemTemplate>
20                    </asp:TemplateField>
21                    <asp:BoundField DataField="ArticleDate" HeaderText="日期" ItemStyle-Width="20%" />
22                    
23                </Columns>
24                <RowStyle BackColor="#F7F6F3" ForeColor="#333333" />
25                <EditRowStyle BackColor="#999999" />
26                <SelectedRowStyle BackColor="#E2DED6" Font-Bold="True" ForeColor="#333333" />
27                <PagerStyle BackColor="#284775" ForeColor="White" HorizontalAlign="Center" />
28                <HeaderStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" />
29                <AlternatingRowStyle BackColor="White" ForeColor="#284775" />
30            </asp:GridView>
31            </div>
32        </div>
33    </ItemTemplate>
34    <AlternatingItemTemplate>
35        <div id="div12" class="bodyright">
36            <div id="title2" class="cls_title">
37                <div id="tl2" class="cls_tleft"><img src="images/bullet1.gif" alt="Title"/>&nbsp;<label id="t2" class="lbTxt"><%# DataBinder.Eval(Container.DataItem, "TypeName")%></label></div>
38                <div id="tr2" class="cls_tright"><img src="images/more.gif" alt="More" /></div>
39            </div>
40            <div id="list1" class="divlist">
41            <asp:GridView ID="gvArticle2" runat="server" ShowHeader="false"  AutoGenerateColumns="False" ShowFooter="false" CellPadding="4" ForeColor="#333333" GridLines="None"  width="100%">
42            <FooterStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" />
43                <Columns>
44                    <asp:TemplateField HeaderText="标题">
45                        <ItemStyle Width="80%" />
46                        <ItemTemplate>
47                            <asp:HyperLink ID="title" runat="server" NavigateUrl='<%#"Article.aspx?aid=" + DataBinder.Eval(Container.DataItem,"ArticleId")%>' title='<%#"标题：" + DataBinder.Eval(Container.DataItem, "ArticleTitle") + "\n发布日期：" + DataBinder.Eval(Container.DataItem,"ArticleDateTime") + "\n点击量：" + DataBinder.Eval(Container.DataItem,"ArticleClick")%>'><%# DataBinder.Eval(Container.DataItem, "ArticleTitle")%></asp:HyperLink>
48                        </ItemTemplate>
49                    </asp:TemplateField>
50                    <asp:BoundField DataField="ArticleDate" HeaderText="日期" ItemStyle-Width="20%" />
51                    
52                </Columns>
53                <RowStyle BackColor="#F7F6F3" ForeColor="#333333" />
54                <EditRowStyle BackColor="#999999" />
55                <SelectedRowStyle BackColor="#E2DED6" Font-Bold="True" ForeColor="#333333" />
56                <PagerStyle BackColor="#284775" ForeColor="White" HorizontalAlign="Center" />
57                <HeaderStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" />
58                <AlternatingRowStyle BackColor="White" ForeColor="#284775" />
59            </asp:GridView>     
60            </div>       
61        </div>
62    </AlternatingItemTemplate>
63</asp:DataList>
64</div>

.cs中的代码：

    BllArticle bll = new BllArticle();

    protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
            list.DataSource = bll.GetTypeList(false);
            list.DataBind();
        }
    }
    protected void list_ItemDataBound(object sender, DataListItemEventArgs e)
    {
        if (e.Item.ItemType == ListItemType.Item || e.Item.ItemType == ListItemType.AlternatingItem)
        {
            if (e.Item.ItemType == ListItemType.Item)
            {
                GridView gvList1 = (GridView)e.Item.FindControl("gvArticle1");

                gvList1.DataSource = bll.GetArticles(int.Parse(list.DataKeys[e.Item.ItemIndex].ToString()));
                gvList1.DataBind();

            }
            if (e.Item.ItemType == ListItemType.AlternatingItem)
            {                
                GridView gvList2 = (GridView)e.Item.FindControl("gvArticle2");
                gvList2.DataSource = bll.GetArticles(int.Parse(list.DataKeys[e.Item.ItemIndex].ToString()));
                gvList2.DataBind();
            }
        }
    }

在数据层中的代码：

        /// <summary>
        /// 获取文章类别的信息 IsAll是不是显示全部信息
        /// </summary>
        /// <param name="IsAll">true 显示所有，false 显示允许显示的内容</param>
        /// <returns></returns>
        public DataSet GetTypeList(bool IsAll)
        {
            using (SqlConnection conn = new SqlConnection(DBSqlHelper.DBConnectionString))
            {
                StringBuilder sb = new StringBuilder();
                if(IsAll)
                {
                    sb.Append(" select * from Info_Type order by TypeOrder desc");
                    return DBSqlHelper.GetDataSet(conn,CommandType.Text,sb.ToString());
                }
                else
                {
                    sb.Append(" select * from Info_Type where TypeVisible=@Visible order by TypeOrder desc");
                    SqlParameter parm = new SqlParameter("@Visible",SqlDbType.VarChar,0);
                    parm.Value = "1";
                    return DBSqlHelper.GetDataSet(conn, CommandType.Text, sb.ToString(), parm);
                }
            }
        }

        /// <summary>
        /// 获取前N条文章列表数据
        /// </summary>
        /// <param name="TypeID"></param>
        /// <returns></returns>
        public DataSet GetArticles(int TypeID)
        {
            using (SqlConnection conn = new SqlConnection(DBSqlHelper.DBConnectionString))
            {
                StringBuilder sb = new StringBuilder();
                sb.Append(" select top 10 ArticleId,ArticleTitle,replace(convert(varchar(12),ArticleDate,111),'/','-') as ArticleDate,");
                sb.Append(" ArticleDate as ArticleDateTime,ArticleClick from Info_Article where ArticleType=@typeid order by ArticleId desc");

                SqlParameter parm = new SqlParameter("@typeid", SqlDbType.Int, 0);
                parm.Value = TypeID;

                return DBSqlHelper.GetDataSet(conn, CommandType.Text, sb.ToString(),parm);
            }
        }

这样就可以了，不过我这里就不把CSS文件的代码贴上来了，实现的效果就是上面截图那样的