ASP.NET DataList嵌套实现评论效果
问题:
Datalist1显示say这个表的数据
然后想在Datalist1中嵌套一个Datalist2用于显示对应的评论
表2的 sayID对应表1的id,若表2中找不到对应sayId则在对应的Datalist1中不显示Datalist2.
难点在于如何达到“林夏”的说说下面只显示“黄磊”、“叶伟信”的评论,“韩寒”的下面只显示“程程”的评论。(林夏的id是3,所以查询对应的表2中sayId为3的行)。
代码
前台代码:
<html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <link href="Content/bootstrap.css" rel="stylesheet" /> </head> <body> <form id="form1" runat="server"> <h2 style="text-align:center;">评论列表</h2> <div align="center" style="margin-top:20px;"> <asp:DataList ID="DataList1" runat="server" OnItemDataBound="DataList1_ItemDataBound" Width="50%" CssClass="table table-bordered" CellPadding="0" CellSpacing="0"> <ItemTemplate> <div> 来自<%# Eval("place") %>的<%# Eval("username") %>于<%# Eval("date") %>发表 </div> <div> <%# Eval("text") %> </div> <asp:DataList ID="DataList2" runat="server" Width="100%"> <ItemTemplate> <div style="border: 1px dashed black; margin: 1px;"> <div> <%#Eval("username") %>的评论<%#Eval("date") %> </div> <div>评论内容:<%#Eval("text") %> </div> </div> </ItemTemplate> </asp:DataList> </ItemTemplate> </asp:DataList> </div> </form> </body> </html>
后台cs:
protected void Page_Load(object sender, EventArgs e) { if (!Page.IsPostBack) { this.DataList1.DataSource = Data(); this.DataList1.DataBind(); } } public DataSet Data() { DataSet ds = new DataSet(); DataTable dtParent = new DataTable(); dtParent.Columns.Add("id", typeof(int)); dtParent.Columns.Add("username", typeof(string)); dtParent.Columns.Add("text", typeof(string)); dtParent.Columns.Add("date", typeof(string)); dtParent.Columns.Add("place", typeof(string)); dtParent.Rows.Add(1, "摩根", "这个...", "2014.6", "伦敦"); dtParent.Rows.Add(2, "韩寒", "潮流...", "2015.7", "湖南"); dtParent.Rows.Add(3, "林夏", "岁月...", "2016.2", "小城"); dtParent.Rows.Add(4, "王菲", "我会...", "2015.9", "香港"); dtParent.Rows.Add(5, "郭敬明", "我们...", "2015.1", "上海"); DataTable dtChild = new DataTable(); dtChild.Columns.Add("id", typeof(int)); dtChild.Columns.Add("sayId", typeof(int)); dtChild.Columns.Add("username", typeof(string)); dtChild.Columns.Add("text", typeof(string)); dtChild.Columns.Add("date", typeof(string)); dtChild.Rows.Add(1, 3, "黄磊", "我是第一个评说", "2016.6.17 13:06:12"); dtChild.Rows.Add(3, 3, "叶伟信", "评论林夏的说", "2016.6.17 12:26:43"); dtChild.Rows.Add(4, 2, "程程", "我评论韩寒", "2015.3.1 15:20:10"); ds.Tables.AddRange(new DataTable[] { dtParent, dtChild }); DataRelation dr = new DataRelation("relation", dtParent.Columns["id"], dtChild.Columns["sayId"]); ds.Relations.Add(dr); dtParent = ds.Relations["relation"].ParentTable; dtChild = ds.Relations["relation"].ChildTable; return ds; } protected void DataList1_ItemDataBound(object sender, DataListItemEventArgs e) { if (e.Item.ItemType == ListItemType.Item || e.Item.ItemType == ListItemType.AlternatingItem) { DataList dataList = e.Item.FindControl("DataList2") as DataList; DataRowView rowv = (DataRowView)e.Item.DataItem; DataRow[] rows = Data().Tables[1].Select("sayId='" + rowv["id"].ToString() + "'"); DataTable dt = Data().Tables[1].Clone(); foreach (DataRow dr in rows) { dt.ImportRow(dr); } dataList.DataSource = dt; dataList.DataBind(); } }
后台代码中数据源部分可以用ado.net查询数据库方式替换。
效果图: