[转][MVC] 剖析 NopCommerce 的 Theme 机制

系统管理员 2022-03-29 21:11 50阅读 0赞

本文转自：[http://www.cnblogs.com/coolite/archive/2012/12/28/NopTheme.html?utm\_source=tuicool&utm\_medium=referral][http_www.cnblogs.com_coolite_archive_2012_12_28_NopTheme.html_utm_source_tuicool_utm_medium_referral]

**前言**

目前开源的CMS、Blog或者电子商务站点，他们都有一个共同的亮点，无疑就是可任意切换皮肤，并且定制和扩展能力都非常强。在这方面PHP可以说做的是最好的。那么我们如何能够在我们的ASP.NET MVC站点下面实现任意切换皮肤呢？我立马想到最近流行的NopCommerce—开源的 ASP.NET MVC 电子商务站点。它提供了强大的换肤功能，可通过一键切换皮肤。那接下来，我们就一起去寻找换肤的秘诀，让我们的ASP.NET MVC站点也具有一键换肤的功能吧。让我们的ASP.NET MVC 站点可以随意 **变 变 变!**

**换肤试用**

先试用下Nop站点的换肤效果吧，打开Nop的源码，下载地址：[http://nopcommerce.codeplex.com][http_nopcommerce.codeplex.com], 按照官方的Theme制作方法：[http://www.nopcommerce.com/docs/72/designers-guide.aspx][http_www.nopcommerce.com_docs_72_designers-guide.aspx]，拷贝默认的皮肤DarkOrange，并做相应处理。此处略去500字…

![26170651-5d833b0324ac492687121602fdb1581d.png][]

运行站点，首先呈现的是默认皮肤：

![26170735-6711d5f70b4c4e329bf9c64d5d31104f.jpg][]

切换成我们刚才制作的皮肤：

![26170827-12ae1ee9089e4ea6951765bd0b706f59.jpg][]

**换肤后的思考？**

我们刚才制作皮肤的时候，将默认的皮肤文件夹下所有的文件拷贝到新的皮肤文件夹下面，并做了样式和HTML结构的修改。Nop应该是根据客户选择的皮肤定位到相应的皮肤文件夹下面，去找到View并加载出来。那实现换肤功能的关键就是： **根据用户选择的皮肤，****ASP.NET MVC****动态定位到皮肤文件夹下的****View****，并呈现出来。**

做过ASP.NET MVC开发的朋友都知道，如果在Controller里面新建一个Action，但View不存在，页面肯定会报如下错误：

![26170949-9d51472ff78845e9b626301d4c9d60b2.png][]

从异常信息可以看出，ASP.NET MVC内部有一种加载View的机制。如果我们能够扩展这种内部的加载View的机制，去按照我们的自定义逻辑根据不同的皮肤加载不同的View，那我们的站点就能够实现换肤功能了。实现这个功能的核心就是**IViewEngine**，资料介绍：[http://www.cnblogs.com/answercard/archive/2011/05/07/2039809.html][http_www.cnblogs.com_answercard_archive_2011_05_07_2039809.html]。该接口定义如下：

![复制代码][copycode.gif]

/// <summary>
    /// Defines the methods that are required for a view engine.
    /// </summary> public interface IViewEngine { /// <summary> /// Finds the specified partial view by using the specified controller context. /// </summary> ViewEngineResult FindPartialView(ControllerContext controllerContext, string partialViewName, bool useCache); /// <summary> /// Finds the specified view by using the specified controller context. /// </summary> ViewEngineResult FindView(ControllerContext controllerContext, string viewName, string masterName, bool useCache); /// <summary> /// Releases the specified view by using the specified controller context. /// </summary> /// <param name="controllerContext">The controller context.</param><param name="view">The view.</param> void ReleaseView(ControllerContext controllerContext, IView view); }

![复制代码][copycode.gif]

**深入****Nop****，找到幕后黑手**

那我们就到Nop的源代码中去寻找 **IViewEngine** 的实现类，看看运气如何？ 运气不错，找到了3个Themeable\*\*\*\*ViewEngine. 从名字就可以断定该类是用来实现Theme的。

![26171659-7b652badf9dd417280765a7d1687ec93.png][]

（**Tips**: 借助Reshareper可轻松的查找某个接口的实现类，此外Reshareper还有其它的高级功能，谁用谁知道…）

先看看离接口**IViewEngine**最近的类—**ThemeableVirtualPathProviderViewEngine**，该类重写了**FindView** 和 **FindPartialView** 2个方法。我们以**FindView**为例进行研究吧，实际上**FindPartialView**跟**FindView**都差不多。

![复制代码][copycode.gif]

public override ViewEngineResult FindView(ControllerContext controllerContext, string viewName, string masterName, bool useCache) { var mobileDeviceHelper = EngineContext.Current.Resolve<IMobileDeviceHelper>(); bool useMobileDevice = mobileDeviceHelper.IsMobileDevice(controllerContext.HttpContext) && mobileDeviceHelper.MobileDevicesSupported() && !mobileDeviceHelper.CustomerDontUseMobileVersion(); string overrideViewName = useMobileDevice ? string.Format("{0}.{1}", viewName, _mobileViewModifier) : viewName; ViewEngineResult result = FindThemeableView(controllerContext, overrideViewName, masterName, useCache, useMobileDevice); // If we're looking for a Mobile view and couldn't find it try again without modifying the viewname if (useMobileDevice && (result == null || result.View == null)) result = FindThemeableView(controllerContext, viewName, masterName, useCache, false); return result; }

![复制代码][copycode.gif]

查找**View**的重担放到了内部方法**FindThemeableView**中完成的，看看该方法的实现吧：

![复制代码][copycode.gif]

protected virtual ViewEngineResult FindThemeableView(ControllerContext controllerContext, string viewName, string masterName, bool useCache, bool mobile) { string[] strArray; string[] strArray2; if (controllerContext == null) { throw new ArgumentNullException("controllerContext"); } if (string.IsNullOrEmpty(viewName)) { throw new ArgumentException("View name cannot be null or empty.", "viewName"); } var theme = GetCurrentTheme(mobile); string requiredString = controllerContext.RouteData.GetRequiredString("controller"); string str2 = this.GetPath(controllerContext, this.ViewLocationFormats, this.AreaViewLocationFormats, "ViewLocationFormats", viewName, requiredString, theme, "View", useCache, mobile, out strArray); string str3 = this.GetPath(controllerContext, this.MasterLocationFormats, this.AreaMasterLocationFormats, "MasterLocationFormats", masterName, requiredString, theme, "Master", useCache, mobile, out strArray2); if (!string.IsNullOrEmpty(str2) && (!string.IsNullOrEmpty(str3) || string.IsNullOrEmpty(masterName))) { return new ViewEngineResult(this.CreateView(controllerContext, str2, str3), this); } if (strArray2 == null) { strArray2 = new string[0]; } return new ViewEngineResult(strArray.Union<string>(strArray2)); }

![复制代码][copycode.gif]

这段代码读起来有点费力，又一次告诉大家命名的重要性，当然你不想让别人看懂你的代码那就是另外一回事哈。str2实际上是**ViewPath**，str3是**MasterPagePath**。其中内部方法**GetPath**是用来获取View的实际路径。我们来研究下GetPath的参数吧，其中最关键的是属性**ViewLocationFormats**和**AreaViewLocationFormats**。由于**ThemeableVirtualPathProviderViewEngine**是抽象类，我们看看派生自该类的**ThemeableRazorViewEngine**吧：

![ContractedBlock.gif][] ![ExpandedBlockStart.gif][]

public ThemeableRazorViewEngine()
    {
        AreaViewLocationFormats = new[]
                                      {
                                          //themes "~/Areas/{2}/Themes/{3}/Views/{1}/{0}.cshtml", "~/Areas/{2}/Themes/{3}/Views/{1}/{0}.vbhtml", "~/Areas/{2}/Themes/{3}/Views/Shared/{0}.cshtml", "~/Areas/{2}/Themes/{3}/Views/Shared/{0}.vbhtml", //default "~/Areas/{2}/Views/{1}/{0}.cshtml", "~/Areas/{2}/Views/{1}/{0}.vbhtml", "~/Areas/{2}/Views/Shared/{0}.cshtml", "~/Areas/{2}/Views/Shared/{0}.vbhtml" }; AreaMasterLocationFormats = new[] { //themes "~/Areas/{2}/Themes/{3}/Views/{1}/{0}.cshtml", "~/Areas/{2}/Themes/{3}/Views/{1}/{0}.vbhtml", "~/Areas/{2}/Themes/{3}/Views/Shared/{0}.cshtml", "~/Areas/{2}/Themes/{3}/Views/Shared/{0}.vbhtml", //default "~/Areas/{2}/Views/{1}/{0}.cshtml", "~/Areas/{2}/Views/{1}/{0}.vbhtml", "~/Areas/{2}/Views/Shared/{0}.cshtml", "~/Areas/{2}/Views/Shared/{0}.vbhtml" }; AreaPartialViewLocationFormats = new[] { //themes "~/Areas/{2}/Themes/{3}/Views/{1}/{0}.cshtml", "~/Areas/{2}/Themes/{3}/Views/{1}/{0}.vbhtml", "~/Areas/{2}/Themes/{3}/Views/Shared/{0}.cshtml", "~/Areas/{2}/Themes/{3}/Views/Shared/{0}.vbhtml", //default "~/Areas/{2}/Views/{1}/{0}.cshtml", "~/Areas/{2}/Views/{1}/{0}.vbhtml", "~/Areas/{2}/Views/Shared/{0}.cshtml", "~/Areas/{2}/Views/Shared/{0}.vbhtml" }; ViewLocationFormats = new[] { //themes "~/Themes/{2}/Views/{1}/{0}.cshtml", "~/Themes/{2}/Views/{1}/{0}.vbhtml", "~/Themes/{2}/Views/Shared/{0}.cshtml", "~/Themes/{2}/Views/Shared/{0}.vbhtml", //default "~/Views/{1}/{0}.cshtml", "~/Views/{1}/{0}.vbhtml", "~/Views/Shared/{0}.cshtml", "~/Views/Shared/{0}.vbhtml", //Admin "~/Administration/Views/{1}/{0}.cshtml", "~/Administration/Views/{1}/{0}.vbhtml", "~/Administration/Views/Shared/{0}.cshtml", "~/Administration/Views/Shared/{0}.vbhtml", }; MasterLocationFormats = new[] { //themes "~/Themes/{2}/Views/{1}/{0}.cshtml", "~/Themes/{2}/Views/{1}/{0}.vbhtml", "~/Themes/{2}/Views/Shared/{0}.cshtml", "~/Themes/{2}/Views/Shared/{0}.vbhtml", //default "~/Views/{1}/{0}.cshtml", "~/Views/{1}/{0}.vbhtml", "~/Views/Shared/{0}.cshtml", "~/Views/Shared/{0}.vbhtml" }; PartialViewLocationFormats = new[] { //themes "~/Themes/{2}/Views/{1}/{0}.cshtml", "~/Themes/{2}/Views/{1}/{0}.vbhtml", "~/Themes/{2}/Views/Shared/{0}.cshtml", "~/Themes/{2}/Views/Shared/{0}.vbhtml", //default "~/Views/{1}/{0}.cshtml", "~/Views/{1}/{0}.vbhtml", "~/Views/Shared/{0}.cshtml",

[http_www.cnblogs.com_coolite_archive_2012_12_28_NopTheme.html_utm_source_tuicool_utm_medium_referral]: http://www.cnblogs.com/coolite/archive/2012/12/28/NopTheme.html?utm_source=tuicool&utm_medium=referral
[http_nopcommerce.codeplex.com]: http://nopcommerce.codeplex.com/
[http_www.nopcommerce.com_docs_72_designers-guide.aspx]: http://www.nopcommerce.com/docs/72/designers-guide.aspx
[26170651-5d833b0324ac492687121602fdb1581d.png]: /images/20220330/ea5f26895e99455899f10fdbaeaf023f.png
[26170735-6711d5f70b4c4e329bf9c64d5d31104f.jpg]: /images/20220330/e6c618d7a30f40e89224b3df0d966ce6.png
[26170827-12ae1ee9089e4ea6951765bd0b706f59.jpg]: /images/20220330/e12f29decc824395a5a7503c024dff05.png
[26170949-9d51472ff78845e9b626301d4c9d60b2.png]: /images/20220330/d7c5d326d3d145c188a03b34e9603fbd.png
[http_www.cnblogs.com_answercard_archive_2011_05_07_2039809.html]: http://www.cnblogs.com/answercard/archive/2011/05/07/2039809.html
[copycode.gif]: /images/20220330/0ac7c3f5d935466998575aabfebefc8e.png
[26171659-7b652badf9dd417280765a7d1687ec93.png]: /images/20220330/6ec9213d72ee4e3a87a2aba45cb649e5.png
[ContractedBlock.gif]: https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif
[ExpandedBlockStart.gif]: /images/20220330/0400cb21f812482ca8921f2324b3ab4d.png