RSSAsp.net

Asp.net xây dựng menu với ajax Accordion dữ liệu từ SQL server

Trong bài viết Asp.net Ajax Hướng dẫn tạo menu với Ajax - Accordion bạn đã được làm quen với AJax Accodion nhưng ở bài viết đó bạn phải tạo dữ liệu bằng tay. Vậy khi muốn sử dụng Accodion lấy dữ liệu từ Database thì làm thế nào? Bài viết này tôi sẽ hướng dẫn bạn thực hiện

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.

 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:
 

<%@ Register assembly="AjaxControlToolkit" 
namespace="AjaxControlToolkit" tagprefix="cc1" %>

 

- Sử dụng ajax Accordion:

<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

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:

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:

protected void Page_Load(object sender, EventArgs e)
{
    PopulateCountry();
}

 Liên kết download source và Database của bài viết cùng như các thư viện ajax cần thiết: http://www.mediafire.com/?zq10kzsloypy8j0

Theo HMWEB

Nếu bạn thấy bài viết hữu ích, hãy nhấn +1 và các liên kết chia sẻ để website ngày càng phát triển hơn. Xin cám ơn bạn!

Nếu là khách, bạn phải đăng ký tài khoản và kích hoạt tài khoản để bình luận được hiển thị ở đây.
Thông tin kích hoạt gửi đến mail của bạn.

Tin mới hơn

Tin cũ hơn

Lên trên đầu