RSSAsp.net

Tạo menu động lấy từ Database trong asp.net

Trong bài viết này, bạn sẽ học được cách tạo menu động lấy dữ liệu từ database trong asp.net

Tạo menu động lấy từ Database trong asp.net

Trong bài viết này, bạn sẽ học được cách tạo menu động lấy dữ liệu từ database trong asp.net

 

I. Introduction

dynamically populationg menu

II. Create Database Tables

Bạn cần thiết kế một bảng để lưu trữ menu

database of menu

Ở đây, MenuLocation là cột dùng để lưu trữ đường dẫn tương đối khi mà người dùng click chuột vào.

Chèn dữ liệu mẫu vào nào:
B1: Cần phải có một vài menu với ParentId = 0, tức là menu cha đó.
B2: Thêm các sub menu cho các menu bên trên.

Ok!, sau khi thêm chúng ta sẽ được như sau:

MenuID  MenuName    MenuLocation ParentID
  1	ParentItem1	NULL	   0
  2	ParentItem2	NULL	   0
  3	ParentItem3	NULL	   0
 11	SubMenuItem1	NULL	   1
 12	SubMenuItem2	NULL	   1
 21	SubMenuItem3	NULL	   2

Ở đây, cột MenuLocation bạn có thể thêm url ví dụ như Default.aspx hoặc User/NewUserAdd.aspx

III. MasterPage
Thông thường khi chúng ta thiết kế menu, thì chúng ta thường chèn nó vào file MasterPage để chúng ta đỡ phải thiết kế nhiều lần,

B1: Tạo một menu control trong file MasterPage:

<div class="MenuBar">
	<asp:Menu ID="menuBar" runat="server" Orientation="Horizontal" Width="100%">
		<DynamicHoverStyle CssClass="DynamicHover" />
		<DynamicMenuItemStyle CssClass="DynamicMenuItem" />
		<DynamicSelectedStyle CssClass="DynamicHover" />

		<StaticHoverStyle CssClass="staticHover" />
		<StaticMenuItemStyle CssClass="StaticMenuItem" ItemSpacing="1px" />
		<StaticSelectedStyle CssClass="staticHover" />
	</asp:Menu>
</div>

B2: Trong code behind chúng ta viết thêm một hàm getMenu để lấy ra toàn bộ menu từ database, hàm này sẽ được dùng trong hàm Page_Load của trang MasterPage khi !IsPostBack

private void getMenu()
{
    Connect();
    con.Open();
    DataSet ds = new DataSet();
    DataTable dt = new DataTable();
    string sql = "Select * from tbl_WebMenu";
    SqlDataAdapter da = new SqlDataAdapter(sql, con);
    da.Fill(ds);
    dt = ds.Tables[0];
    DataRow[] drowpar = dt.Select("ParentID=" + 0);

    foreach (DataRow dr in drowpar)
    {
        menuBar.Items.Add(new MenuItem(dr["MenuName"].ToString(), 
                dr["MenuID"].ToString(), "", 
                dr["MenuLocation"].ToString()));
    }

    foreach (DataRow dr in dt.Select("ParentID >" + 0))
    {
        MenuItem mnu = new MenuItem(dr["MenuName"].ToString(), 
                       dr["MenuID"].ToString(), 
                       "", dr["MenuLocation"].ToString());
        menuBar.FindItem(dr["ParentID"].ToString()).ChildItems.Add(mnu);
    }
    con.Close();
}

IV. Chú ý quan trọng
Menu control này sẽ hoạt động không tốt đối với một số trình duyệt khác nhau, cho nên để giải quyết vấn đề này, bạn thêm một file .browser trong thư mục App_browser của bạn
browser
Sau đó mở file safari.browser ra, xóa sạch code trong đó, và thêm đoạn code sau vào:

<browsers>
  <browser refID="safari1plus">
    <controlAdapters>
      <adapter controlType="System.Web.UI.WebControls.Menu" adapterType="" />
    </controlAdapters>
  </browser>
</browsers>

Save nó lại và chiêm ngưỡng thành quả nào.
Bạn nào không làm được thì có thể download mã nguồn bài viết dưới đây nhé!

Download Code

Tags:

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