Tạo menu đa cấp – Multi level menu trong ASP.Net

5 thg 9, 2013

Chào mọi người, có rất nhiều bạn đọc bảo mình viết bài hướng dẫn về cách tạo menu đa cấp trong ASP.Net, hôm nay mình cũng chia sẻ cách tạo menu đơn giản trong ASP.Net, cách làm sau đây phù hợp cho cách bạn mới học ASP.Net…

Chào mọi người, có rất nhiều bạn đọc bảo mình viết bài hướng dẫn về cách tạo menu đa cấp trong ASP.Net, hôm nay mình cũng chia sẻ cách tạo menu đơn giản trong ASP.Net, cách làm sau đây phù hợp cho cách bạn mới học ASP.Net…

Nói đến Lập trình WEB ASP.Net thì mình không chuyên nên cách làm menu này được đánh giá là củ chuối nhất trong các cách tuy nhiên bù lại rất dể hiểu, dễ làm và có thể giúp cách bạn sinh viên hoàn thành đồ án của mình.

Kiểu menu này là Menu Glossy Accordion đây là một trong những dạng menu website đẹp vào đơn giản nhất, bạn có thể xem demo tại http://www.dynamicdrive.com/dynamicindex17/ddaccordionmenu-glossy.htm. Ở đây có cách sử dụng và hướng dẫn chèn vào trong HTML.

Mô tả dữ liệu tạo menu trong ASP.Net

Sau khi đã down về bạn để đó, mình sẽ giới thiệu cho các bạn dữ liệu mà mình sử dụng để nắm được demo của mình trong bài hôm nay. Mình có một bảng về thể loại sản phẩm và bảng loại sản phẩm giống như demo các bài trước đây.

Mô tả CSDL tạo menu trong ASP.Net

Cách tạo menu trong ASP.Net

Bạn copy thư mục down về vào thư mục gốc của website bạn, tiếp đến tạo một trang mới trong dự án web ASP.Net của bạn, vào trong thẻ head copy đoạn code sau vào.

<!--

<script type="text/javascript" src="GlossyMenu/jquery-1.2.6.pack.js"></script>

<script type="text/javascript" src="GlossyMenu/ddaccordion.js"></script>

<script type="text/javascript">

ddaccordion.init({

headerclass: "submenuheader", //Shared CSS class name of headers group

contentclass: "submenu", //Shared CSS class name of contents group

revealtype: "click", //Reveal content when user clicks or onmouseover the header? Valid value: "click" or "mouseover

mouseoverdelay: 200, //if revealtype="mouseover", set delay in milliseconds before header expands onMouseover

collapseprev: true, //Collapse previous content (so only one open at any time)? true/false 

defaultexpanded: [], //index of content(s) open by default [index1, index2, etc] [] denotes no content

onemustopen: false, //Specify whether at least one header should be open always (so never all headers closed)

animatedefault: false, //Should contents open by default be animated into view?

persiststate: true, //persist state of opened contents within browser session?

toggleclass: ["", ""], //Two CSS classes to be applied to the header when it's collapsed and expanded, respectively ["class1", "class2"]

togglehtml: ["suffix"], //Additional HTML added to the header when it's collapsed and expanded, respectively  ["position", "html1", "html2"] (see docs)

animatespeed: "fast", //speed of animation: integer in milliseconds (ie: 200), or keywords "fast", "normal", or "slow"

oninit:function(headers, expandedindices){ //custom code to run when headers have initalized

//do nothing

},

onopenclose:function(header, index, state, isuseractivated){ //custom code to run whenever a header is opened or closed

//do nothing

}

})

function MM_jumpMenu(targ,selObj,restore){ //v3.0

eval(targ+".location='"+selObj.options[selObj.selectedIndex].value+"'");

if (restore) selObj.selectedIndex=0;

}

</script>

<style type="text/css">

.glossymenu

{

font-family: "Times New Roman", Times, serif;

padding: 0;

width: 166px; /*width of menu*/

border: 1px solid #9A9A9A;

border-bottom-width: 0;

margin-top: 5px;

margin-right: 0;

margin-bottom: 5px;

margin-left: 0;

}

.controlRight {

width: 188px;

}

.glossymenu a.menuitem{ background: black url(GlossyMenu/glossyback.gif) repeat-x bottom left;

font: bold 14px "Lucida Grande", "Trebuchet MS", Verdana, Helvetica, sans-serif;

font-family: "Times New Roman", Times, serif;

color: white; display: block; 

position: relative; /*To help in the anchoring of the ".statusicon" icon image*/

width: auto; padding: 4px 0; padding-left: 10px; text-decoration: none;}

.glossymenu a.menuitem:visited, .glossymenu .menuitem:active{ color: white; }

.glossymenu a.menuitem .statusicon{ /*CSS for icon image that gets dynamically added to headers*/

position: absolute; top: 5px; right: 5px; border: none; }

.glossymenu a.menuitem:hover{ background-image: url(GlossyMenu/glossyback2.gif); }

.glossymenu div.submenu{ /*DIV that contains each sub menu*/ 

background: white;}

.glossymenu div.submenu ul{ /*UL of each sub menu*/

list-style-type: none; margin: 0; padding: 0; }

.glossymenu div.submenu ul li{ border-bottom: 1px solid blue; }

.glossymenu div.submenu ul li a{ display: block;

font: normal 13px "Lucida Grande", "Trebuchet MS", Verdana, Helvetica, sans-serif;

color: black; text-decoration: none; padding: 2px 0; padding-left: 10px; }

.glossymenu div.submenu ul li a:hover{ background: #DFDCCB; colorz: white; }

#cuon

{

width: 200px;

}

.style1

{

height: 21px;

}

</style>

-->

Bạn chú ý lại đường dẫn của các file sao cho hợp lý và tiến hành bước tiếp theo. Đến cho nào trong trang bạn muốn hiển thị menu bạn copy phần code này vào trong phần source:

<!--

<div class="glossymenu">

<% 

DataProvider mnData = new DataProvider();

string sqlCL = "select * from Categories Where Visible = 1";

foreach (System.Data.DataRow r in mnData.get(sqlCL).Tables[0].Rows)

{

Response.Write("<a class='menuitem submenuheader' href=# >"+r["CatName"].ToString()+"</a>");

Response.Write("<div class='submenu'>");

Response.Write("<ul>");

int idcl = int.Parse(r["CatID"].ToString());

string sqlloai = "select * from SortProduct where CatID = '" + idcl + "' and Visible = 1";

foreach (System.Data.DataRow rl in mnData.get(sqlloai).Tables[0].Rows)

{

int idlloai = int.Parse(rl["SorID"].ToString());

Response.Write("<li><a href= SanPhamTheoLoai.aspx?SorID=" + idlloai   + "&CatID=" + idcl +  ">"+rl["SorName"].ToString()+"</a></li>");

}

Response.Write("</ul>");

Response.Write("<img src="+"images/iconmenu.png"+" style='margin: 10px 5px' />");

Response.Write("</div>");

}

%>

</div> 

-->

Giải thích:

<% %>: Bên trong thẻ này có thể chèn các đoạn mã của ASP.Net
DataProvider mnData: Khai báo một đối tượng mnData thuộc lớp DataProvider trong phần kết nối CSDL trong ASP.Net mình đã có đề cập
Ở đây mình cho hai vòng foreach 1 lấy ID chủng loại sản phẩm, 2 lấy ID Loại Sản phẩm theo chủng loại lấy được sau đó xuất ra tên.
Bạn cần chú ý các thành phần div, ul, li, id, class phải đúng cấu trúc giống như là đoạn HTML đã cung cấp.

Đên đây coi như mọi việc đã gần hoàn chỉnh, bây giờ bạn nhập dữ liệu mẫu để test menu của ta có hoạt động hay không.

Dữ liệu mẫu cho menu trong ASP.Net

Và kết quả ta thu được ngoài giao diện.

Menu đa cấp trong ASP.Net

Kết luận: Cách này được xem là không hay tuy nhiên với một menu đa cấp như thế này bạn có thể dùng cho các đồ án ở lớp… Còn rất nhiều cách khác để làm điều này, mình muốn giới thiêu với bạn dùng TreeView trong ASP.Net, bạn download file hướng dẫn làm menu bằng TreeView khá là chi tiết bằng file MS Word, Chúc mọi người thành công!