关于NopCommerce-Web层中的布局页

以下内容大部分都不是原创，因为各位写手都是抄来抄去，所以我也不知道原创是谁，写这些只是为了方便自己的学习。

首先，Nop.Web也是一个MVC 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()，大致结构如下图：

　　

　　nopcommerc有三个不同的具体布局页：_ColumnsOne（Two/Three）.cshtml，三者形式如下：

　　1._ColumnsOne.cshtml

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

　　2._ColumnsTwo.cshtml

<body>有两种：

　　

　　

　　3._ColumnsThree.cshml
Layout

　　而到了这里，其结构就有三种：

　　

　　

　　

　　

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

二
、细读　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　

　　1._Root.Head.cshtml

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

@using Nop.Core

@using Nop.Core.Domain.Common;

@using Nop.Core.Infrastructure;

@{

    var displayMiniProfiler = CommonHelper.GetTrustLevel() >= AspNetHostingPermissionLevel.High &&

        EngineContext.Current.Resolve<Nop.Core.Domain.StoreInformationSettings>().DisplayMiniProfilerInPublicStore;


//resources

    Html.AppendCssFileParts("~/Content/jquery-ui-themes/smoothness/jquery-ui-1.10.3.custom.min.css");


Html.AppendScriptParts("~/Scripts/public.ajaxcart.js");

    Html.AppendScriptParts("~/Scripts/public.common.js");

    Html.AppendScriptParts("~/Scripts/jquery-migrate-1.2.1.min.js");

    Html.AppendScriptParts("~/Scripts/jquery-ui-1.10.3.custom.min.js");

    Html.AppendScriptParts("~/Scripts/jquery.validate.unobtrusive.min.js");

    Html.AppendScriptParts("~/Scripts/jquery.validate.min.js");

    Html.AppendScriptParts("~/Scripts/jquery-1.10.2.min.js");


//X-UA-Compatible tag

    var commonSettings = EngineContext.Current.Resolve<CommonSettings>();

    if (commonSettings.RenderXuaCompatible)

    {

        Html.AppendHeadCustomParts(string.Format("<meta http-equiv=\"X-UA-Compatible\" content=\"{0}\"/>", commonSettings.XuaCompatibleValue));

    }

}

<!DOCTYPE html>

<html @Html.Partial("LanguageAttributes")>

<head>

    <title>@Html.NopTitle(true)</title>

    <meta http-equiv="Content-type" content="text/html;charset=UTF-8" />

    <meta name="description" content="@(Html.NopMetaDescription())" />

    <meta name="keywords" content="@(Html.NopMetaKeywords())" />

    <meta name="generator" content="nopCommerce" />

    @Html.NopHeadCustom()

    @*This is used so that themes can inject content into the header*@

    @Html.Partial("Head")

    @Html.Widget("head_html_tag")

    @Html.NopCssFiles(this.Url, ResourceLocation.Head)

    @Html.NopScripts(this.Url, ResourceLocation.Head)

    @Html.NopCanonicalUrls()

    @Html.Action("RssHeaderLink", "News")

    @Html.Action("RssHeaderLink", "Blog")

    @*Favicon - upload favicon.ico file to the root directory*@

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

    @if (displayMiniProfiler)

    {

        @StackExchange.Profiling.MiniProfiler.RenderIncludes()

    }

    <!--Powered by nopCommerce - http://www.nopCommerce.com-->

    <!--Copyright (c) 2008-2013-->

</head>

<body>

    @RenderBody()

    @Html.NopCssFiles(this.Url, ResourceLocation.Foot)

    @Html.NopScripts(this.Url, ResourceLocation.Foot)

</body>

</html>

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

　　1.1. Html.AppendCssFileParts()
与AppendScriptParts（）

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

// private readonly Dictionary<ResourceLocation, List<string>>
_cssParts;

public virtual void AppendCssFileParts(ResourceLocation location,
string part)

{

if
(!_cssParts.ContainsKey(location))

_cssParts.Add(location, new List<string>());

if
(string.IsNullOrEmpty(part))

return;

_cssParts[location].Insert(0, part);

}

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

与此对应还有一个AddCssFileParts。

public virtual void AddCssFileParts(ResourceLocation location, string part)

{

if (!_cssParts.ContainsKey(location))

_cssParts.Add(location, new
List<string>());

if (string.IsNullOrEmpty(part))

return;

//注意这里

_cssParts[location].Add(part);
        }

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

　　就是字符串：

@if (this.ShouldUseRtlTheme())
 {
   
<text>dir="rtl"</text>
    //<text>dir="rtl" xml:lang="he"
lang="he"</text>
 }

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

　　1.3 @(Html.NopMetaDescription()

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

// private readonly List<string> _metaDescriptionParts;

public virtual string GenerateMetaDescription()

{

var metaDescription = string.Join(", ",
_metaDescriptionParts.AsEnumerable().Reverse().ToArray());

var result = !String.IsNullOrEmpty(metaDescription) ?
metaDescription : _seoSettings.DefaultMetaDescription;

return result;

}

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内容如下：

@{

    Layout = "~/Views/Shared/_Root.Head.cshtml";

}

@Html.Widget("body_start_html_tag_after")

@Html.Partial("_Notifications")

@Html.Action("AdminHeaderLinks", "Common")

<div class="master-wrapper-page">

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

    <div class="master-wrapper-content">

        <script type="text/javascript">

            AjaxCart.init(false, ‘.header-links .cart-qty‘, ‘.header-links .wishlist-qty‘, ‘#flyout-cart‘);

        </script>

        @Html.Partial("Header")

        <div class="header-menu">

            @Html.Action("TopMenu", "Catalog")

        </div>

        @Html.Widget("content_before")

        @*ajax loading window*@

        <div class="ajax-loading-block-window" style="display: none">

            <div class="loading-image">

            </div>

        </div>

        <div class="master-wrapper-main">

            @RenderBody()

        </div>

        @Html.Widget("content_after")

    </div>

    @Html.Action("Footer", "Common")

</div>

@Html.Action("EuCookieLaw", "Common")

@Html.Widget("body_end_html_tag_before")


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

　　返回一个PartialView:

　　@model
dynamic
 
@*此标签详情：http://www.w3school.com.cn/tags/tag_noscript.asp*@
 <noscript>
    
<div class="noscript">
        
<p>
          
<strong>JavaScript seem to be disabled in
your browser.</strong></p>
         
<p>
             
You must have JavaScript enabled in your
browser to utilize the functionality of
             
this
website.</p>
    
</div>
 </noscript>

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

　　2.2 @Html.Partial("_Notifications")

　　弹出提示：　

1 @{
2    
//success
messages

3     var
successMessages = new List<string>();
4     if
(TempData[string.Format("nop.notifications.{0}",
NotifyType.Success)] != null)

5     {

6        
successMessages.AddRange(TempData[string.Format("nop.notifications.{0}",
NotifyType.Success)] as
IList<string>);
7     }

8     if
(ViewData[string.Format("nop.notifications.{0}",
NotifyType.Success)] != null)

9     {
10        
successMessages.AddRange(ViewData[string.Format("nop.notifications.{0}",
NotifyType.Success)] as
IList<string>);
11     }
12

13
14    
//error
messages
15     var
errorMessages = new List<string>();
16     if
(TempData[string.Format("nop.notifications.{0}",
NotifyType.Error)] != null)
17     {
18        
errorMessages.AddRange(TempData[string.Format("nop.notifications.{0}",
NotifyType.Error)] as IList<string>);
19     }
20    
if (ViewData[string.Format("nop.notifications.{0}",
NotifyType.Error)] != null)
21     {
22        
errorMessages.AddRange(ViewData[string.Format("nop.notifications.{0}",
NotifyType.Error)] as IList<string>);
23     }
24
}
25
@*TODO use "displayPopupNotification" java-script function*@
26 @if (successMessages.Count > 0)
27 {
28     <script
type="text/javascript">
29
       
$(document).ready(function () {
30            
$("#dialog-notifications-success").dialog({ modal: true });
31
       
});
32    
</script>
33 }
34 @if (errorMessages.Count > 0)
35 {
36     <script
type="text/javascript">
37
       
$(document).ready(function () {
38            
$("#dialog-notifications-error").dialog({ modal: true });
39
       
});
40    
</script>
41 }
42 <div id="dialog-notifications-success"
title="@T("Common.Notification")" style="display:none;">
43     @foreach
(var message in successMessages)
44
    {
45        
<p>@message</p>
46
    }
47
</div>
48 <div
id="dialog-notifications-error" title="@T("Common.Error")" style="display:none;">
49     @foreach
(var message in errorMessages)
50
    {
51        
<p>@message</p>
52
    }
53
</div>
54 <div
id="bar-notification" class="bar-notification">
55     <img
src="@Url.Content("~/Content/Images/ico-close-notification-bar.png")" class="close" alt="Close" title="Close" />
56
</div>
57
@Html.Widget("notifications")

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

　　2.3  @Html.Partial("Header")

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

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

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

从上代码的地方开始就有点不知所云了，但是前面的那部分是很好理解的。

关于NopCommerce-Web层中的布局页,布布扣,bubuko.com

时间： 2024-10-21 01:31:54

关于NopCommerce-Web层中的布局页的相关文章

在WEB工程的web层中的编程技巧

本篇以看传智播客方立勋老师的<JDBC入门>之<实现客户关系管理案例>视频有感,从中提取方老师在设计管理系统的简单案例中对自己比较有用的部分,以便日后在开发过程中希望能有所帮助. 在这个视频中,该客户关系管理系统的界面由简单的“添加客户”和“查看客户”两个超链接构成.其中“查看客户”的功能涉及使用数据库来进行网页显示的分页效果,该功能的实现请看相关博客. 在“添加客户”的功能中,方老师很灵巧的将一个Servlet的doGet方法和doPost方法一起使用,这样减少了类的定义,优化了

在ABP的Web层中实现复杂请求跨域访问

在最近的项目中,后端使用ABP,前端采用React,前后端完全分离.其中大部分接口都通过WebApi层调用,项目中未使用Session.但最后在做一个留言的验证码时,使用了Session验证的方式,所以将验证码请求与校验功能放在了Web层.由于测试阶段前后端不同域,涉及到跨域请求的问题.跨域问题可以通过代理等手段解决,但是也可以在后端做些简单的修改来进行实现.WebApi的跨域处理比较简单,有官方给出的解决方案.但是Web层一般不涉及跨域,所以自己进行了探索实现. 一.常见方案 在web.con

Jsp在Web.xml中的配置

下面列出web.xml常用的标签元素及这些标签元素的功能: 1.指定欢迎页面,例如: <welcome-file-list> <welcome-file-list> <welcome-file>index.jsp</welcome-file> <welcome-file>index1.jsp</welcome-file> </welcome-file-list> 上面的例子指定了2个欢迎页面,显示时按顺序从第一个找起,如果

如何在ASP.NET Web站点中统一页面布局[Creating a Consistent Layout in ASP.NET Web Pages(Razor) Sites]

如何在ASP.NET Web站点中统一页面布局[Creating a Consistent Layout in ASP.NET Web Pages(Razor) Sites] 一.布局页面介绍[About Layout Pages] 很多网站有些内容需要显示在各个页面中,比如Header,Footer或者告诉用户已经登录的部分.ASP.NET允许你创建一个单独的文件来包含文本.标签和代码的内容块,从而搭建一个风格整齐的网站.接下来你就可以将这个内容块插入到任何你想要让它展示的页面中.采用这种方法

Web层框架对网站中所有异常的统一处理

一个网站的异常信息作为专业的人士,是不会轻易暴露给用户的,因为那样狠不安全,显得你漏是一回事,只要还是考虑到网站的数据安全问题,下面给大家分享一下一些常见的web层框架是如何处理统一的异常. 之前都是在Struts2的配置文件中配置拦截器来统一处理系统中所有的异常,给大家带点伪代码吧,好歹曾经用过,呵呵. 配置文件配置信息如下:  1  <package name="base" extends="struts-default"> 2         &l

因为此控件已在 web.config 中注册并且与该页位于同一个目录中

在web.config文件配置了用户控件 <pages> <controls> <add tagPrefix="my" tagName="login" src="~/login.ascx" /> </controls> </pages> 然后在aspx页面引用该控件 <my:login runat="sever" id="myLogin" /

MVC3/4/5/6 布局页及Razor语法

一.目录结构 二.Razor语法 代码块:@{},如:@{Html.Raw(“”);} @if(){} @switch(){} @for(){} @foreach(){} @while(){} @do{}while(){} 代码块内语句以分号结束 表达式或变量:以@开始,如:@User.Name或@(User.Name + “欢迎你”),@() 变量可以通过var来声明,且只能在代码块中,如:@{var abc=”aaa”;} 方法调用:以@开始,如:@Html.Encode(“”) 单行文本输

Entity Framework 6 Recipes 2nd Edition（9-3）译-&gt;找出Web API中发生了什么变化

9-3. 找出Web API中发生了什么变化 问题 想通过基于REST的Web API服务对数据库进行插入,删除和修改对象图,而不必为每个实体类编写单独的更新方法. 此外, 用EF6的Code Frist实现数据访问管理. 本例,我们模拟一个N层场景,用单独的客户端(控制台应用)来调用单独的基于REST服务的Web网站(WEB API应用) . 注意:每层使用单独的Visual Studio 解决方案, 这样更方便配置.调试和模拟一个N层应用. 假设有一个如Figure 9-3所示的旅行社和预订

Java Web开发中MVC设计模式简介

一.有关Java Web与MVC设计模式 学习过基本Java Web开发的人都已经了解了如何编写基本的Servlet,如何编写jsp及如何更新浏览器中显示的内容.但是我们之前自己编写的应用一般存在无条理性,对于一个小型的网站这样的编写没有任何问题,但是一但我们需要编写大型的web工程的话,我们现有的编写模式会造成web应用的可扩展性较差,而且一但出现问题不能准确的定位出问题出在哪里. Java是一门应用设计模式比较广泛的语言.目前主流提出的23种设计模式均可在Java语言编写的程序中所应用.目前