Asp.net - Sử dụng lồng các control

Khi xây dựng ứng dụng hay website, nhiều khi bạn phải sử dùng lồng các control để hiển thị dữ liệu. Việc dùng lồng control với gridview thì hmweb cũng đã có khá nhiều bài viết có sử dụng điều này. Ở bài này tôi hướng dẫn bạn dùng DataList lồng trong ListView như demo

Khi xây dựng ứng dụng hay website, nhiều khi bạn phải sử dùng lồng các control để hiển thị dữ liệu. Việc dùng lồng control với gridview thì hmweb cũng đã có khá nhiều bài viết có sử dụng điều này. Ở bài này tôi hướng dẫn bạn dùng DataList lồng trong ListView như demo

DEMO

Việc này ứng dụng khá dễ khi bạn dùng để hiển thị list các bài viết của mỗi chuyên mục và được phân cách nhau, số chuyên mục này không cố định. Ở bài này tôi chỉ minh họa cách dùng DataList lồng trong ListView, bạn có thể ứng dụng cách làm này trình bày dữ liệu theo yêu cầu của bạn. Giả sử dữ liệu của bạn có 2 bảng TB_Category và TB_News có quan hệ 1-n như sau:

Giờ ta muốn hiển thị dạng Frame với các CateName là các FrameTitle và bên trong là list danh sách các bài viết mới nhất của mỗi CateName này. Code aspx viết như sau:

asp:ListView ID="lvCate" runat="server"> <LayoutTemplate> <span id="itemPlaceholder" runat="server"></span> </LayoutTemplate> <ItemTemplate> <div class="DivFrame"> <div class='LeadTitle'><a href='#' title="<%# Eval("CateName") %>"><b><%# Eval("CateName") %></b></a></div> <asp:Label ID="lblCateID" runat="server" Text='<%# Eval("CateID") %>' Visible="false" /> <div id="NewsList"> <asp:DataList ID="lvListNew" RepeatDirection="Horizontal" runat="server" RepeatColumns="4" CellPadding="10" CellSpacing="10" > <ItemStyle Width="25%" CssClass="itemoflv" HorizontalAlign="Center" VerticalAlign="Top" /> <ItemTemplate> <a href='#' title='<%# Eval("Title") %>'> <%# Eval("Title")%></a></ItemTemplate> </asp:DataList> </div>  </div> </ItemTemplate> </asp:ListView>

Bạn chú ý Trong code aspx trên phần chữ màu xanh là DataList được lồng bên trong ListView (lvCate) và ta cần một Label (Bạn có thể dùng control khác) để khi ta code ta có thể lấy ra các CateID tương ứng và ta không hiển thị Lable này nên có thuộc tính Visible="false".

Code Csharp: Vì ở đây tôi chỉ làm ví dụ minh họa nên thực hiện việc truy vấn trực tiếp luôn nên cần hàm thực thi một câu truy vấn và trả về một DataTable

private DataTable QueryToDataTable(string strSQL) { DataTable dtbTmp = new DataTable(); string connString = @" Server =.SQL2005;Initial Catalog=TB_New;User ID=sa;Password=***"; SqlConnection conn = new SqlConnection(connString); try { conn.Open(); SqlDataAdapter da = new SqlDataAdapter(strSQL, conn); DataSet ds = new DataSet(); da.Fill(ds, "GetData"); dtbTmp = ds.Tables[0]; } catch (Exception e) { Console.WriteLine(e.Message); } finally { conn.Close(); } return dtbTmp; }

Giờ ta viết hàm Bind dữ liệu như sau:

private void LoadData() { string strCate = "SELECT CateID, CateName FROM TB_Category"; string strNew=""; DataTable dtb = QueryToDataTable(strCate); if (dtb.Rows.Count > 0) { lvCate.DataSource = dtb; lvCate.DataBind(); for (int i = 0; i < dtb.Rows.Count; i++) { DataList lvListNew = (DataList)lvCate.Items[i].FindControl("lvListNew"); Label lblCateID = (Label)lvCate.Items[i].FindControl("lblCateID"); strNew = @"SELECT Top 6 tn.Title, tn.Description FROM TB_News tn INNER JOIN TB_Category ct ON tn.CateID = ct.CateID WHERE ct.CateID=" + lblCateID.Text + " AND tn.Status=1 ORDER BY tn.idNews DESC "; DataTable dtbListNew = QueryToDataTable(strNew); if (dtbListNew.Rows.Count > 0) { lvListNew.DataSource = dtbListNew; lvListNew.DataBind(); } } } }

Trong hàm LoadData trên bạn thấy ta dùng vòng lặp và FindControl để tìm các control bên trong ListView và thực hiện tiếp việc Bind dữ liệu tương ứng. Trong hàm Page_Load nơi bạn muốn hiển thị dữ liệu bạn chỉ cần gọi hàm LoadData(). Về stylesheet bạn chỉ cần thiết kế các style để trình bày dữ liệu cho rõ ràng và đẹp chút là được. Bạn có thể tham khảo stylesheet mà tôi đang dùng trong demo như sau

.DivFrame{ border:1px solid #999999; margin-bottom:15px; } #ClipList{ background:url(Images/ContentBack.jpg) repeat-x; font-size:13px; } #ClipList .Description{ line-height:20px; padding:0px 10px 0px 10px; font-weight:bold; color:#666666;} #ClipList .Content{ line-height:20px; padding:0px 10px 10px 10px;} #ClipList h1{font-size:16px; color:#0099CC; padding:5px;} .itemoflv{ text-align:center; padding:10px 0px 0px 0px; border:1px solid #DEDEDE; }

Nguồ:thietkewebsmart.com