Cơ sỡ dữ liệu tôi lấy làm minh họa là bảng TB_ChuyenMuc của cở dỡ dữ liệu quản lý thư viện mà nếu bạn có theo dõi trên hmweb bạn đã biết. Bạn có thể download cơ sở dữ liệu đó hoặc download cơ sở dữ liệu DemoSlide ở cuỗi bài viết. Để dễ hình dung bạn có thể xem demo
Giờ ta bắt tay vào làm nhé.
1. Các Style sheet.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
| a { font-family : Tahoma ; font-size : 13px ; text-decoration : none ; color : #303030 ;} a:hover { font-size : 13px ;COLOR:Maroon; font-family : Tahoma ; border-bottom : 1px solid #ddd ; } .divframe_headSelected { background : #fff url (images/headselected.png); line-height : 24px ; padding-left : 10px ; text-align : left ; border-bottom : 1px solid #CCC ; margin : 0px 0px 0px 0px ; font-weight : bold ; } .accoditionContent { border : 1px dashed #CCC ; border-top : none ; padding : 5px ; text-align : left ; line-height : 25px ; padding-top : 10px ; } .accoditionHeader { background : #fff url (images/Title_bg.jpg); line-height : 24px ; text-align : left ; padding-left : 10px ; border-bottom : 1px solid #CCC ; margin : 0px 0px 0px 0px ; font-weight : bold ; } |
Các style sheet này thực ra chỉ là để trình bày cho đẹp mắt thôi. Bạn có thể tùy hứng thay đổi theo mắt thiết kế của bạn.
2. Trong trang aspx.
- Đăng ký sử dụng Ajax:
1
2
| <%@ Register assembly= "AjaxControlToolkit" namespace = "AjaxControlToolkit" tagprefix= "cc1" %> |
- Sử dụng ajax Accordion:
1
2
3
4
5
6
7
8
9
10
11
| <cc1:ToolkitScriptManager ID= "ToolkitScriptManager1" runat= "server" > </cc1:ToolkitScriptManager> <cc1:Accordion ID= "Accordion1" Width= "200" AutoSize= "None" HeaderCssClass= "accoditionHeader" HeaderSelectedCssClass= "divframe_headSelected" FadeTransitions= "true" SuppressHeaderPostbacks= "true" ContentCssClass= "accoditionContent" runat= "server" ></cc1:Accordion> |
3. Viết code trong code behind
- Hàm thực thi câu truy vấn trả về Datatable
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
| private DataTable GetCategory( string sqlQuery) { DataTable dtbTmp = new DataTable(); string connString = @"Server =.\SQL2005;Initial Catalog=DemoSlide; User ID=sa;Password=sa" ; SqlConnection conn = new SqlConnection(connString); try { conn.Open(); SqlDataAdapter da = new SqlDataAdapter(sqlQuery, conn); DataSet ds = new DataSet(); da.Fill(ds, "Category" ); dtbTmp = ds.Tables[0]; } catch (Exception e) { Console.WriteLine(e.Message); } finally { conn.Close(); } return dtbTmp; } |
- Hàm Load dữ liệu:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
| private void PopulateCountry() { DataTable dtb = GetCategory( @"Select idChuyenMuc, TenChuyenMuc From TB_ChuyenMuc Where Decen=0" ); DataTable dtb2; DataRow drRow; for ( int i = 0; i < dtb.Rows.Count; i++) { AjaxControlToolkit.AccordionPane accp = new AjaxControlToolkit.AccordionPane(); drRow = dtb.Rows[i]; Label lblHeader = new Label(); lblHeader.ID = "lblHead" + i.ToString(); lblHeader.Text = "<a href='#'>" + drRow[ "TenChuyenMuc" ].ToString() + "</a>" ; dtb2 = GetCategory( @"Select idChuyenMuc, TenChuyenMuc From TB_ChuyenMuc Where Decen=1 And idChuyenMucCha=" + drRow["idChuyenMuc"].ToString()); Label lblContent = new Label(); lblContent.ID = "lblContent" + i.ToString(); lblContent.Text = "" ; accp.ID = "accp" + i.ToString(); foreach (DataRow dr in dtb2.Rows) { lblContent.Text += "<a href='?idparent=" +drRow[ "idChuyenMuc" ]+ "&idcate=" +dr[ "idChuyenMuc" ]+ "'>" + dr[ "TenChuyenMuc" ].ToString() + "</a><br>" ; } accp.HeaderContainer.Controls.Add(lblHeader); accp.ContentContainer.Controls.Add(lblContent); Accordion1.Panes.Add(accp); } } |
Cuối cùng trong hàm Page_Load như sau:
1
2
3
4
| protected void Page_Load( object sender, EventArgs e) { PopulateCountry(); } |
Comments[ 0 ]
Đăng nhận xét