[ASP.NET] Tạo Menu đa cấp load từ SQL Server

ới menu 1 cấp chúng ta hoàn toàn ko cần viết code lập trình vì với 2 control Repeater và SqlDataSource đã đủ làm việc đó. Nhưng với menu đa cấp (đặc biệt là ko giới hạn cấp) thì 2 control trên pó tay🙂
Bài này mình sẽ hướng dẫn các bạn viết code để tạo menu không giới hạn cấp bằng cách dùng đệ qui
Ở đây mình không phân tích đệ qui là gì. Xem như mọi người đã biết🙂

Thôi ta bắt đầu nhé! (nói nhiều quá)
Ví dụ ta có DB và một table [chuyenmuc] gồm 3 trường:
– chuyenmuc_id: mã của chuyên mục.
– chuyenmuc_name: Tên của chuyên mục.
– chuyenmuc_parent: mã chuyên mục cha. nếu không có chuyên mục cha thì mã là 0

Thông thường để tạo menu (dù 1 hay nhiều cấp) ta đều dùng tag

    của html. trong bài này mình cũng dùng tag này.
    Vậy kết quả mà ta cần là một đoạn html có dạng:

    <ul>
    <li>Menu 1 </li>
    <ul>
    <li>Menu 1.1 </li>
    <li>Menu 1.2 </li>
    <li>Menu 1.3 </li>
    <ul>
    <li>Menu 1.3.1 </li>
    <li>Menu 1.3.2 </li>
    </ul>
    </ul>
    <li>Menu 2 </li>
    <ul>
    <li>Menu 2.1 </li>
    <li>Menu 2.2 </li>
    </ul>
    <li>Menu 3 </li>
    <ul>
    <li>Menu 3.1 </li>
    <li>Menu 3.2 </li>
    </ul>
    </ul>

    Bước 1: Trong trang aspx tạo một Label đặt ID=menu

    <asp:Label ID=”menu” runat=”server” Text=””></asp:Label>

    Bước 2: Viết hàm đệ qui để load menu với nội dung như sau:

    public string loadmenu(int parentid, int level)
    {
    string result = string.Empty;
    string ConnectString = “Data Source=IP SERVER;User ID=USERNAME;Password=PASSWORD”;
    System.Data.SqlClient.SqlConnection conn = new System.Data.SqlClient.SqlConnection();
    conn.ConnectionString = ConnectString;

    System.Data.SqlClient.SqlCommand cmd = new System.Data.SqlClient.SqlCommand();
    cmd.CommandType = System.Data.CommandType.Text;
    cmd.CommandText = “SELECT * FROM [chuyenmuc] WHERE [chuyenmuc_parent] = ” + parentid.ToString();
    cmd.Connection = conn;
    conn.Open();
    System.Data.SqlClient.SqlDataReader rd = cmd.ExecuteReader();
    if (!rd.HasRows)
    return result;
    else
    {
    result = “

      “;
      while (rd.Read())
      {
      result += “
    • ” + rd.GetString(rd.GetOrdinal(“chuyenmuc_name”)) + “
    • “;
      result += loadmenu(rd.GetInt32(rd.GetOrdinal(“chuyenmuc_id”) ), level + 1);
      }
      result += “

    “;
    conn.Close();
    }
    return result;
    }

    Trong đoạn code trên bạn chú ý biến ConnectString có 3 giá trị cần thay đổi cho phù hợp với bạn là: IP SERVER, USERNAME, PASSWORD.

    Vậy là ta đã có một hàm đệ qui trả về giá trị là một string. Hàm này mỗi lần lấy được một chuyên mục sẽ tiếp tục gọi chính nó và tìm chuyên mục con của chuyên mục hiện tại. Cứ như thế cho đến khi đọc hết DB.

    Bước 3: Trong Page_Load gọi hàm loadmenu và gán cho label menu là dc.

    menu.Text = loadmenu(0, 0);

    Vậy là chỉ trong 3 bước bạn đã có một menu không giới hạn cấp rồi đó.

    Ghi chú: Vì hàm này mỗi lần dc gọi là thực hiện truy cập DB nhiều lần nên có thể ảnh hưởng tốc độ. Vì vậy bạn nên lưu giá trị đã tìm dc vào một file nào đó. Chỉ khi nào có thay đổi trên menu thì cập nhật lại file này

Về tieuyeuit
Lập trình viên Asp.net Tôi chia sẻ một,bạn chia sẻ một và chúng ta có rất nhiều!

11 Responses to [ASP.NET] Tạo Menu đa cấp load từ SQL Server

  1. Pingback: [ASP.NET] Tạo Menu đa cấp load từ SQL Server | Soft.HaGiangVui.Org

  2. Hoang Duy nói:

    Mình làm theo hướng đẫn của bạn nhưng không được. bạn có thể đưa code lên cho mình tham khỏa được không? cảm ơn bạn.

  3. hqaptech nói:

    cam on ban rat nhieu khi cho source

  4. vnatula nói:

    Dùng kĩ thuật “đệ quy” à. Theo tôi là ko tốt. Trong trường hợp này, tôi nghĩ bạn nên dùng xPath sau khi build danh sách menu ra XML file.

  5. ngochhuy nói:

    t nghĩ vnatula lên làm 1 bài demo post lên cho mọi ng tham khảo xem ưu nhược điểm của hai cách trên thế nào. nếu dc thế thì thanks bạn nhiều

  6. nguyen phuoc long nói:

    chao cac a !!!
    e co 1 cai menu Accordion ( menu trai). nhung e k pit lam sau lay du lieu tu database vao menu nay … vi du: e muon lay ten cua Hang SAn Xuat va San Pham bo vao menu. khi click vao menu nay se sang trang chitietsp… mong cac a chi giup…
    thank cac a!!!

  7. Thanhs nam nói:

    Giải thuật này khi lấy đến cấp độ menu thứ 2 trở đi thì bị nỗi rồi bạn. Nó cho ra cấu trúc sắp sếp HTML không đúng nó phải hiển thị
    VD:

    Menu 1

    Menu 1.1
    Menu 1.2
    Menu 1.3

Gửi phản hồi

Mời bạn điền thông tin vào ô dưới đây hoặc kích vào một biểu tượng để đăng nhập:

WordPress.com Logo

Bạn đang bình luận bằng tài khoản WordPress.com Log Out / Thay đổi )

Twitter picture

Bạn đang bình luận bằng tài khoản Twitter Log Out / Thay đổi )

Facebook photo

Bạn đang bình luận bằng tài khoản Facebook Log Out / Thay đổi )

Google+ photo

Bạn đang bình luận bằng tài khoản Google+ Log Out / Thay đổi )

Connecting to %s

%d bloggers like this: