9.3.15 站点布局设计及导航
这里已经完成了网站的大部分工作，但是，还有一些添加到站点的导航功能、主页，以及商店的浏览页面。
1.创建购物车汇总部分视图
如果希望在整个站点的页面上都可以看到购物车中的数量，可通过创建一个部分视图，然后添加到网站的布局中，就可以容易地完成。
在ShoppingCart控制器中已经设计了一个名为CartSummary的Action方法返回分部视图。代码如下：
在这个Action方法上单击鼠标右键，或者在Views/ShoppingCart文件夹上单击鼠标右键，选择创建新视图，命名为CartSummary，注意选中创建分部视图的复选框，如图9-70所示。
图9-70 创建CartSummury分部视图
打开cartsummary.cshtml文件，这个分部视图非常简单，仅仅链接到ShoppingCart的In-dex，显示当前购物车中的数量，完整的代码如下：
在网站的任何页面中都可以包含分部视图，使用Html.RenderAction方法就可以。Ren-derAction需要指定Action的名字，这里是CartSummary，以及控制器的名字，这里是Shop-pingCart，指定方法如下：
2.创建流派菜单的分部视图
通过在页面上增加一个流派的菜单，可以使用户在站点内导航的时候更加容易，如图9-71所示。
图9-71 增加流派显示菜单
使用类似前面的步骤来创建流派菜单的分部视图，首先，在StoreController中增加Gen-reMenu的控制器方法，并设置为childactionOnly，代码如下：
注意：在Action方法上增加了[ChildActionOnly]标注，这意味着仅仅可以通过分部视图来访问这个Action，这可以防止通过浏览/Store/GenreMenu来访问，对于分部视图来说，这不是必须的，但是一个很好的实践，控制器方法被以希望的方式使用，这里使用partial-view（）返回了一个分部视图而不是一个普通的视图，这用来告诉视图引擎，不需要对这个视图使用布局，它将会被包含在其他的视图中。
创建分部视图，使用强类型的Genre作为模型类型。使用List模板，如图9-72所示。
图9-72 创建显示流派菜单的分部视图
更新生成的视图，显示一个列表。代码如下：
3.更新站点的布局显示分部视图
现在，可以在布局中加入分部视图了，在/Views/Shared/_Layout.cshtml中通过调用Html.RenaderAction（）方法可以调用分部视图，把两个分部视图都加入到布局中，代码如下：
4.更新Store的Browse页面
更新store控制器的browse这个页面在一个更好地布局中显示专辑，代码如下：
这里，将使用Url.Action来代替Html.ActionLink，以便显示格式化信息，包括艺术家的插画。现在，当浏览流派的时候，将会看到带有封面的专辑显示在一个网格中。如图9-73所示。
注意：显示专辑的封面时，这些信息保存在数据中，可以通过StoreManager进行编辑，也欢迎加入插图。
图9-73 浏览流派内的专辑
5.更新主页来显示畅销专辑
希望在首页上增加畅销专辑来增进销售，这可以在HomeController中增加一个getToSel-lingAlbum action来实现，然后增加一些额外的图片来使页面变得更好看。
首先，在专辑类中增加一个导航属性orderDetails，代码如下：
然后在HomeController中增加下面的方法，来查询数据库根据OrderDetails找到畅销的唱片，代码如下：
然后，更新Index action来访问前面定义的方法，查询销售前5名的专辑，然后将它们传递到视图中。代码如下：
最后，更新Home控制器的Index视图，访问模型在后面加入专辑的列表，还要增加一个标头和一个促销的节，代码如下：
现在，当运行程序的时候，将会看到更新后的主页，带有畅销的专辑和促销信息，如图9-74所示。
图9-74 更新后的主页