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
  • 相关阅读:
    ExtJS小技巧
    Oracle 表的行数、表占用空间大小,列的非空行数、列占用空间大小 查询
    NPM 私服
    IDEA 不编译java以外的文件
    SQL 引号中的问号在PrepareStatement 中不被看作是占位符
    Chrome 浏览器自动填表呈现淡黄色解决
    批量删除Maven 仓库未下载成功.lastupdate 的文件
    Oracle 11g 监听很慢,由于监听日志文件太大引起的问题(Windows 下)
    Hibernate 自动更新表出错 建表或添加列,提示标识符无效
    Hibernate 自动更新表出错 More than one table found in namespace
  • 原文地址:https://www.cnblogs.com/Leo_wl/p/3466669.html
Copyright © 2011-2022 走看看