MVC中更换皮肤应用的研究

最新推荐文章于 2024-09-17 21:44:43 发布

weixin_34130389

最新推荐文章于 2024-09-17 21:44:43 发布

阅读量90

点赞数

文章标签：测试 xhtml 数据库

原文链接：http://www.cnblogs.com/jiangrod/archive/2011/01/30/1947779.html

版权

现在有很多博客，微博，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 " ]) %> & nbsp; < 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 >

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

转载于:https://www.cnblogs.com/jiangrod/archive/2011/01/30/1947779.html