MVC4制作網(wǎng)站教程第四章 前臺欄目瀏覽4.5
三、欄目
3.4前臺欄目瀏覽
網(wǎng)站的前臺頁面,頂部要能顯示根欄目,點(diǎn)擊欄目名稱進(jìn)入欄目中要子欄目導(dǎo)航,欄目頁中還必須有當(dāng)前路徑。先做這三部分
1)、根欄目
打開【CategoryController】,添加[PartialRoot]Action
/// <summary> /// 根欄目 /// </summary> /// <returns></returns> public ActionResult PartialRoot() { return View(categoryRsy.Root()); }
點(diǎn)擊右鍵添加視圖模型類選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)、子欄目導(dǎo)航
在【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">當(dāng)前欄目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布局頁,在頂部導(dǎo)航位置<div class="nav"></div>中添加寫上@Html.Action("PartialRoot","Category")
打開http://localhost:52270/Category/ManageAdd,添加一下幾個(gè)欄目。
運(yùn)行一下看看網(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 = "錯(cuò)誤", 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); }
添加強(qiáng)類型視圖
@model Ninesky.Models.Category @{ ViewBag.Title = "欄目默認(rèn)頁"; 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>
這個(gè)就是欄目的默認(rèn)頁面了。
復(fù)制一份Index.cshtml命名為IndexSingle.cshtml作為單頁欄目的視圖
再復(fù)制一份Index.cshtml命名為IndexAbout.cshtml作為關(guān)于我們欄目的專用視圖,并修改相應(yīng)代碼
@model Ninesky.Models.Category @{ ViewBag.Title = "關(guān)于我們"; 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>® 是洞庭夕照學(xué)習(xí)Mvc的一個(gè)項(xiàng)目。是想通過完成一個(gè)網(wǎng)站來不斷的督促自己、不斷的學(xué)習(xí)和實(shí)踐。最終希望可以寫出一個(gè)可簡潔、易用的網(wǎng)站。 </p> <p>目的:學(xué)習(xí)mvc4</p> <p>目標(biāo):簡單、易用、實(shí)用</p> </div> </div>
打開“關(guān)于我們”的資料頁面http://localhost:52270/Category/ManageDetails/6
修改欄目視圖
運(yùn)行看下效果
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- ASP.NET MVC5網(wǎng)站開發(fā)之登錄、驗(yàn)證和注銷管理員篇1(六)
- ASP.NET MVC5網(wǎng)站開發(fā)之展示層架構(gòu)(五)
- ASP.NET MVC5網(wǎng)站開發(fā)管理列表、回復(fù)及刪除(十三)
- ASP.NET?MVC5網(wǎng)站開發(fā)咨詢管理的架構(gòu)(十一)
- 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è)務(wù)邏輯(三)
- ASP.NET MVC5網(wǎng)站開發(fā)項(xiàng)目框架(二)
相關(guān)文章
國產(chǎn)化之Arm64?CPU+銀河麒麟系統(tǒng)安裝.NetCore的步驟詳解
這篇文章主要介紹了國產(chǎn)化之Arm64?CPU+銀河麒麟系統(tǒng)安裝.NetCore,這里就以ARM架構(gòu)舉例,其它CPU平臺的安裝過程都一樣,要下載的包不同而已,感興趣的朋友跟隨小編一起看看吧2022-03-03asp.net中GridView數(shù)據(jù)鼠標(biāo)移入顯示提示信息
本篇文章給大家介紹在asp.net中g(shù)ridview數(shù)據(jù)鼠標(biāo)移入顯示提示信息,需要的朋友可以參考下本文2015-09-09asp.net(c#)有關(guān) Session 操作的幾個(gè)誤區(qū)
asp.net(c#)有關(guān) Session 操作的幾個(gè)誤區(qū)...2007-06-06Asp.net配合easyui實(shí)現(xiàn)返回json數(shù)據(jù)實(shí)例
這篇文章主要介紹了Asp.net配合easyui實(shí)現(xiàn)返回json數(shù)據(jù)的方法,實(shí)例分析了Asp.net配合easyui返回json數(shù)據(jù)時(shí)出現(xiàn)的問題及解決方法,非常具有實(shí)用價(jià)值的技巧,需要的朋友可以參考下2014-12-12.NET?實(shí)現(xiàn)啟動時(shí)重定向程序運(yùn)行路徑及?Windows?服務(wù)運(yùn)行模式部署的方法
這篇文章主要介紹了.NET?實(shí)現(xiàn)啟動時(shí)重定向程序運(yùn)行路徑及?Windows?服務(wù)運(yùn)行模式部署,本文給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2022-09-09asp.net使用LINQ to SQL連接數(shù)據(jù)庫及SQL操作語句用法分析
這篇文章主要介紹了asp.net使用LINQ to SQL連接數(shù)據(jù)庫及SQL操作語句用法,較為詳細(xì)的分析了LINQ操作sql語句的功能、使用方法與相關(guān)注意事項(xiàng),需要的朋友可以參考下2016-05-05