自定义视图引擎，实现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 ...
随机推荐
- Yii2中的入口文件环境配置
默认的Debug配置 在入口文件中 defined ( 'YII_DEBUG' ) or define ( 'YII_DEBUG', true ); defined ( 'YII_ENV' ) or ...
- 基于Selenium的自动化测试 C#版(1)
引子 我一直在思考,作为一个架构师,如何简化程序员的工作,减轻运维的压力,减低测试的要求.然后做了很多很多的尝试.最开始的公司培训文档,一键发布工具,Nuget版本管理,VS项目模板,SOA统一服务提 ...
- Kylin查询性能低下原因分析
在处理指数行情数据时(IDXD),我遇到一个KYLIN性能查询低下的问题,非常奇怪.经过一番研究发现了其中的原因并顺利解决: 症状: select count(*) from sensitop.idx ...
- Http规范
1. 关于 HTTP Basic Authentication http://blog.itpub.net/23071790/viewspace-709367/ 通过以下代码,提示用户登录 Respo ...
- Chrome开发者工具不完全指南（六、插件篇）
本篇是Chrome开发者工具的结尾篇,最后为大家介绍几款功能强大的插件.在chrome商店里面有很多插件,没事建议大家去逛逛.不过需要FQ,所以诸位请自备神器.一.皮肤插件 首先是大家期盼已久,翘首以 ...
- Win10 UWP应用发布流程
简介 Win10 UWP应用作为和Win8.1 UAP应用不同的一种新应用形式,其上传至Windows应用商店的流程也有了一些改变. 这篇博文记录了我们发布一款Win10 UWP应用的基本流程,希望为 ...
- [算法][三轴、六轴、九轴传感器算法分析] 1、分享一个三轴加速计matlab动态可视化脚本
一.有啥用 这里用的是LIS3DH三轴加速计,输出为X.Y.Z轴的加速度,通过串口连接电脑,电脑里运行matlab脚本通过串口实时获取数据并做可视化显示. 这里虽然是针对LIS3DH的,其实稍作修改即 ...
- UIButton添加倒计时
最近一个项目有获取手机短信跟邮箱验证码功能, 所以要加一个UIButton倒计时功能 例子代码如下: //获取验证码按钮 - (IBAction)getButtonClick:(UIButton *) ...
- HTML表单入门基础
网页镶嵌: <iframe src="http://www.cnblogs.com/tfl-511/" width="200" height=" ...
- Redis学习笔记~关于空间换时间的查询案例
回到目录 空间与时间 空间换时间是在数据库中经常出现的术语,简单说就是把查询需要的条件进行索引的存储,然后查询时为O(1)的时间复杂度来快速获取数据,从而达到了使用空间存储来换快速的时间响应!对于re ...