[.NET] Hướng dẫn xây dựng menu động

 Các bước thực hiện

Bước 1: Tận dụng controller Home

- Tại controller Home tạo 1 action đặt tên là MenuPartial đồng thời từ MenuPartial tạo ra 1 PartialView.

- Trong action MenuPartial các bạn truy vấn trả về đối tượng Model là list các sản phẩm.

Bước 2: Các bạn sử dụng layout hiện có tìm đến phần nội dung Html Menu đã có sẵn của layout sau đó copy vào MenuPartialView. Tiến hành chỉnh sửa load menu bằng code động.

Bước 3: Tại HomeLayout, ẩn phần menu của template có sẵn, chèn vào Action menu vừa tạo với cú pháp

@html.Action("MenuPartial","Home")

Code trong HomeController

public ActionResult MenuPartial()

        {

            var listSp = db.SanPhams;

            return PartialView(listSp);

        }

Code trong MenuPartial

@using ShopBanHang.Models

@model IEnumerable<SanPham>

<div class=" h_menu4">

    <ul class="memenu skyblue">

        <li class="active grid"><a class="color8" href='@Url.Action("Index", "Home")'>Trang chủ</a></li>

        @foreach (var groupitem in Model.GroupBy(n => n.LoaiSanPham))

        {

            if (groupitem.Key != null)

            {

                <li>

                    <a class="color1" href="#">@groupitem.Key.TenLoai</a>

                    <div class="mepanel">

                        <div class="row">

                            <div class="col1">

                                <div class="h_nav">

                                    <ul>

                                        @foreach (var item in Model.GroupBy(n => n.NhaSanXuat))

                                        {

                                            if (item.Key != null)

                                            {

                                                <li><a href="products.html">@item.Key.TenNSX</a></li>

                                            }

                                        }

                                    </ul>

                                </div>

                           </div>             

                        </div>

                    </div>

                </li>

            }

        }

        <li><a class="color4" href="blog.html">Giới thiệu</a></li>

        <li><a class="color6" href="contact.html">Liên hệ</a></li>

    </ul>

</div>