MVC4制作網(wǎng)站教程第四章 前臺欄目瀏覽4.5
三、欄目
3.4前臺欄目瀏覽
網(wǎng)站的前臺頁面,頂部要能顯示根欄目,點擊欄目名稱進入欄目中要子欄目導航,欄目頁中還必須有當前路徑。先做這三部分
1)、根欄目
打開【CategoryController】,添加[PartialRoot]Action
/// <summary> /// 根欄目 /// </summary> /// <returns></returns> public ActionResult PartialRoot() { return View(categoryRsy.Root()); }
點擊右鍵添加視圖模型類選Category,支架模板選List,勾上創(chuàng)建分部視圖,確定。
除頂部@model IEnumerable<Ninesky.Models.Category>外刪除其他代碼,自己手動寫代碼如下:
@model IEnumerable<Ninesky.Models.Category> @Html.ActionLink("網(wǎng)站首頁", "Index", "Home")@foreach (var item in Model) { @Html.ActionLink(item.Name, "Index", "Category", new { id = item.CategoryId }, null) }
2)、子欄目導航
在【CategoryController】中添加[PartialChildren(int id)]Action
/// <summary> /// 子欄目 /// </summary> /// <param name="id">欄目id</param> /// <returns></returns> public ActionResult PartialChildren(int id) { return View(categoryRsy.Children(id)); }
右鍵添加分部視圖
@model IEnumerable<Ninesky.Models.Category> <ul> @foreach (var item in Model) { <li>@Html.ActionLink(item.Name, "Index", "Category", new { id = item.CategoryId }, null)</li> } </ul>
3)、路徑
在【CategoryController】中添加[PartialPath(int id)]Action
/// <summary> /// 欄目路徑 /// </summary> /// <param name="id">當前欄目Id</param> /// <returns></returns> public ActionResult PartialPath(int id) { List<Category> _path = new List<Category>(); var _category = categoryRsy.Find(id); while (_category != null) { _path.Insert(0, _category); _category = categoryRsy.Find(_category.ParentId); } return View(_path); }
右鍵添加分部視圖
@model IEnumerable<Ninesky.Models.Category> 您現(xiàn)在的位置:@Html.ActionLink("網(wǎng)站首頁", "Index", "Home")@foreach (var item in Model) { @Html.Raw(">>") @Html.ActionLink(item.Name, "Index", "Category", new { id = item.CategoryId }, null) }
馬上可以看到效果了
打開Layout\_Layout.cshtml布局頁,在頂部導航位置<div class="nav"></div>中添加寫上@Html.Action("PartialRoot","Category")
打開http://localhost:52270/Category/ManageAdd,添加一下幾個欄目。
運行一下看看網(wǎng)站首頁
有效果了!
開始做Index索引頁
在【CategoryController】中添加[Index(int id)]Action
如果欄目Type=2則跳轉(zhuǎn)到Navigation,否則返回CategoryView視圖。
/// <summary> /// 索引 /// </summary> /// <param name="id">欄目id</param> /// <returns></returns> public ActionResult Index(int id) { var _category = categoryRsy.Find(id); if (_category == null) { Error _e = new Error { Title = "錯誤", Details = "指定的欄目不存在", Cause = "你訪問的欄目已經(jīng)刪除", Solution = Server.UrlEncode("<li>返回<a href='" + Url.Action("Index", "Home") + "'>網(wǎng)站首頁</a></li>") }; return RedirectToAction("Error", "Prompt", _e); } if (_category.Type == 2) return Redirect(_category.Navigation); return View(_category.CategoryView,_category); }
添加強類型視圖
@model Ninesky.Models.Category @{ ViewBag.Title = "欄目默認頁"; Layout = "~/Views/Layout/_Layout.cshtml"; } <div class="banner"> <img src="~/Skins/Default/Images/banner.jpg" /> </div> <div class="left"> <div class="children"> <dl> <dt>@Model.Name</dt> <dd>@Html.Action("PartialChildren", "Category", new { id = Model.CategoryId })</dd> </dl> </div> </div> <div class="content_cnt"> <div class="path">@Html.Action("PartialPath", "Category", new { id = Model.CategoryId })</div> </div>
這個就是欄目的默認頁面了。
復制一份Index.cshtml命名為IndexSingle.cshtml作為單頁欄目的視圖
再復制一份Index.cshtml命名為IndexAbout.cshtml作為關于我們欄目的專用視圖,并修改相應代碼
@model Ninesky.Models.Category @{ ViewBag.Title = "關于我們"; Layout = "~/Views/Layout/_Layout.cshtml"; } <div class="banner"> <img src="~/Skins/Default/Images/banner.jpg" /> </div> <div class="left"> <div class="children"> <dl> <dt>@Model.Name</dt> <dd>@Html.Action("PartialChildren", "Category", new { id = Model.CategoryId })</dd> </dl> </div> </div> <div class="content_cnt"> <div class="path">@Html.Action("PartialPath", "Category", new { id = Model.CategoryId })</div> <div class="singlepage"> <div class="title">@Model.Name About </div> <p> <b>NineSky</b>® 是洞庭夕照學習Mvc的一個項目。是想通過完成一個網(wǎng)站來不斷的督促自己、不斷的學習和實踐。最終希望可以寫出一個可簡潔、易用的網(wǎng)站。 </p> <p>目的:學習mvc4</p> <p>目標:簡單、易用、實用</p> </div> </div>
打開“關于我們”的資料頁面http://localhost:52270/Category/ManageDetails/6
修改欄目視圖
運行看下效果
以上就是本文的全部內(nèi)容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。
- ASP.NET MVC5網(wǎng)站開發(fā)之登錄、驗證和注銷管理員篇1(六)
- ASP.NET MVC5網(wǎng)站開發(fā)之展示層架構(五)
- ASP.NET MVC5網(wǎng)站開發(fā)管理列表、回復及刪除(十三)
- ASP.NET?MVC5網(wǎng)站開發(fā)咨詢管理的架構(十一)
- ASP.NET?MVC5網(wǎng)站開發(fā)顯示文章列表(九)
- ASP.NET MVC5網(wǎng)站開發(fā)添加文章(八)
- ASP.NET MVC5網(wǎng)站開發(fā)用戶修改資料和密碼(六)
- ASP.NET?MVC5網(wǎng)站開發(fā)用戶登錄、注銷(五)
- ASP.NET?MVC5?網(wǎng)站開發(fā)框架模型、數(shù)據(jù)存儲、業(yè)務邏輯(三)
- ASP.NET MVC5網(wǎng)站開發(fā)項目框架(二)
相關文章
國產(chǎn)化之Arm64?CPU+銀河麒麟系統(tǒng)安裝.NetCore的步驟詳解
這篇文章主要介紹了國產(chǎn)化之Arm64?CPU+銀河麒麟系統(tǒng)安裝.NetCore,這里就以ARM架構舉例,其它CPU平臺的安裝過程都一樣,要下載的包不同而已,感興趣的朋友跟隨小編一起看看吧2022-03-03asp.net中GridView數(shù)據(jù)鼠標移入顯示提示信息
本篇文章給大家介紹在asp.net中gridview數(shù)據(jù)鼠標移入顯示提示信息,需要的朋友可以參考下本文2015-09-09asp.net(c#)有關 Session 操作的幾個誤區(qū)
asp.net(c#)有關 Session 操作的幾個誤區(qū)...2007-06-06Asp.net配合easyui實現(xiàn)返回json數(shù)據(jù)實例
這篇文章主要介紹了Asp.net配合easyui實現(xiàn)返回json數(shù)據(jù)的方法,實例分析了Asp.net配合easyui返回json數(shù)據(jù)時出現(xiàn)的問題及解決方法,非常具有實用價值的技巧,需要的朋友可以參考下2014-12-12.NET?實現(xiàn)啟動時重定向程序運行路徑及?Windows?服務運行模式部署的方法
這篇文章主要介紹了.NET?實現(xiàn)啟動時重定向程序運行路徑及?Windows?服務運行模式部署,本文給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2022-09-09asp.net使用LINQ to SQL連接數(shù)據(jù)庫及SQL操作語句用法分析
這篇文章主要介紹了asp.net使用LINQ to SQL連接數(shù)據(jù)庫及SQL操作語句用法,較為詳細的分析了LINQ操作sql語句的功能、使用方法與相關注意事項,需要的朋友可以參考下2016-05-05