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 >
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();
}
}
}
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);
}
}
/// 获取文章类别的信息 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文件的代码贴上来了,实现的效果就是上面截图那样的