MVC 音乐商店第 10 部分：导航和网站设计、结论的最后更新

MVC 音乐商店是介绍，并分步说明了如何使用 ASP.NET MVC 和 Visual Studio 为 web 开发教程应用程序。

MVC 音乐商店是一个轻量级的示例存储实现它卖音乐专辑在线，并实现基本的网站管理、用户登录，和购物车功能。

这个系列教程详细说明所有为构建 ASP.NET MVC 音乐商店示例应用程序采取的步骤。第 10 部分涵盖最后更新导航和网站设计、结论。

我们已经完成所有的主要功能为我们的网站，但我们仍然有一些功能将添加到网站的导航、主页上和商店浏览页面。

创建购物车摘要部分视图

我们想要公开整个站点的用户的购物车中的项目数。

我们可以轻松地实现这通过创建一个局部视图，添加到我们的 Site.master。

如先前所示，商城控制器包括 CartSummary 的操作方法，它返回一个局部视图：

//
// GET: /ShoppingCart/CartSummary
[ChildActionOnly]public ActionResult CartSummary()
{var cart = ShoppingCart.GetCart(this.HttpContext);ViewData["CartCount"] = cart.GetCount();return PartialView("CartSummary");
}

要创建 CartSummary 分部视图，视图/商城的文件夹上单击鼠标右键并选择添加视图。命名视图 CartSummary，并选中"创建一个局部视图"复选框，如下所示。

CartSummary 分部视图是很简单-它是只是一个链接到商城索引视图，显示购物车中的项的数目。CartSummary.cshtml 的完整代码，如下所示：

@Html.ActionLink("Cart
(" + ViewData["CartCount"] + ")","Index","ShoppingCart",new { id = "cart-status" })

我们可以在站点，包括网站主服务器，通过使用 Html.RenderAction 方法中的任何页面中包括一个局部视图。RenderAction 要求我们指定的操作名称 ("CartSummary") 和控制器名称 ("商城") 作为下面。

@Html.RenderAction("CartSummary",
"ShoppingCart")

在添加之前这到站点布局，我们还将创建流派菜单中，我们可以在所有我们的 Site.master 更新一次。

创建流派菜单局部视图

我们可以很容易为我们的用户，通过添加流派菜单，其中列出了在我们的商店中的各种流派浏览存储区。

我们将遵循同样的步骤还创建一个 GenreMenu 的局部视图，然后我们可以将他们两个添加到网站母版页。首先，添加 StoreController GenreMenu 控制器采取下列行动：

//
// GET: /Store/GenreMenu
[ChildActionOnly]public ActionResult GenreMenu()
{var genres = storeDB.Genres.ToList();return PartialView(genres);}

此操作返回流派，将由分部视图，我们下一步将创建显示的列表。

注意：我们已经添加的 [ChildActionOnly] 属性此控制器操作，指示我们只想要从一个局部视图使用此操作。此属性将会阻止从正在执行的浏览到 /Store/GenreMenu 控制器中的操作。这不是必需的局部视图，但它是一个好的做法，因为我们想要确保我们的控制器操作被用作我们打算。我们也正在返回 PartialView，而不是视图，让我们知道它不应该使用布局的这一观点，因为它被包括在其他视图中，视图引擎。

右键单击 GenreMenu 控制器中的操作，创建一个命名为 GenreMenu，强类型的使用体裁视图的数据类，如下所示的局部视图。

更新要显示的项目使用一个无序的列表，如下所示的 GenreMenu 分部视图的视图代码。

@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>

更新的站点布局，以显示我们部分的意见

我们可以将我们的局部视图添加到站点布局 (/ Views/Shared/_Layout.cshtml) 通过调用 Html.RenderAction()。我们将添加他们两个在以及一些额外的标记，以显示它们，如下所示：

<!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 href="http://asp.net/mvc">ASP.NET MVC 3</a></div>
</body>
</html>

现在当我们运行该应用程序，我们将看到在左侧的导航区域中的体裁和顶部的购物车摘要。

更新到商店浏览页面

商店浏览页面程序功能，但不会看起来很好。我们可以更新页后，可以在一个更好的布局中显示相册通过更新视图代码（在 /Views/Store/Browse.cshtml 中找到），如下所示：

@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，而不是 Html.ActionLink，这样我们可以应用特殊格式的链接，包括专辑插图。

注：我们显示为这些册页泛型的专辑封面。此信息存储在数据库中，通过存储管理器可编辑。你，欢迎添加您自己的插图。

现在当我们浏览到一个流派，我们将看到一个网格专辑插图中所示的专辑。

更新主页以显示顶部卖专辑

我们想要功能我们最畅销的专辑在主页上以增加销售。我们会给我们的 HomeController 来处理，并添加一些额外的图形，以及在某些更新。

首先，我们将向我们专辑类添加一个导航属性以便 EntityFramework 知道他们是相关联。我们专辑类的最后几行应现在看起来像这样：

public virtual Genre  Genre                  { get; set; }
public virtual Artist Artist                 { get; set; }
public virtual List<OrderDetail>OrderDetails { get; set; }}
}

注意：这将需要添加 using 语句，以使在 System.Collections.Generic 命名空间中。

首先，我们将添加一个 storeDB 字段和使用与我们其他控制器的语句 MvcMusicStore.Models。下一步，我们会将以下方法添加到 HomeController，查询我们的数据库，查找根据明细表的顶尖销售专辑。

private List<Album> GetTopSellingAlbums(int count){// Group the order details by album and return// the albums with the highest countreturn storeDB.Albums.OrderByDescending(a => a.OrderDetails.Count()).Take(count).ToList();
}

这是一个私有方法，因为我们不想使它可作为控制器中的操作。我们在为简单起见，HomeController 中包括它但你鼓励将您的业务逻辑移到适当的单独的服务类。

这地方，我们可以更新索引控制器中的操作查询销售的册页的顶部 5 并返回它们的视图。

public ActionResult Index()
{// Get most popular albumsvar albums = GetTopSellingAlbums(5);return View(albums);}

更新 HomeController 的完整代码是，如下所示。

using System.Collections.Generic;using System.Linq;using System.Web.Mvc;using MvcMusicStore.Models;namespace MvcMusicStore.Controllers
{public class HomeController : Controller{//// GET: /Home/MusicStoreEntities storeDB = new MusicStoreEntities();public ActionResult Index(){// Get most popular albumsvar 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 countreturn storeDB.Albums.OrderByDescending(a => a.OrderDetails.Count()).Take(count).ToList();}}
}

最后，我们需要更新我们首页索引视图，使它可以通过更新的模型类型和底部添加相册列表中显示出唱片的列表。我们将藉此机会，还向页中添加一个标题和促进科。

@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>

现在当我们运行该应用程序，我们就会看到我们最新的主页与顶尖销售专辑和我们的促销邮件。

结论

我们已经看到，ASP.NET MVC 中，可以轻松创建一个复杂的网站具有数据库访问，成员资格，AJAX，等得很快。希望本教程给你你需要开始构建您自己的 ASP.NET MVC 应用程序的工具！