如何使用MVC4制作前臺(tái)欄目瀏覽,相信很多沒有經(jīng)驗(yàn)的人對(duì)此束手無策,為此本文總結(jié)了問題出現(xiàn)的原因和解決方法,通過這篇文章希望你能解決這個(gè)問題。
專注于為中小企業(yè)提供網(wǎng)站制作、成都網(wǎng)站設(shè)計(jì)服務(wù),電腦端+手機(jī)端+微信端的三站合一,更高效的管理,為中小企業(yè)天壇街道免費(fèi)做網(wǎng)站提供優(yōu)質(zhì)的服務(wù)。我們立足成都,凝聚了一批互聯(lián)網(wǎng)行業(yè)人才,有力地推動(dòng)了1000+企業(yè)的穩(wěn)健成長,幫助中小企業(yè)通過網(wǎng)站建設(shè)實(shí)現(xiàn)規(guī)模擴(kuò)充和轉(zhuǎn)變。一 、欄目
前臺(tái)欄目瀏覽
網(wǎng)站的前臺(tái)頁面,頂部要能顯示根欄目,點(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>外刪除其他代碼,自己手動(dòng)寫代碼如下:
@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è)可簡(jiǎn)潔、易用的網(wǎng)站。 </p> <p>目的:學(xué)習(xí)mvc4</p> <p>目標(biāo):簡(jiǎn)單、易用、實(shí)用</p> </div> </div>
打開“關(guān)于我們”的資料頁面http://localhost:52270/Category/ManageDetails/6
修改欄目視圖
運(yùn)行看下效果
看完上述內(nèi)容,你們掌握如何使用MVC4制作前臺(tái)欄目瀏覽的方法了嗎?如果還想學(xué)到更多技能或想了解更多相關(guān)內(nèi)容,歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道,感謝各位的閱讀!
網(wǎng)站題目:如何使用MVC4制作前臺(tái)欄目瀏覽-創(chuàng)新互聯(lián)
URL分享:http://muchs.cn/article26/spjjg.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供做網(wǎng)站、網(wǎng)站設(shè)計(jì)、服務(wù)器托管、手機(jī)網(wǎng)站建設(shè)、網(wǎng)站收錄、企業(yè)網(wǎng)站制作
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如需處理請(qǐng)聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來源: 創(chuàng)新互聯(lián)
猜你還喜歡下面的內(nèi)容