ASP.NET MVC 下打造轻量级的 Theme 机制

上一篇文章[剖析 NopCommerce 的 Theme 机制]介绍了Nop实现Theme的实现原理。但由于Nop要为Admin和Mobile做特殊处理，因此写了太多的其它东西。因此我们决定自己写一个Theme的ViewEngine，仅仅用来实现皮肤功能。

需求分析

考虑到Demo程序，为简单起见，我们将Theme放到Url中，格式：

{Controller}/{Action}?Theme={Theme}，当然你完全可以从Cookie或者数据库中去读取用户设置的Theme信息。

其次，Theme文件夹的组织结构，就采用NopCommerce的这种文件夹结构吧。

Themes/{Theme}/Views/…

View Code

public abstract class WebViewPage<TModel> : System.Web.Mvc.WebViewPage<TModel>
{
public override string Layout
{
get
{
var layout = base.Layout;

if (!string.IsNullOrEmpty(layout))
{
var filename = System.IO.Path.GetFileNameWithoutExtension(layout);
ViewEngineResult viewResult = System.Web.Mvc.ViewEngines.Engines.FindView(ViewContext.Controller.ControllerContext, filename, "");

if (viewResult.View != null && viewResult.View is RazorView)
{
layout = (viewResult.View as RazorView).ViewPath;
}
}

return layout;
}
set
{
base.Layout = value;
}
}
}

我们依葫芦画瓢也写一个WebViewPage。然后在Web.Config做如下配置：

<system.web.webPages.razor>
<host factoryType="System.Web.Mvc.MvcWebRazorHostFactory, System.Web.Mvc, Version=4.0.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35" />
<pages pageBaseType="ThemeDemo.Mvc.WebViewPage">
<namespaces>
<add namespace="System.Web.Mvc" />
<add namespace="System.Web.Mvc.Ajax" />
<add namespace="System.Web.Mvc.Html" />
<add namespace="System.Web.Optimization"/>
<add namespace="System.Web.Routing" />
</namespaces>
</pages>
</system.web.webPages.razor>

(PS:记得在Theme下的Web.Config中也要做同样的修改)

再次调试：



黑色的背景白色的字，终于出现了。什么这也太丑了吧….

后记

要实现一个好的皮肤机制，除了解决皮肤文件的定位之外，还有很多工作要做。比如要对页面布局有一个精细地设计，对兼容性、扩展性、复用性都有一个全面的考虑。

文中示例源码下载地址：http://files.cnblogs.com/coolite/ThemeDemo.zip