ASP.NET MVC 音乐商店 - 10. 完成导航和站点的设计



	 

	我们已经完成了网站的大部分工作，但是，还有一些添加到站点的导航功能，主页，以及商店的浏览页面。

	创建购物车汇总部分视图

	 

	我们希望在整个站点的页面上都可以看到购物车中的数量。

	 

	

	                       

	通过创建一个部分视图，然后添加到网站的布局中就可以容易地完成，

	前面看到，在ShoppingCart 控制器中包含了一个名为CartSummary 的Action 方法返回分部视图。

	//

	// GET: /ShoppingCart/CartSummary

	[ChildActionOnly]

	public ActionResult CartSummary()

	{

	    var cart = ShoppingCart.GetCart(this.HttpContext);

	    ViewData["CartCount"] = cart.GetCount();

	    return PartialView("CartSummary");

	}在这个 Action 方法上点击鼠标右键，或者在 Views/ShoppingCart 文件夹夹上点击鼠标右键，选择创建新视图，命名为 CartSummary ，注意选中创建分部视图的复选框。

	 

	 

	 

	CartSummary 分部视图非常简单，仅仅链接到ShoppingCart 的Index ，显示当前购物车中的数量，完整的代码如下：

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

	 

	在网站的任何页面中都可以包含分部视图，使用Html.RenderAction 方法就可以。RenderAction 需要指定Action 的名字，这里是CartSummary，以及控制器的名字，这里是ShoppingCart。

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

	 

	在将这个分部视图加入到布局之前，我们还要创建一个流派的菜单，这样我们可以一次更新完站点的Site.master。

	创建流派菜单的分部视图

	 

	通过在页面上增加一个流派的菜单，可以是用户在站点内导航的时候更加容易。

	 

	 

	我们可以使用类似前面的步骤来创建流派菜单的分部视图，把两个分部视图一起添加到站点的布局中，首先，在StoreController 中增加GenreMenu 的控制器方法。

	//

	// GET: /Store/GenreMenu

	[ChildActionOnly]

	public ActionResult GenreMenu()

	{

	    var genres = storeDB.Genres.ToList();

	    return PartialView(genres);

	}这个方法返回流派的列表，在后面创建的视图中用来生成菜单。

	 

	注意：在 Action 方法上我们增加了 [ChildActionOnly] 标注，这意味着我们仅仅可以通过分部视图来访问这个 Action，这可以防止通过浏览 /Store/GenreMenu 来访问，对于分部视图来说，这不是必须的，但是一个很好的实践，因为我们希望我们的控制器方法被我们希望的方式使用，这里我们还返回了一个分部视图而不是一个普通的视图，这用来告诉视图引擎，不需要对这个视图使用布局，它将会被包含在其他的视图中。

	创建分部视图，使用强类型的 Genre 作为模型类型。使用 List 模板。

	

	 

	更新生成的视图，显示一个列表。

	 

	 

	@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.RenaderAction() 方法可以调用分部视图，把两个分部视图都加入到布局中，如下所示：

	 

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

补充：Web开发 , ASP.Net ,