ASP.NET MVC3书店--第十节 为网站导航与局部设计做最后的修改(转)

http://blog.sina.com.cn/s/blog_6ad539a90100rc4n.html

现在我们已经完成了这个网站中的主要功能。但我们还需要为整个网站的导航,首页与书籍列表页面做一点最终的修改。

10.1  创建购物摘要分部视图

    首先,我们想要在整个网站中显示用户购物车中的书籍数量,如图10-1所示。

ASP.NET <wbr>MVC3书店--第十节 <wbr>为网站导航与局部设计做最后的修改

图10-1 在整个网站中显示用户购物车中的书籍数量

    通过创建一个分部视图,然后在网站公用视图模板中使用这个分部视图,我们可以很容易地实现这个处理。

在购物车控制器(ShoppingCartController.cs)中使用一返回分部视图的CartSummary方法,代码如下所示。

//

// GET: /ShoppingCart/CartSummary

[ChildActionOnly]

public ActionResult CartSummary()

{

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

 

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

    return PartialView("CartSummary");

}

    鼠标右击Views文件夹下的ShoppingCart文件夹,点击“添加视图”菜单项,将视图命名为“CartSummary”,选取“创建分部视图”复选框,如图10-2所示。

ASP.NET <wbr>MVC3书店--第十节 <wbr>为网站导航与局部设计做最后的修改

图10-2 添加购物摘要视图

    购物摘要视图非常简单,只显示一个到购物车视图的链接,链接文字为购物车中书籍的数量。完整的购物摘要视图(CartSummary.cshtml)文件中的代码如代码清单10-1所示。

    代码清单10-1 完整的购物摘要视图文件中的代码

@Html.ActionLink("书籍数量:

(" + ViewData["CartCount"] + ")",

    "Index",

    "ShoppingCart",

    new { id = "cart-status" })

    通过使用Html.RenderAction帮助器方法,我们可以在网站的任何视图中都嵌入一个分部视图,包括整个网站的公用视图模板中。 Html.RenderAction帮助器方法中需要指定一个action方法的名字(本例中为CartSummary)与控制器的名字(本例中为 ShoppingCart),代码如下所示。

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

    在将这个分部视图添加到整个网站布局之前,我们还需要创建一个书籍种类菜单,以避免对整个网站的公用视图模板作出多次修改。

10.2  创建种类菜单分部视图

    通过追加一个如图10-3所示的种类菜单分部视图,然后在该视图菜单中列出我们网站中的所有书籍种类,可以让用户更加方便地在我们的网站中进行书籍的挑选操作。

    ASP.NET <wbr>MVC3书店--第十节 <wbr>为网站导航与局部设计做最后的修改

图10-3 种类菜单分部视图

    我们采用与创建购物摘要视图相同的步骤来创建种类菜单分部视图,然后我们在网站公用视图模板中统一添加这两个分部视图。首先,在Store控制器(StoreController.cs文件)中追加GenreMenu方法,代码如下所示。

//

// GET: /Store/GenreMenu

[ChildActionOnly]

public ActionResult GenreMenu()

{

    var genres = storeDB.Genres.ToList();

    return PartialView(genres);

}

       这个方法返回网站中所有书籍种类的列表,该列表将被显示在接下来我们将要创建的种类菜单分部视图中。

    请注意:我们对这个方法使用了[ChildActionOnly]属性,概述性表示这个方法只被使用在分部视图中。这个属性确保不被直接通过访问 “/Store/GenreMenu”的方式来调用。对于分部视图来说,该属性是可选的,但是当我们想确保某个方法只被分部视图所调用时,该属性是被建议 使用的。当我们想要返回一个分部视图,而不是一个主视图时,该属性可以通知视图引擎不应该对这个视图使用任何布局,因为它是被嵌套在其他视图中的。

在GenreMenu方法中点击鼠标右键,使用Genre(书籍种类)模型类创建一个强类型的,名为GenreMenu的分部视图,如图10-4所示。

ASP.NET <wbr>MVC3书店--第十节 <wbr>为网站导航与局部设计做最后的修改

图10-4 创建种类菜单分部视图

    修改种类菜单分部视图中的代码,将所有书籍种类显示在列表中。

@model IEnumerable<MvcBookStore.Models.Genre>

<ul id="categories">

    @foreach (var genre in Model)

    {

        <li>@Html.ActionLink(genre.Name,"Browse", "Store",

new { id = genre.GenreId }, null)

        </li>

    }

</ul>

10.3 修改公用视图模板,显示分部视图

    我们可以通过调用Html.RenderAction()方法来在公用视图模板中添加我们的分部视图。这里我们同时添加两个分部视图,并添加一些附加的元素来显示它们,完整的公用视图模板中的代码如代码清单10-2所示。

    代码清单10-2 完整的公用视图模板中的代码

<!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书店</a></h1>

        <ul id="navlist">

            <li class="first">

<a href="@Url.Content("~")" id="current">

首页

</a>

</li>

            <li>

<a href="@Url.Content("~/Store/")">

 

挑选书籍

</a>

</li>

            <li>

@{Html.RenderAction("CartSummary","ShoppingCart");}

</li>

            <li>

<a href="@Url.Content("~/StoreManager/")">

管理

</a>

</li>

        </ul>       

    </div>

<div>

@{Html.RenderAction("GenreMenu","Store");}

</div>

    <div id="main">

        @RenderBody()

    </div>

    <div id="footer">

        使用<a href="http://asp.net/mvc">ASP.NET MVC 3</a>开发

    </div>

</body>

</html>

    现在运行应用程序,我们可以在左边看见种类菜单导航条,在网页顶部看见购物摘要信息。

10.4 本教程总结

通过本教程,我们了解到使用ASP.NET MVC3,可以简化一个具有数据库访问功能、用户身份认证功能、AJAX功能等等的综合网站或Web应用程序的开发工作。希望通过本教程,你已经掌握了开发一个ASP.NET MVC网站或Web应用程序的基础工具。

posted @ 2011-07-05 12:13  quietwalk  阅读(783)  评论(0编辑  收藏  举报