ASP.NETMVC音樂(lè)商店-10.完成導(dǎo)航和站點(diǎn)的設(shè)計(jì)-創(chuàng)新互聯(lián)
MusicStore 項(xiàng)目的完整配套視頻！
成都創(chuàng)新互聯(lián)服務(wù)項(xiàng)目包括原平網(wǎng)站建設(shè)、原平網(wǎng)站制作、原平網(wǎng)頁(yè)制作以及原平網(wǎng)絡(luò)營(yíng)銷策劃等。多年來(lái)，我們專注于互聯(lián)網(wǎng)行業(yè)，利用自身積累的技術(shù)優(yōu)勢(shì)、行業(yè)經(jīng)驗(yàn)、深度合作伙伴關(guān)系等，向廣大中小型企業(yè)、政府機(jī)構(gòu)等提供互聯(lián)網(wǎng)行業(yè)的解決方案，原平網(wǎng)站推廣取得了明顯的社會(huì)效益與經(jīng)濟(jì)效益。目前，我們服務(wù)的客戶以成都為中心已經(jīng)輻射到原平省份的部分城市，未來(lái)相信會(huì)繼續(xù)擴(kuò)大服務(wù)區(qū)域并繼續(xù)獲得客戶的支持與信任！我們已經(jīng)完成了網(wǎng)站的大部分工作，但是，還有一些添加到站點(diǎn)的導(dǎo)航功能，主頁(yè)，以及商店的瀏覽頁(yè)面。
創(chuàng)建購(gòu)物車匯總部分視圖
我們希望在整個(gè)站點(diǎn)的頁(yè)面上都可以看到購(gòu)物車中的數(shù)量。
通過(guò)創(chuàng)建一個(gè)部分視圖，然后添加到網(wǎng)站的布局中就可以容易地完成，
前面看到，在 ShoppingCart 控制器中包含了一個(gè)名為 CartSummary 的 Action 方法返回分部視圖。
//
// GET: /ShoppingCart/CartSummary
[ChildActionOnly]
public ActionResult CartSummary()
{
var cart = ShoppingCart.GetCart(this.HttpContext);
ViewData["CartCount"] = cart.GetCount();
return PartialView("CartSummary");
}在這個(gè) Action 方法上點(diǎn)擊鼠標(biāo)右鍵，或者在 Views/ShoppingCart 文件夾夾上點(diǎn)擊鼠標(biāo)右鍵，選擇創(chuàng)建新視圖，命名為 CartSummary ，注意選中創(chuàng)建分部視圖的復(fù)選框。
CartSummary 分部視圖非常簡(jiǎn)單，僅僅鏈接到 ShoppingCart 的 Index ，顯示當(dāng)前購(gòu)物車中的數(shù)量，完整的代碼如下：
@Html.ActionLink("Cart (" + ViewData["CartCount"] + ")", "Index", "ShoppingCart", new { id = "cart-status" })在網(wǎng)站的任何頁(yè)面中都可以包含分部視圖，使用 Html.RenderAction 方法就可以。RenderAction 需要指定 Action 的名字，這里是 CartSummary，以及控制器的名字，這里是 ShoppingCart。
@Html.RenderAction("CartSummary", "ShoppingCart")在將這個(gè)分部視圖加入到布局之前，我們還要?jiǎng)?chuàng)建一個(gè)流派的菜單，這樣我們可以一次更新完站點(diǎn)的 Site.master。
創(chuàng)建流派菜單的分部視圖
通過(guò)在頁(yè)面上增加一個(gè)流派的菜單，可以是用戶在站點(diǎn)內(nèi)導(dǎo)航的時(shí)候更加容易。
我們可以使用類似前面的步驟來(lái)創(chuàng)建流派菜單的分部視圖，把兩個(gè)分部視圖一起添加到站點(diǎn)的布局中，首先，在 StoreController 中增加 GenreMenu 的控制器方法。
//
// GET: /Store/GenreMenu
[ChildActionOnly]
public ActionResult GenreMenu()
{
var genres = storeDB.Genres.ToList();
return PartialView(genres);
}這個(gè)方法返回流派的列表，在后面創(chuàng)建的視圖中用來(lái)生成菜單。
注意：在 Action 方法上我們?cè)黾恿?[ChildActionOnly] 標(biāo)注，這意味著我們僅僅可以通過(guò)分部視圖來(lái)訪問(wèn)這個(gè) Action，這可以防止通過(guò)瀏覽 /Store/GenreMenu 來(lái)訪問(wèn)，對(duì)于分部視圖來(lái)說(shuō)，這不是必須的，但是一個(gè)很好的實(shí)踐，因?yàn)槲覀兿Ｍ覀兊目刂破鞣椒ū晃覀兿Ｍ姆绞绞褂?，這里我們還返回了一個(gè)分部視圖而不是一個(gè)普通的視圖，這用來(lái)告訴視圖引擎，不需要對(duì)這個(gè)視圖使用布局，它將會(huì)被包含在其他的視圖中。
創(chuàng)建分部視圖，使用強(qiáng)類型的 Genre 作為模型類型。使用 List 模板。
更新生成的視圖，顯示一個(gè)列表。
@model IEnumerable<MvcMusicStore.Models.Genre>
<ul id="categories">
@foreach (var genre in Model)
{ <li>@Html.ActionLink(genre.Name,
"Browse", "Store",
new { Genre = genre.Name }, null)
</li>
}
</ul>更新站點(diǎn)的布局顯示我們的分部視圖
現(xiàn)在，可以在布局中加入分部視圖了，在 /Views/Shared/_Layout.cshtml 中通過(guò)調(diào)用 Html.RenaderAction() 方法可以調(diào)用分部視圖，把兩個(gè)分部視圖都加入到布局中，如下所示：
<!DOCTYPE html>
<html>
<head>
<title>@ViewBag.Title</title>
<link href="@Url.Content("~/Content/Site.css")" rel="stylesheet"
type="text/css" />
<script src="@Url.Content("~/Scripts/jquery-1.4.4.min.js")"
type="text/javascript"></script>
</head>
<body>
<div id="header">
<h1>
<a href="/">ASP.NET MVC MUSIC STORE</a></h1>
<ul id="navlist">
<li class="first"><a href="@Url.Content("~")" id="current">Home</a></li>
<li><a href="@Url.Content("~/Store/")">Store</a></li>
<li>
@{Html.RenderAction("CartSummary", "ShoppingCart");}
</li>
<li><a href="@Url.Content("~/StoreManager/")">Admin</a></li>
</ul>
</div>
@{Html.RenderAction("GenreMenu", "Store");}
<div id="main">
@RenderBody()
</div>
<div id="footer">
built with <a >ASP.NET MVC 3</a>
</div>
</body>
</html>更新 Store 的 Browse 頁(yè)面
商店的瀏覽頁(yè)面現(xiàn)在看來(lái)還不太好，我們更新這個(gè)頁(yè)面在一個(gè)更好地布局中顯示專輯，如下更新我們的視圖。
@model MvcMusicStore.Models.Genre
@{ ViewBag.Title = "Browse Albums"; }
<div class="genre">
<h3>
<em>@Model.Name</em> Albums</h3>
<ul id="album-list">
@foreach (var album in Model.Albums)
{ <li><a href="@Url.Action("Details", new { id = album.AlbumId })">
<img alt="@album.Title" src="@album.AlbumArtUrl" />
<span>@album.Title</span> </a></li> }
</ul>
</div>這里，我們將使用 Url.Action 來(lái)代替 Html.ActionLink ，以便顯示格式化信息，包括藝術(shù)家的插畫。
注意：我們顯示專輯的封面，這些信息保存在數(shù)據(jù)中，可以通過(guò) StoreManager 進(jìn)行編輯，也歡迎你加入你的插圖。
現(xiàn)在，當(dāng)我們?yōu)g覽流派的時(shí)候，我們將會(huì)看到帶有封面的專輯顯示在一個(gè)網(wǎng)格中。
更新主頁(yè)來(lái)顯示暢銷專輯
我們希望在首頁(yè)上增加暢銷專輯來(lái)增進(jìn)銷售，我們?cè)?HomeController 中增加一下內(nèi)容來(lái)實(shí)現(xiàn)，然后增加一些額外的圖片來(lái)變得更好。
首先，在我們的專輯中增加一個(gè)導(dǎo)航屬性，以便與 EF 知道關(guān)聯(lián)的的信息。專輯中最后的一行就是新增加的。
public virtual Genre Genre { get; set; }
public virtual Artist Artist { get; set; }
public virtual List<OrderDetail> OrderDetails { get; set; }注意：這里使用了泛型的集合，需要在代碼的前面使用 using 來(lái)引用 System.Collections.Generic 命名空間。
首先，我們將要增加 storeDB 的字段和引用 MusicStore.Models 命名空間，類似于其他的控制器。
然后，我們?cè)?HomeController 中增加下面的方法，來(lái)查詢數(shù)據(jù)庫(kù)根據(jù) OrderDetails 找到暢銷的唱片。
private List<Album> GetTopSellingAlbums(int count)
{
// Group the order details by album and return
// the albums with the highest count
return storeDB.Albums
.OrderByDescending(a => a.OrderDetails.Count())
.Take(count)
.ToList();
}這是私有方法，因?yàn)槲覀儾幌Ｍ苯涌梢栽L問(wèn)到，這里為了簡(jiǎn)單將它寫在了 HomeController 中，實(shí)際開(kāi)發(fā)的時(shí)候，可能需要移到后臺(tái)的邏輯服務(wù)中。
這里，我們更新 Index 來(lái)訪問(wèn)前面定義的方法，查詢銷售前 5 名的專輯，然后將他們傳遞到視圖中。
public ActionResult Index()
{
// Get most popular albums
var albums = GetTopSellingAlbums(5);
return View(albums);
}完整的代碼如下：
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using MvcMusicStore.Models;
namespace MvcMusicStore.Controllers
{
public class HomeController : Controller
{
private Models.MusicStoreEntities storeDB = new Models.MusicStoreEntities();
//
// GET: /Home/
public ActionResult Index()
{
// Get most popular albums
var albums = GetTopSellingAlbums(5);
return View(albums);
}
private List<Album> GetTopSellingAlbums(int count)
{
// Group the order details by album and return
// the albums with the highest count
return storeDB.Albums
.OrderByDescending(a => a.OrderDetails.Count())
.Take(count)
.ToList();
}
}
}最后，我們需要更新我們的 Home 控制器的 Index 視圖，訪問(wèn)模型在后面加入專輯的列表，借助這個(gè)時(shí)機(jī)，我們還要增加一個(gè)標(biāo)頭和一個(gè)促銷的節(jié)。
@model List<MvcMusicStore.Models.Album>
@{
ViewBag.Title = "ASP.NET MVC Music Store";
}
<div id="promotion">
</div>
<h3>
<em>Fresh</em> off the grill</h3>
<ul id="album-list">
@foreach (var album in Model)
{ <li><a href="@Url.Action("Details","Store",
new { id = album.AlbumId })">
<img alt="@album.Title" src="@album.AlbumArtUrl" />
<span>@album.Title</span> </a></li>
}
</ul>現(xiàn)在，當(dāng)運(yùn)行程序的時(shí)候，我們將會(huì)看到更新后的主頁(yè)，帶有暢銷的專輯和我們的促銷信息。
網(wǎng)站題目：ASP.NETMVC音樂(lè)商店-10.完成導(dǎo)航和站點(diǎn)的設(shè)計(jì)-創(chuàng)新互聯(lián)
文章分享：http://www.rwnh.cn/article28/ceiejp.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站排名、虛擬主機(jī)、網(wǎng)站改版、企業(yè)建站、商城網(wǎng)站、網(wǎng)站建設(shè)
聲明：本網(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í)需注明來(lái)源： 創(chuàng)新互聯(lián)
猜你還喜歡下面的內(nèi)容
- for循環(huán)如何在php怎么中使用-創(chuàng)新互聯(lián)
- 云服務(wù)器對(duì)企業(yè)的作用是什么意思
- MySQL中出現(xiàn)復(fù)制1594錯(cuò)誤怎么辦-創(chuàng)新互聯(lián)
- kill指的是什么意思-創(chuàng)新互聯(lián)
- AIX6.1安裝SSH-創(chuàng)新互聯(lián)
- 怎么運(yùn)用反射實(shí)現(xiàn)ejb動(dòng)態(tài)委派-創(chuàng)新互聯(lián)
- 怎么在Python3項(xiàng)目中使用Supervisor監(jiān)控進(jìn)程-創(chuàng)新互聯(lián)
- 怎樣做好搜索引擎優(yōu)化?從哪些方面入手？ 2022-05-01
- 為網(wǎng)站圖片進(jìn)行搜索引擎優(yōu)化的研究 2022-07-07
- 為搜索引擎優(yōu)化必備的方法之一：怎么做偽原創(chuàng)文章 2022-06-27
- 如何突破搜索引擎優(yōu)化瓶頸 2022-09-27
- 重復(fù)內(nèi)容如何影響seo搜索引擎優(yōu)化？ 2022-07-18
- 濟(jì)寧網(wǎng)站推廣網(wǎng)站前期優(yōu)化定位是搜索引擎優(yōu)化的重要命根子 2023-01-20
- 優(yōu)化酒店的搜索引擎優(yōu)化，提高私人流量。 2014-02-07
- 搜索引擎優(yōu)化之內(nèi)鏈建設(shè)目的 2023-04-10
- 搜索引擎優(yōu)化：如何讓搜索引擎喜歡你的站？ 2016-01-30
- 正視搜索引擎優(yōu)化的發(fā)展與出路 2022-07-14
- 從另一面說(shuō)網(wǎng)站搜索引擎優(yōu)化 2016-08-03
- 動(dòng)態(tài)頁(yè)面會(huì)對(duì)網(wǎng)站搜索引擎優(yōu)化產(chǎn)生什么影響？ 2021-09-25