MVC中更换皮肤应用的研究

现在有很多博客，微博，SNS等系统都有更换皮肤的功能，用户可以随心所欲的更换自己喜欢的主页皮肤，比如更换成蓝色格调，暖色格调等。从技术的角度来看，更换皮肤其实就是更换主页对应的CSS样式，所以实现该功能该功能的核心就是动态更改主页的CSS样式，另外要考虑到配置的方便，所以最好把皮肤的路径配置到web.config里。基于这样考虑，我们可以这样去处理：

1.配置web.config里的Skin路径：

2.我们需要定义下Controllers的基类CtlBaseController

代码

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using System.Web.Mvc.Ajax;
using System.Configuration;

namespace Web.Base
{
    public class CtlBaseController : Controller
    {
        public static string USER_SKIN = "Default";
        public static string USER_SKIN_PATH = string.Empty;
        protected override void OnActionExecuting(ActionExecutingContext filterContext)
        {
            //从Cookie中获取Skin，若Cookie中没有则从数据库中获取
            if (Request.Cookies["SiteSkin"] != null)
                USER_SKIN = Request.Cookies["SiteSkin"].Value;
            else
                USER_SKIN = "Default";//数据库中获取

            USER_SKIN_PATH = string.Format(ConfigurationManager.AppSettings["SKIN_PATH"], USER_SKIN);//皮肤路径

            base.OnActionExecuting(filterContext);
        }

    }
}

3.所有的Controller都要继承CtlBaseController

代码

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using Web.Base;
using System.Configuration;

namespace Web.Controllers
{
    [HandleError]
    public class HomeController : CtlBaseController
    {
        public ActionResult Index()
        {
            ViewData["Message"] = "Welcome to ASP.NET MVC!";

            return View();
        }

        public ActionResult ChangeSkin()
        {
            //把更改的皮肤保存到数据库中和Cookie中
            string skin = Request.Form["ddSkin"];
            //保存到数据库中。。。。
            //...................
            //保存到Cookie中
            HttpCookie mycookie = new HttpCookie("SiteSkin");
            mycookie.Value = skin;
            mycookie.Expires = DateTime.Now.AddDays(30);
            Response.Cookies.Add(mycookie);
            //更改现有皮肤
            USER_SKIN = skin;
            USER_SKIN_PATH = string.Format(ConfigurationManager.AppSettings["SKIN_PATH"], USER_SKIN);//皮肤路径
            return View("Index");
        }

        public ActionResult About()
        {
            return View();
        }
    }
}

4.使用一个母版页就可以实现更换不同的皮肤，动态更新CSS样式路径，Site.Master代码如下：

代码

<%@ Master Language="C#" Inherits="System.Web.Mvc.ViewMasterPage" %>
<%@ Import Namespace="Web.Base" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title><asp:ContentPlaceHolder ID="TitleContent" runat="server" /></title>
    <link href=<%=CtlBaseController.USER_SKIN_PATH%>Site.css rel="stylesheet" type="text/css" />
    <%

        List<SelectListItem> skinlist = new List<SelectListItem>();
        bool DefaultSelected = false;
        bool RedSelected = false;

        if (CtlBaseController.USER_SKIN == "Default")
            DefaultSelected = true;
        else
            DefaultSelected = false;

        if (CtlBaseController.USER_SKIN == "Red")
            RedSelected = true;
        else
            RedSelected = false;

        skinlist.Add(new SelectListItem { Text = "蓝色", Value = "Default", Selected = DefaultSelected });
        skinlist.Add(new SelectListItem { Text = "红色", Value = "Red", Selected = RedSelected });
        ViewData["SkinList"] = skinlist;

    %>
</head>

<body>
    <div class="page">

        <div id="header">
            <div id="title">
                <h1>我可以更换皮肤噢!</h1>
            </div>
            <% Html.BeginForm("ChangeSkin", "Home", FormMethod.Post, new { id = "form1" }); %>
            <div id="logindisplay">
                <%=Html.DropDownList("ddSkin", (List<SelectListItem>)ViewData["SkinList"])%>   <input type="submit" name="submit" value="应用" />
            </div>
            <% Html.EndForm(); %>

            <div id="menucontainer">

                <ul id="menu">
                    <li><%= Html.ActionLink("Home", "Index", "Home")%></li>
                    <li><%= Html.ActionLink("About", "About", "Home")%></li>
                </ul>

            </div>
        </div>

        <div id="main">
            <asp:ContentPlaceHolder ID="MainContent" runat="server" />

            <div id="footer">
            </div>
        </div>
    </div>
</body>
</html>

具体示例代码，可以点击此处下载

posted on 2011-01-30 11:16 北漂剑客阅读(2493) 评论(5) 编辑收藏举报

刷新页面返回顶部

Jiangrod Sky

MVC中更换皮肤应用的研究

导航

公告