asp.net mvc + easyui 页面主题切换

我们需要实现的功能，是在asp.net+easyui框架下的网页页面各种颜色主题（皮肤）的切换。

第一步，在页面上创建标签，通过onclick事件，调用javascript代码。

default
                        
gray
                        
ui-sunny
                        
ui-dark-hive
                        
ui-pepper-grinder
                        
ui-cupertino

第二步，javascript代码：

changeTheme = function (type) {
    var $easyuiTheme = $('#easyuiTheme');
    var url = $easyuiTheme.attr('href');
    var href = url.substring(0, url.indexOf("themes")) +"themes/"+ type + '/easyui.css';
    $easyuiTheme.attr('href', href);
    $.cookie('easyuiThemeName', type, {
        expires: 7
    });
};

在函数changeTheme中，前两一行代码获取到id为easyuiTheme的标签的href的值。

这是我们前台的标签，可以看到，这个标签就是我们引入的easyui样式标签，路径是通过ViewData从后台获取的数据。

所以我们后台的代码是这样的：

public ActionResult Index()
        {
            //访问cookie中easyui的样式
            string easyuiThemeName = "default";
            HttpCookie cookie = Request.Cookies["easyuiThemeName"];
            if (cookie != null)
            {
                easyuiThemeName = cookie.Value;
            }
            ViewData["easyuiThemeName"] = easyuiThemeName;
            return View();
        }

可以看到，这里的ViewData，在程序第一次运行的时候是调用的 default ,而之后都是从 cookie 中取到的名为 "easyuiThemeName"的键所对应的值。
我们再回头看上面的javascript代码，第三四行重新定义了标签href的值，并且在第五行，将值保存在了cookie中。这样我们在再次打开页面的时候，就可以直接从cookie中获取上次已经被保存下来的主题了。
这里需要导入进项目中的文件有easyui的几个样式，还需要jquery（easyui带jquery）和jquerycookie包，样式的目录如下图所示：

主题包的下载地址：

http://www.jeasyui.com/extension/themes_jui.php

jquery cookie包的下载地址：

http://plugins.jquery.com/?s=cookies

jquery cookie 引入要紧跟在jquery下面：