使用Ajax实现换肤功能

网站换肤是经常要用到的一个功能，但是传统的方式似乎有点瑕疵，本文实现的Ajax换肤有点类似ＭＳＮＳｐａｃｅ中的用户体验。

　功能：点击linkbutton, 在网页中央弹出一个radio单选框，同时背景变成灰色，选择这个单选框的选项，实现换肤功能。

   这主要是ModalPopupExtender控件提供的功能，控件设置如下:

< ajaxToolkit:ModalPopupExtender  ID ="ModalPopupExtender1"  runat ="server"  TargetControlID ="LinkButton1"  PopupControlID ="Panel1"  BackgroundCssClass ="modalBackground"  DropShadow ="true"  OkControlID ="OkButton"  CancelControlID ="CancelButton"  OnOkScript ="onOk()" >
         </ ajaxToolkit:ModalPopupExtender >  

    TargetControlID: 关联触发按钮；  PopupControlID：弹出的单选框，一般使用panel;  BackgroundCssClass:弹出单选框后的背景色； DropShadow：弹出单选框后是否需要阴影； OkControlID：关联确定按钮； CancelControlID；关联取消按钮； OnOkScript：关联选择后应该执行的脚本。

    其中onOk(),是响应Javascript的代码，使用一个变量来替代css样式。

    以下是整个前台代码：

<% ... @ Page Language="C#" AutoEventWireup="true" CodeFile="changeCSS.aspx.cs" Inherits="changeCSS"  %>

<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >

< html  xmlns ="http://www.w3.org/1999/xhtml"   >
< head  runat ="server" >
     < title > 无标题页 </ title >
     < link  href ="StyleSheet.css"  rel ="stylesheet"  type ="text/css"   />
     < script  type ="text/javascript" > ...
var styleToSelect;
function onOk()
...{
  document.getElementById('Paragraph1').className = styleToSelect;
}
</ script >
</ head >
< body >
     < form  id ="form1"  runat ="server" >
     < div >
         < asp:ScriptManager  ID ="ScriptManager1"  runat ="server" >
         </ asp:ScriptManager >
    
     </ div >
         < asp:LinkButton  ID ="LinkButton1"  runat ="server"  Width ="240px" > Please change the style </ asp:LinkButton >
         < p  id =Paragraph1 >
         < a  href ="http://blog.youkuaiyun.com/burningcpu" >< span  style ="color: #3366cc" > burningcpu </ span ></ a > ,
I am Zhou Lu, a memeber of ShangHai Iscom .net team, love software development, enjoy it.
         </ p >
         < asp:Panel  ID ="Panel1"  runat ="server"  CssClass ="modalPopup"  Style ="display:none"  Width ="233px" >
< p > Choose the style you would like </ p >
< input  id ="RadioA"  name ="Radio"  onclick ="styleToSelect = 'sampleStyleA';"  type ="radio" />
< label  class ="sampleStyleA"  for  = "RadioA" >
Choose THIS Style. </ label >< br  />
< input  id ="RadioB"  name ="Radio"  onclick ="styleToSelect = 'sampleStyleB';"  type ="radio" />
< label  class ="sampleStyleB"  for  = "RadioB" >
Choose THIS Style. </ label >< br  />
< input  id ="RadioC"  name ="Radio"  onclick ="styleToSelect = 'sampleStyleC';"  type ="radio" />
< label  class ="sampleStyleC"  for  = "RadioC" >
Choose THIS Style. </ label >< br  />
< input  id ="RadioD"  name ="Radio"  onclick ="styleToSelect = 'sampleStyleD';"  type ="radio" />
< label  class ="sampleStyleD"  for  = "RadioD" >
Choose THIS Style. </ label >< br  />
< div  align ="center" >
< asp:Button  ID ="OkButton"  runat ="server"  Text ="OK" />
< asp:Button  ID ="CancelButton"  runat ="server"  Text ="Cancel" />
</ div >
</ asp:Panel >
         &nbsp;
         < ajaxToolkit:ModalPopupExtender  ID ="ModalPopupExtender1"  runat ="server"  TargetControlID ="LinkButton1"  PopupControlID ="Panel1"  BackgroundCssClass ="modalBackground"  DropShadow ="true"  OkControlID ="OkButton"  CancelControlID ="CancelButton"  OnOkScript ="onOk()" >
         </ ajaxToolkit:ModalPopupExtender >
     </ form >
</ body >
</ html >

实现效果：