Lập trình C++ / C# — August 4, 2016 at 4:29 am

Xây dựng menu đa cấp với Entity Framework

by

Menu là thành phần không thể thiếu trong một website giúp người dùng dễ dàng tìm kiếm theo nhu cầu bản thân. Vì thế sau đây mình sẽ hướng dẫn các bạn cách tạo menu đa cấp sử dụng MVC và  Entity Framework, cùng theo dõi nhé.

Để xây dựng menu cho website có khá nhiều cách như là sử dụng site map… vì thế mình sẽ hướng dẫn mọi người xây dựng một menu đa cấp với dữ liệu được lưu trong cơ sở dữ liệu SQL.

Trong bài demo này mình sẽ sử dụng MVC 5 và Entity Framework 6.

Bắt đầu chúng ta có thể nhìn qua 1 bảng có cấu trúc quan hệ cha con:

database

Và chúng ta nhập một chút dữ liệu vào để có thể ra được cấu trúc cây:

du-lieu

Bây giờ chúng ta sẽ thực hiện tạo 1 project MVC và sử dụng EF.

Sau khi kéo database vào project , bảng sẽ có cấu trúc như sau:

EF

Bây giờ tiếp tục với Controller: Menu

// GET: /Menu/
public ActionResult Index()
{
using (var db = new EXAMPLEEntities())
{
var menu = from m in db.T_MENU
where m.PARENTID == null
select m;
return View(menu.ToList());
}
}
[ChildActionOnly]
public PartialViewResult ChildrenMenu(int ParentID)
{
using (var db = new EXAMPLEEntities())
{
var _menu = from menu in db.T_MENU
where menu.PARENTID == ParentID
select menu;
return PartialView(_menu.ToList());
}
}

Mình giải thích một chút về Controller này. Để tạo được cấu trúc cây tự động với dữ liệu từ DB, chúng ta sẽ sử dụng đệ quy. Ở Action Index, chúng ta chỉ lấy những menu nào có ParentID = null tức là những Menu cha. Ở PartialView ChildrenMenu, chúng ta sẽ load các menu con của Parent được truyền vào và thực hiện đệ quy Action này.

View : Index

@model System.Collections.Generic.List<MultiLevelMenu.Models.T_MENU>
@{
ViewBag.Title = "Index";
Layout = null;
}
<link href="../../Content/menu.css" rel="stylesheet" />
<h2>TranDev90.Com - Hướng dẫn tạo menu đa cấp với MVC & Entity Framework</h2>
<!-- sidebar menu start-->
<ul class="drop">
@foreach (var item in Model)
{
<li>
@Html.Raw("<a>")
<span class="active">@item.NAME</span>
@Html.Raw("</a>")
@Html.Action("ChildrenMenu", "Menu", new { ParentID = @item.ID })
</li>
}
</ul>
<!-- sidebar menu end-->

Partial View: ChildrenMenu

@model System.Collections.Generic.List<MultiLevelMenu.Models.T_MENU>
<ul class="drop">
@foreach (var item in Model)
{
<li>
@Html.Raw("<a>")
<span class="active">@item.NAME</span>
@Html.Raw("</a>")
@Html.Action("ChildrenMenu", "Menu", new { ParentID = @item.ID })
</li>
}
</ul>

Và đây là kết quả:

ket-qua

Để có thể thành menu hoàn chỉnh, chúng ta thêm 1 chút css vào để có thể có hiệu ứng hover để mở các menu con ra.

ul.drop{
list-style:none;
margin:0px;
padding:0px;
width:200px;
border:1px solid #f1f1f1;
}
ul.drop li,ul.drop li a{
border-bottom:1px solid #fbfbfb;
height:32px;
line-height:32px;
padding-left:5px;
position:relative;
display: block;
text-decoration: none;
color: darkblue;
}
ul.drop li:hover,ul.drop li a:hover{
display:block;
background:#fbfbfb;
color: red;
}
ul.drop li > ul.drop{
position:absolute;
top:0px;
left:200px;
display:none;
}
ul.drop li:hover > ul.drop{
display:block;
}

Và kết quả cuối cùng sẽ là:

withstyle

Thế là chúng ta có được một menu đa cấp rồi, các bạn có thể sử dụng các css để làm cho menu của mình đẹp hơn nữa. Chúc các bạn thành công!

Nguồn: trandev90

Leave a Comment

Your email address will not be published. Required fields are marked *