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

最新推荐文章于 2022-08-22 00:43:12 发布

zhanghuangbin

最新推荐文章于 2022-08-22 00:43:12 发布

阅读量1.1k

点赞数

分类专栏： ASP.NET MVC WEB开发文章标签： asp.net mvc stylesheet div header action

WEB开发同时被 2 个专栏收录

27 篇文章 0 订阅

订阅专栏

ASP.NET MVC

25 篇文章 0 订阅

订阅专栏

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

10.1 创建购物摘要分部视图

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

图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所示。

图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所示的种类菜单分部视图，然后在该视图菜单中列出我们网站中的所有书籍种类，可以让用户更加方便地在我们的网站中进行书籍的挑选操作。

图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所示。

图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/")">

 

tml.RenderAction()ler.cs)挑选书籍

</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应用程序的基础工具。

zhanghuangbin

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
ASP.NET MVC3书店--第十节为网站导航与局部设计做最后的修改

现在我们已经完成了这个网站中的主要功能。但我们还需要为整个网站的导航，首页与书籍列表页面做一点最终的修改。10.1 创建购物摘要分部视图首先，我们想要在整个网站中显示用户购物车中的书籍数量，如图10-1所示。MVC3书店--第十节为网站导航与局部设计做最后的修改" height="386" alt="ASP.NET MVC3书店--第十节为网站导航与局部设计做最后的
复制链接

扫一扫