zoukankan      html  css  js  c++  java
  • NopCommerce——Web层中的布局页

    NopCommerce——Web层中的布局页

     

      援引上一篇文章关于nopcommerce源代码结构的翻译:“Nop.Web也是一个MVC Web应用程序项目,一个公有区域的展示层。它就是你实际能够运行的应用程序。它是应用程序的启动项目”。对于nopcommerce这样电子商务系统来说,Nop.Web是我们用户所看到的界面,比如商品列表。

    一 概况                                                                                                                                            

      nopcommerce其布局页文件分布在Nop.Web/Views/shared当中,主要涉及到五个布局文件:_Root.Head.cshtml、_Root.cshtml、_ColumnsOne.cshtml、_ColumnsTwo.cshtml、_ColumnsThree.cshtml。_ColumnsOne(Two/Three).cshtml三个布局页继承自_Root.cshtml、_Root.cshtml继承自_Root.Head.cshtml。

      所有继承_Root.Head.cshtml的页面将会使用相同的<head>标签内容,<body>体由它的子布局页来进一步细化。

      _Root.cshtml此页面替换掉_Root.Head.cshtml中@RenderBody(),大致结构如下图:

      Designer's Guide

      nopcommerc有三个不同的具体布局页:_ColumnsOne(Two/Three).cshtml,三者形式如下:

      1._ColumnsOne.cshtml

      <body>结构与_Root.cshtml一致。

      2._ColumnsTwo.cshtml

          <body>有两种:

      Designer's Guide

      Designer's Guide

      3._ColumnsThree.cshml Layout

      而到了这里,其结构就有三种:

      Designer's Guide

      Designer's Guide

      Designer's Guide

      

      也就是说_Root.Head主要管<head>中内容设置,以及全局CSS、JS文件引入;_Root.cshtml将网页主体内容<body>设计完成;_ColumnsOne(Two/Three).cshtml对_Root.cshtml变形处理。

    二 、细读                                                              

      1._Root.Head.cshtml

      顶层_Root.Head.cshtml内容如下:

    _Root.Head.cshtml

      在程序中,已经写了一些注释供大家参考。

      1.1. Html.AppendCssFileParts() 与AppendScriptParts()

       两个方法都是nop为HtmlHelper类定义拓展方法。见名知意,AppendCssFileParts附加CSS文件,AppendScriptParts附加脚本文件:

     

     AppendCssFileParts

     

      _cssParts为字典类型,根据传入的location确定键值,而字符串参数 part是CSS文件的路径。此方法最终就是将传入的CSS文件路径附加到_cssParts Dictionary当中。

    与此对应还有一个AddCssFileParts。

     AddCssFileParts

     

      注意到两者的差别仅仅是给Dictionary<ResourceLocation, List<string>>添加值顺序的不同,Append在Dictionary索引为0处添加,Add在队列末尾添加。因此产生的效果是:AppendCssFileParts()调用越靠后,在界面上显示反而越靠前。大家在_Root.Head.cshtml代码中可以看到 jquery-1.7.1.min.js的引用是在最后,但是通常我们是应该将其引用位置尽量考前。

      AppendScriptParts()与AppendCssFileParts()非常相似,这里就不再贴代码说明。

      1.2 @Html.Partial("LanguageAttributes")

      就是字符串:

     LanguageAttributes.cshtml

     

      ShouldUseRtlTheme()方法从当前用户的配置信息中读取其阅读方式是左到右,还是右到左,其实现依托<html>标签 的dir属性。

      1.3 @(Html.NopMetaDescription()

      NopMetaDescription方法中调用下面关键方法:

     GenerateMetaDescription

     

      DefaultMetaDescription是属性,从数据库中查取。

      1.4 @Html.Action("RssHeaderLink", "News")、@Html.Action("RssHeaderLink", "Blog")

      返回形如这样的字符串:<link href="xx" rel="alternate" ……>,用于RSS。

      1.5 @Html.Action("Favicon", "Common")

       返回的字符串形式这样: <link rel="shortcut icon" href="XX" />,href属性默认寻找Nop.Web根目录下名字为favicon.ico文件。

      2._Root.cshtml 

      _Root.cshtml内容如下:

     _Root.cshtml

      2.1  @Html.Action("JavaScriptDisabledWarning", "Common")

      返回一个PartialView:

      

     JavaScriptDisabledWarning

      其目的就是检测是否禁用JS,如果禁用就提示。

      2.2 @Html.Partial("_Notifications")

      弹出提示: 

     _Notifications

      通知内容通过TempData[nop.notifications.sucess]获取,注意到使用的是TempData,所以nop的通知是跨action的。

      2.3  @Html.Partial("Header")

      对应第一部分图中header,包含了头部链接、搜索框等内容。

      2.4  @Html.Action("Menu", "Common")

      菜单,对应第一部分图中的Menu,这个好理解。

      


      Widget还搞不清楚啥玩意,待研究。记得大牛说过,看框架先横向再纵向,所以……。

    2013-12-09

     
     
    分类: NopCommerce
  • 相关阅读:
    kafka学习(八)
    kafka学习(七)
    kafka学习(六)
    kafka学习(五)
    kafka学习(四)
    kafka学习(三)
    kafka学习(二)
    kafak学习(一)
    ssh远程登录
    pycharm
  • 原文地址:https://www.cnblogs.com/Leo_wl/p/3466669.html
Copyright © 2011-2022 走看看