Home »

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

3 thg 9, 2013

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

II. Create Database Tables
Bạn cần thiết kế một bảng để lưu trữ 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:
?
1
2
3
4
5
6
7
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:
?
1
2
3
4
5
6
7
8
9
10
<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
?
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
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:
?
1
2
3
4
5
6
7
<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.
Tags:

Comments[ 0 ]


Đăng nhận xét