康廷數位購物網 5 - 建立共用分類選單

透過 ASP.NET MVC 支援的部份檢視建立購物網頁共用選單 ~~

購物網站需要一個通用的分類功能操作選單,讓使用者可以隨時開啟感興趣的分類項目,檢視相關商品,由於它必須能夠在網站的任何頁面呈現,因此必須將其作在版面配置頁面當中。於Controllers資料夾建立一個 NavController.cs 控制器檔案,並且建立其內容:

namespace Kangting.Controllers
{
    public class NavController : Controller
    {
        // GET: Nav
        public ActionResult Index()
        {
            return View();
        }
        [ChildActionOnly]
        public ActionResult CategoryMenu()
        {
            KangtingEntities db = new KangtingEntities();
            var categories = db.Categories.ToList();
            return PartialView(categories);
        }
    }
}
其中的動作方法CategoryMenu() 取得所有的分類項目清單並且將其回傳,並且記得在這個方法定義前標示為[ChildActionOnly]。產生對應的View檔案Nav/CategoryMenu.cshtml:
寄得勾選建立成部份檢視,按一下加入按鈕完成建立作業。接下來於CategoryMenu.cshtml檔案填入以下的內容:
@model IEnumerable<Kangting.Models.Category>
 
<ul id="categories">
    @foreach (var category in Model)
    {
        <li>
            @Html.ActionLink(category.Name, "Browse", "Home",
                new { categoryId = category.CategoryId }, null)
        </li>
    }
</ul>
其中透過foreach迴圈,將所有的分類項目內容列舉出來,獨立選單便已完成建立工作,每一個分類項目名稱形成一個至 Browse 動作的連結,並傳入分類碼。接下來就是將其嵌入版面配置頁,開啟Shared/ _Layout.cshtml,於 header 標籤區塊中插入以下的內容:
<body>
    <header>
        <div class="header_menu">  <img src="" /></div>
        <div class="header_menu">
@{Html.RenderAction("CategoryMenu", "Nav");}
</div>
    </header>
    <div>
        @RenderBody()
    </div>
</body>
其中的 @{Html.RenderAction("CategoryMenu", "Nav");} 將選單嵌入頁面中,如此一來,所有套用此版面配置頁的網頁,都將具有此分類選單,形成結果畫面如下 :
現在直接點選任何一個分類項目-例如電腦組件,會出現以下的商品清單畫面。