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

  • 相关阅读:
    怎样从基本原理解释复制型共享账本的价值
    BZOJ3223:文艺平衡树——超详细题解
    BZOJ3223:文艺平衡树——超详细题解
    BZOJ3223:文艺平衡树——超详细题解
    BZOJ3223:文艺平衡树——超详细题解
    my stackoverflow
    my stackoverflow
    my stackoverflow
    my stackoverflow
    STM32 Flash 永久用户数据空间
  • 原文地址:https://www.cnblogs.com/quietwalk/p/2098180.html
Copyright © 2020-2023  润新知