自定义视图引擎，实现MVC主题快速切换
一个网站的主题包括布局，色调，内容展示等，每种主题在某些方面应该或多或少不一样的，否则就不能称之为不同的主题了。每一个网站至少都有一个主题，我这里称之为默认主题，也就是我们平常开发设计网站时的一个固定布局，固定色调，固定内容展示等构成一个默认的固定主题。单一主题针对一些小网站或网站用户群体相对单一固定还是比较适用的，但如果是大型网站或是网站的用户群体比较多而且复杂，如：京东，博客园里的每个博客空间、文俊IT社区网(我的网站,虽不是大型网站，但也实现了主题切换功能的哦！~)等，是需要多个网站主题的，当然我举的这两个网站他们都实现了多主题，比如:
京东默认主题：适合国内人群
英文主题：适合国外人群
博客园就不用在此举例了吧，大家看每个人的博客风格不同就知道了。
上面的表述其作用是为了说明主题对于一个大中型或多种不同用户群体的网站的重要性，而如何实现多种主题的实现与切换也是本文主要说明的。主题的实现与切换方法有很多，常见的方法有：动态替换CSS+JS、ASPX页面可以采取制作多种控件主题进行切换、切换页面路径，不同的路径同页面文件设计成不同的主题等，而我这里要讲解的是MVC下如何实现通过切换路径来实现主题的切换功能。
MVC页面展示的内容来自视图页面（view.cshtml,view.vbhtml），如果说要实现在相同的后台处理代码下，实现不同的主题展示，我们只需要改变视图页面内容就可以了，但默认情况下，一个Action对应一个视图，如何实现一个Action在某种主题下对应不同的的视图文件呢？我这里给出如下两种方案：
第一种方案，很简单，可以根据请求的主题名称来返回不同的视图，代码实现如下：
Action:
public ActionResult TestCustomViewPath(string theme)
{
string themeName = string.IsNullOrEmpty(theme) ? "Default" : theme;
return View(themeName + "/Test"); //注意这里指定了一相对路径
}
View:
//Default: <!DOCTYPE html> <html>
<head>
<title></title>
</head>
<body>
<div>
我是自定义的视图路径，风格：@ViewBag.CurrentThemeName
</div>
@using(Html.BeginForm()){
<span>选择主题：</span> @Html.DropDownList("theme", new[] { new SelectListItem() { Text = "默认", Value = "Default" },
new SelectListItem() { Text = "绿色", Value = "Green" }})
<p>
<input type="submit" value="应用" />
</p>
}
</body>
</html> //Green: <!DOCTYPE html> <html>
<head>
<title></title>
</head>
<body style="background-color:Green;color:Orange;">
<div>
我是自定义的视图路径，风格：@ViewBag.CurrentThemeName
</div>
@using(Html.BeginForm()){
<span>选择主题：</span> @Html.DropDownList("theme", new[] { new SelectListItem() { Text = "默认", Value = "Default" },
new SelectListItem() { Text = "绿色", Value = "Green" }})
<p>
<input type="submit" value="应用" />
</p>
}</body>
</html>
注意这里面的视图文件，不再是之前的默认情况，而是如下结构：即：在同一个控制器对应的视图目录下存在多个以主题为名的子目录，子目录中的文件名相同。
实现效果如下图示：
从上面的效果来看，确实已经实现了所谓的主题切换，但这种方法我并不是很推荐，因为视图文件目录过于混乱，每个控制器视图目录下均包含多个主题子目录，且每个子目录下的文件名相同，这让我很难区别，容易出现更错的情况，有人可能会说，我也可以将视图文件名改成不同的呀，比如：Green_Test.cshtml,这样就能区分了，但我仍然说不建议这样做，至少找视图文件都找得麻烦，推荐我下面介绍的第2种方法，具体如何实现，请君往下看。
我们知道，视图如何呈现，或者说如何被解析，均是需要视图引擎ViewEngine来支持的，微软给我们提供了两种视图引擎，即：WebFormViewEngine,对应的视图文件扩展名为：aspx;RazorViewEngine，对应的视图文件扩展名为：cshtml,vbhtml;从如下源代码也可以看出来：
namespace System.Web.Mvc
{
public static class ViewEngines
{
private static readonly ViewEngineCollection _engines = new ViewEngineCollection
{
new WebFormViewEngine(),
new RazorViewEngine()
}; public static ViewEngineCollection Engines
{
get
{
return ViewEngines._engines;
}
}
}
}
看到这个代码，我们应该可以看出，可以通过ViewEngines.Engines来添加我们自定义或是第三方的视图引擎（如：Nvelocity），来实现支持不同的视图文件格式，我这里因为目的是需要实现主题切换，所以就来自定义视图引擎，因为视图引擎实现细节比较复杂，若直接继承自IViewEngine接口，需要考虑与实现的代码会比较多且存在风险，所以我是直接继承自RazorViewEngine,既然要实现该类，我们先看一下该类的源代码：
using System;
using System.Collections.Generic; namespace System.Web.Mvc
{
public class RazorViewEngine : BuildManagerViewEngine
{
internal static readonly string ViewStartFileName = "_ViewStart"; public RazorViewEngine() : this(null)
{
} public RazorViewEngine(IViewPageActivator viewPageActivator) : base(viewPageActivator)
{
base.AreaViewLocationFormats = new string[]
{
"~/Areas/{2}/Views/{1}/{0}.cshtml",
"~/Areas/{2}/Views/{1}/{0}.vbhtml",
"~/Areas/{2}/Views/Shared/{0}.cshtml",
"~/Areas/{2}/Views/Shared/{0}.vbhtml"
};
base.AreaMasterLocationFormats = new string[]
{
"~/Areas/{2}/Views/{1}/{0}.cshtml",
"~/Areas/{2}/Views/{1}/{0}.vbhtml",
"~/Areas/{2}/Views/Shared/{0}.cshtml",
"~/Areas/{2}/Views/Shared/{0}.vbhtml"
};
base.AreaPartialViewLocationFormats = new string[]
{
"~/Areas/{2}/Views/{1}/{0}.cshtml",
"~/Areas/{2}/Views/{1}/{0}.vbhtml",
"~/Areas/{2}/Views/Shared/{0}.cshtml",
"~/Areas/{2}/Views/Shared/{0}.vbhtml"
};
base.ViewLocationFormats = new string[]
{
"~/Views/{1}/{0}.cshtml",
"~/Views/{1}/{0}.vbhtml",
"~/Views/Shared/{0}.cshtml",
"~/Views/Shared/{0}.vbhtml"
};
base.MasterLocationFormats = new string[]
{
"~/Views/{1}/{0}.cshtml",
"~/Views/{1}/{0}.vbhtml",
"~/Views/Shared/{0}.cshtml",
"~/Views/Shared/{0}.vbhtml"
};
base.PartialViewLocationFormats = new string[]
{
"~/Views/{1}/{0}.cshtml",
"~/Views/{1}/{0}.vbhtml",
"~/Views/Shared/{0}.cshtml",
"~/Views/Shared/{0}.vbhtml"
};
base.FileExtensions = new string[]
{
"cshtml",
"vbhtml"
};
} protected override IView CreatePartialView(ControllerContext controllerContext, string partialPath)
{
string layoutPath = null;
bool runViewStartPages = false;
IEnumerable<string> fileExtensions = base.FileExtensions;
IViewPageActivator viewPageActivator = base.ViewPageActivator;
return new RazorView(controllerContext, partialPath, layoutPath, runViewStartPages, fileExtensions, viewPageActivator);
} protected override IView CreateView(ControllerContext controllerContext, string viewPath, string masterPath)
{
bool runViewStartPages = true;
IEnumerable<string> fileExtensions = base.FileExtensions;
IViewPageActivator viewPageActivator = base.ViewPageActivator;
return new RazorView(controllerContext, viewPath, masterPath, runViewStartPages, fileExtensions, viewPageActivator);
}
}
}
有没有发现有什么值得我们关注的地方呢？对了，就是构造函数，构造函数中直接初始化了7个数组，除了FileExtensions外，其余6个均是用来存放视图查找的路径的，中间的{0}\{1}\{2}分别为view,controller,area的占位符，在执行查找视图时会被替换成实际的值。知道了这6个数组，等于就掌握了视图查找路径，我们只需要重新赋值这个6个数组，就能实现视图的随意切换了，以下面我实现的自定义视图引擎代码：
public class CustomViewEngine : RazorViewEngine
{
public CustomViewEngine(string theme)
{
FormatLocations(base.AreaViewLocationFormats, theme);
FormatLocations(base.AreaMasterLocationFormats, theme);
FormatLocations(base.AreaPartialViewLocationFormats, theme);
FormatLocations(base.ViewLocationFormats, theme);
FormatLocations(base.MasterLocationFormats, theme);
FormatLocations(base.PartialViewLocationFormats, theme);
FormatLocations(base.MasterLocationFormats, theme);
} private void FormatLocations(string[] locationFormats,string theme)
{
for (int i = 0; i < locationFormats.Length; i++)
{
locationFormats[i] = locationFormats[i].Replace("/Views/",string.Format("/Views/{0}/",theme));
}
}
}
这个类很简单，只有一个构造函数及一个私有方法FormatLocations，目的就是改变默认的视图查找路径。
有了这个视图引擎，要实现主题切换就很简单了，实现方式如下：
1.全局实现：
public class HomeController : Controller
{ private string themeName = null; protected override void OnResultExecuting(ResultExecutingContext filterContext)
{
var viewResult = filterContext.Result as ViewResult;
if (viewResult != null)
{
string themeCookieName="ThemeName";
if (!string.IsNullOrEmpty(themeName))
{
HttpContext.Response.Cookies.Set(new HttpCookie(themeCookieName, themeName) { Expires=DateTime.Now.AddYears(1)});
}
else
{
themeName = (HttpContext.Request.Cookies[themeCookieName].Value??"").Trim();
}
ViewEngineCollection viewEngines = new ViewEngineCollection() { new CustomViewEngine(themeName) };
foreach (var item in ViewEngines.Engines)
{
viewEngines.Add(item);
} viewResult.ViewEngineCollection = viewEngines;
//viewResult.ViewEngineCollection = new ViewEngineCollection(new List<IViewEngine> { new CustomViewEngine(themeName) });//这里是只用自定义视图引擎
}
base.OnResultExecuting(filterContext);
} public ActionResult TestCustomViewEngine(string theme)
{
themeName = string.IsNullOrEmpty(theme) ? "Default" : theme;
ViewBag.CurrentThemeName = themeName;
var viewResult = View("Test");
return viewResult;
} }
注意上面代码中定义的私有字段themeName，这个主要是用作第一次设置主题时会用到，因为如果单纯的靠Cookie是不行的，Cookie在没有输出到客户端时，Request.Cookies是空的，那样的话就会存在延迟，不信的话，大家可以试试，另一个地方是viewResult.ViewEngineCollection，这里我是采用将自定义与默认的引擎都放到引擎集合中，这样可以保证兼容多种路径下视图，当然如果只希望应用自定义的引擎，则可以初始化一个引擎集合且里面只有自定义的视图引擎。
这里也可以将这些方法定义到一个ThemeController中，然后其它的控制器继承自它就可以了，还可以实现过滤器，然后再应用到ACTION上。
2.单个视图实现：仅作演示，一般不会这么用
public ActionResult TestCustomViewEngine(string theme)
{
string themeName = string.IsNullOrEmpty(theme) ? "Default" : theme;
var viewResult = View("Test");
viewResult.ViewEngineCollection = new ViewEngineCollection(new List<IViewEngine> { new CustomViewEngine(themeName) });
ViewBag.CurrentThemeName = themeName;
return viewResult;
}
视图内容：
Views/Default/Home/Test.cshtml
<!DOCTYPE html> <html>
<head>
<title></title>
</head>
<body>
<div>
我是自定义的视图路径，风格：@ViewBag.CurrentThemeName
</div>
@using(Html.BeginForm()){
<span>选择主题：</span> @Html.DropDownList("theme", new[] { new SelectListItem() { Text = "默认", Value = "Default" },
new SelectListItem() { Text = "绿色", Value = "Green" }})
<p>
<input type="submit" value="应用" />
</p>
}
</body>
</html>
Views/SkyBlue/Home/Test.cshtml
<!DOCTYPE html> <html>
<head>
<title></title>
</head>
<body style="background-color:skyblue;color:Green;">
<div>
我是自定义的视图路径，风格：@ViewBag.CurrentThemeName
</div>
@using(Html.BeginForm()){
<span>选择主题：</span> @Html.DropDownList("theme", new[] { new SelectListItem() { Text = "默认", Value = "Default" },
new SelectListItem() { Text = "天空蓝", Value = "SkyBlue" }})
<p>
<input type="submit" value="应用" />
</p>
}
</body>
</html>
视图文件目录结构如下图示：
最终的实现主题切换效果如下图所示：
当切到其它视图，如：View/Home/Index
主题切换实现成功，到此结束，欢迎大家讨论，写代码很快，但写文章却实有点耗时间，花了我几个小时，主要是需要将设计思路讲出来，好让大家明白，我不想写那种只讲结果不讲原理及设计思路的文章，想让大家看了我的文章，不仅会用，还能明白实现原理，最后大家都能自己设计出更好的方案。独乐乐不如众乐乐，如果觉得这篇文章我（梦在旅途）用心了，还请支持一下哦，谢谢！
(今天是我的生日，在此祝我自己生日快乐的同时，也感叹时间过得很快啊！)
自定义视图引擎，实现MVC主题快速切换的更多相关文章
- （翻译）为你的MVC应用程序创建自定义视图引擎
Creating your own MVC View Engine For MVC Application 原文链接:http://www.codeproject.com/Articles/29429 ...
- ASP.NET MVC扩展自定义视图引擎支持多模板&动态换肤skins机制
ASP.NET mvc的razor视图引擎是一个非常好的.NET MVC框架内置的视图引擎.一般情况我们使用.NET MVC框架为我们提供的这个Razor视图引擎就足够了.但是有时我们想在我们的项目支 ...
- ASP.NET MVC自定义视图引擎ViewEngine 创建Model的专属视图
MVC内置的视图引擎有WebForm view engine和Razor view engine,当然也可以自定义视图引擎ViewEngine. 本文想针对某个Model,自定义该Model的专属视图 ...
- ASP.NET MVC 扩展自定义视图引擎支持多模板&动态换肤skins机制
ASP.NET mvc的razor视图引擎是一个非常好的.NET MVC 框架内置的视图引擎.一般情况我们使用.NET MVC框架为我们提供的这个Razor视图引擎就足够了.但是有时我们想在我们的 ...
- BrnShop开源网上商城第五讲：自定义视图引擎
今天这篇博文主要讲解自定义视图引擎,大家都知道在asp.net mvc框架中默认自带一个Razor视图引擎,除此之外我们也可以自定义自己的视图引擎,只需要实现IViewEngine接口,接口定义如下: ...
- MVC自定义视图引擎地址
先看结构 1.RouteConfig 文件(注意顺序) public static void RegisterRoutes(RouteCollection routes) { routes.Ignor ...
- 自定义MVC视图引擎ViewEngine 创建Model的专属视图
MVC内置的视图引擎有WebForm view engine和Razor view engine,当然也可以自定义视图引擎ViewEngine.本文想针对某个Model,自定义该Model的专属视图. ...
- MVC系列——MVC源码学习：打造自己的MVC框架（四：了解神奇的视图引擎）
前言:通过之前的三篇介绍,我们基本上完成了从请求发出到路由匹配.再到控制器的激活,再到Action的执行这些个过程.今天还是趁热打铁,将我们的View也来完善下,也让整个系列相对完整,博主不希望烂尾. ...
- mvc-自定义视图引擎
//自定义视图引擎的实质是把数据模型(moudle)和模板(View)转换成html页面,输出到客户端public class MyView:IView { string _viewPath; pub ...
随机推荐
- EF6(CodeFirst)+MySql开发遇到的坑
最近一不小心偷个懒就已经过了好几个月了,真是惭愧惭愧,出来混终究是要还的,我还是把”脱坑指南“写完吧,-＿-~~.点我打开上篇博客 0x001.架构名”dbo”の殇 坑之首也,当提架构名,在mssql ...
- openwrt-智能路由器hack技术（2）---"网路信息监控和窃取"
openwrt-智能路由器hack技术(2)---"网路信息监控和窃取" 1 导读 PS:之前写的一个文章,现在发现结构内容排版不是太好,导致阅读体验太差,影响传播和SEO,所 ...
- 整理BOM时写的关于拆分单元格的VB代码
Public Function AddRows(pos As Integer, amount As Integer) Dim rpos As Integer rpos = pos + To amoun ...
- jdk研究——java.lang
jdk研究 volatile 是什么意思? 如何看jdk源码? 如何调试源码!---------仔细解读关键类,关键代码,常用的api的解释! 自己有疑问的不懂地方-------- 不懂的太多怎么办. ...
- Java-数组练习2
2．找出如下数组中最大的元素和最小的元素,a[][]={{3,2,6},{6,8,2,10},{5},{12,3,23}} int[][] i={{3,2,6},{6,8,2,10},{5},{12, ...
- MVVM架构~使用boxy和knockoutjs实现编辑功能
返回目录 这个功能我认为非常有用,尤其在后台管理系统中,它对用户来说,使用体验这块非常不错,下面是它的截图
- js笔记——call,apply,bind使用笔记
call和apply obj.call(thisObj, arg1, arg2, ...); obj.apply(thisObj, [arg1, arg2, ...]); 两者作用一致,都是把obj( ...
- iReport 开发和运行所用版本不一致导致设置字体大小不起作用
问题:开发环境使用 Win10 + iReport 5.6 ,运行环境使用 Win10 + iReport 5.2 ,设置字体的大小不起作用. 解决方法:开发环境和运行环境一致,都使用 iReport ...
- 利用SSIS的ForcedExecutionResult 属性 和CheckPoint调试Package
1,ForcedExecutionResult 强制一个package或task执行的结果,共有四种值 None,Success,Failure,Completion,默认值是None,表示不强制返回 ...
- 分析优秀的.NET 文档设计工具Vsdocman 7.1 软件保护技术
Vsdocman是一个优秀的.NET源代码注释编写工具,方便的以GUI的方式设计.NET源代码的注释. 我们知道.NET源代码的注释是Xml格式的注释,在生成程序集时,只需用选中生成Xml注释,Vis ...