欢迎您访问我爱IT技术网，今天小编为你分享的编程技术是：【asp.net Web站点风格切换的实现】，下面是详细的讲解！
asp.net Web站点风格切换的实现
Web站点的风格切换是很常见、也很受大家欢迎的功能，比如大家熟知的博客园就提供了几十款风格模板供大家选择。在Asp.Net中，我们可以通过模板页master page和主题theme来实现网站的风格切换，但是.Net提供的默认设置不够强大和灵活。本文将向大家介绍如何在.Net提供的方法上进行改进和扩展，以提供更加强大的网站风格切换功能。
效果预览：http://www.tracefact.net/Demo/StyleSetting/default.aspx
网站的风格的切换，说白了，实际上就是对页面进行分解和重组。所以在进行之前，我们先简单回顾看一下页面究竟有哪些组成部分可以供我们分解，分清楚哪些是可变的、哪些是不变的，进行后继的工作才会容易得多。现在我们先暂时脱离服务器端，看一下一个静态的.htm页面由哪几部分组成：
结构(有语义的XHTML)：这部分由XHTML标记组成，应该注意，这里使用“有语义”三个字作为修饰。XHTML的职责是告诉“这里是什么”，而不是告诉“这里应该如何显示”。尽管浏览器对于几乎每个XHTML的标记都赋予了某种内置的样式控制，但是XHTML的本意只是规范文档的结构。比如h1表示为标题，p表示为段落。而不是为了这个字显示的更大一些才去使用h1。
表现和布局(CSS)：CSS用来控制页面的显示及布局。在Web标准的概念普及以前，我想大多人都是表格套表格来布局的，现在基本都在使用CSS了，这里没有太多好说的。
行为(Javascript)：静态网页也可以添加一些交互的行为，这些行为由Javascript来完成。我们时常会把onclick="alert('hello')"这样的代码嵌入到XHTML标记中，比如一个Input标记上；一些结构、行为分离的狂热人士则主张将行为与结构(XHTML)分离，他们不会将javascript代码写到<body>之间，而全部写在了head中，或者是body下面，使用 window.onload=function(){ // …} 这种形式。有个极力主张这种做法的人(Peter-Paul Koch)写了本书叫《ppk on javascript》。
好了，大概了解了这些，我们看下.Net中如何将这三者分离，以及它的一些限制：
我到现在都觉得 行为与结构 完全分离的概念太前卫了，另外它也不影响对网站的风格设置，所以我们这里不讨论它。
我们先看一下结构：现在我们将思维向服务器端靠拢一下，很快会发现上面的结构部分仍需要再细分一次，就是XHTML标记和标记中的内容(网页内容)分离。XHTML标记属于变化的部分，不同的风格可能会需要不同的XHTML结构，而对于各个风格，它所显示的内容显然是一样的。想要得到这样的效果，我们可以使用Master Page模板页。由Master Page模板页对应XHTML结构(变化部分)，由Page页面对应于XHTML页面的内容(不变部分)，即是一个Page可以设置为不同的Master Page以达到不同的样式(look and feel)。
现在在看一下表现部分，表现层分为全局式的CSS以及基于控件的皮肤Skin，这些都可以交由主题Theme来完成。
看到这里，你可能觉得不用往下看了，使用Master Page和Theme谁不会啊。现在我们就讨论下.Net 中Master Page 和 Theme 的局限：
- 大家知道，我们可以在 Web.config中的System.Web结点下的pages结点中添加Theme和masterPageFile属性来对网站进行设置。但是它提供了一个全局性的配置，就是对于整个站点的所有页面，都将使用这个Master Page。而有时候我们希望能够每个页面不相同，这里就无法实现了。虽然我们可以通过使用location结点来为各个页面进行单独设置，但是显然太麻烦了。
- 我们希望每个风格都有个名字，比如说“默认风格”、“春意盎然”。
- 我们希望用户可以选择风格，而不是像博客园这样由博主设置风格。
有了思路后我们就来一步步地实现它，我们希望可以对风格进行简单的设置，我们应该先明确需要设置的内容：我们都有哪些风格、当前使用的风格是什么、每个风格使用了什么主题、哪个页面对应哪个模板。了解了这些之后，我们可以写下这样的结点配置来：
styleTemplates是风格设置的根节点，default是默认的风格名称；masterRoot是指模板页的根目录的地址；style结点是各个风格的名称，以及其所使用的主题的名称；style结点下的masterPages结点组包含此风格所使用的模板的信息；其中Page子结点对应每个独立的页面，path属性记录的是页面的路径，master属性是每个页面对应的模板的路径。
page结点的master属性没有给出模板的全路径，这么做一个是为了使目录结构更一目了然，还有就是不想master属性的内容变得很长，所以需要在程序中指定页面的模板的路径为 masterRoot + Theme + masterPage名称。这样在模板的根目录下，必须建立与主题同名的目录，然后将模板位于该目录下。
在创建页面时，我们需要要选择一个模板。注意到这一点非常重要，因为这个模板实际上是该页面的默认模板。当我们在Web.config中将相应风格的page结点留空时(没有对此页面设置模板)，那么就会应用这个模板。所以在Web.Config中定义风格的模板，只是覆盖了这个我们在创建页面时选择的模板。由此，我们只用定义一套完整的Master Page模板页，供每个页面在创建时选择。而Web.config风格结点下设置的master page，实际上仅仅是动态地覆盖这些模板。
以上面的配置为例：当我们将 “春意盎然” 下的第二个 page 结点注释掉时，它会应用创建页面时所选择的模板。“默认风格”下面没有设置任何的 page 结点，所以对于该风格的每个页面，都会应用创建页面时所选择的模板。
如果你希望仅使用Css来换肤，你可以使用也可以不使用Master Page，那么在Web.Config中可以像下面这样设置：
对于上面使用Master Page时的设置，站点的目录结构如下所示：
可以看到模板页的根目录下包含了目录Default、Spring与主题名称相同(必须)。之后我们要编写结点处理程序，如何编写自定义结点处理程序，我在《.Net 自定义应用程序配置》一文中已经详细的讨论了，所以这里我们直接看实现，在AppCode目录中新建一个文件StyleTemplateConfigHandler.cs：
这个类提供了一些简单的对XmlNode的操作，对styleTemplates结点进行了映射，这里需要明确两个概念：默认风格 和 用户风格：
- 默认风格，指的是站点管理员 或者 博主设置的风格，也就是Web.Config 中styleTemplates结点的Default属性。
- 用户风格，用户设置的风格，页面的实际显示是根据用户风格而 不是默认风格。当用户没有设置风格时，才显示默认风格。
很显然，这个类处理的所有的均是默认风格，我们来看一下它的几个主要方法和属性：
在继续进行之前，我们来考虑这样一个问题：因为我们要根据用户选择的风格来动态地为页面加载主题和模板，那么用户信息(用户选择了什么风格)应该保存在哪里，从哪里获得呢？我们有很多的选择：可以使用Session、可以使用Cookie，还可以保存到数据库中。此时最好将这部分抽象出来，以便日后为不同的方法提供实现。我们定义一个接口 IUserStyleStrategy，它用来定义如何获取、设置用户风格，在AppCode中新建文件IUserStyleStragety.cs：
然后我在这里提供了一个基于Cookie的默认实现：
如果日后你需要将信息保存在数据库中，那么你只要重新实现一下这个接口就可以了：
因为所有的页面都要运行这样的一个逻辑：判断用户是否有设置风格，如果没有，使用Web.Config中设置的默认风格；如果设置了，使用用户风格。最后动态地给Page类的Theme属性和MasterPageFile属性赋值。
那么我们可以定一个基类，在这个基类中去做这件事，然后让所有的页面继承这个基类；又因为页面是一定要继承自System.Web.UI.Page类的，所以这个基类也必须继承自System.Web.UI.Page。现在在AppCode中再建一个文件 PageBase.cs：
这里需要注意：
- ConfigurationManager.GetSection()方法只会调用一次，然后会将结果进行缓存；只要Web.Config不做修改，以后不管是Request还是PostBack都不会再重新生成StyleTemplateConfig的类型实例，而会从缓存中读取。我在《.Net 自定义应用程序配置》中忘记说了。
- userStrategy=new DefaultStyleStrategy("userStyle");这里可以将IUserStyleStrategy的类型信息保存在Web.config中，然后使用反射动态创建。具体方法依然参见《.Net 自定义应用程序配置》。
- 如果想动态地为页面设置主题和模板，代码必须写在PreInit事件中。参见《Asp.Net Page Life Cycle Overview》。
因为这只是一个范例程序，我主要是表达实现的思路，而不是代码的编写，所以省略了很多诸如结点属性是否为空之类的判断。下面的测试仅仅在Web.Config中的配置正确时。在站点下新建一个页面，比如Default.aspx，注意创建一个模板页，因为这里设置的是会被覆盖的，所以无所谓选择哪个模板。
添加App_Theme下创建目录Default、Spring，新建一个目录MasterPage，在下面创建目录Default、Spring，然后添加一些文件(这就不用我说了吧)。在页面上添加一个DropDonwList，一个Button，当我们选择要显示的模板时，会进行相应的切换，编写后置代码：
之后你可以看到下面的画面：
可以通过下面这个连接来看实际的效果，注意到：在这里我让 Default.aspx 和 Other.aspx 使用了同一个模板，你也可以设置它们使用不同的模板。
http://www.tracefact.net/Demo/StyleSetting/default.aspx
在这篇文章中，我简单地向大家介绍了实现网站风格切换的一个思路。
我们首先复习了网页的结构，了解了.Net默认配置的不足。接着分三个步骤实现了网站的风格切换：处理配置结点的程序、获取用户风格的方法、以及通过基类继承来为各个页面设置风格。最后我们通过简单的两个页面进行了下测试和预览。
感谢阅读，希望这篇文章能给你带来帮助！
关于asp.net Web站点风格切换的实现的用户互动如下：
相关问题：ASP.NET 【GridView 问题】 System.Web.UI.Literal...
答：强制转换出错。 试试： 把((TextBox)(dataGridV.Rows[e.RowIndex].Cells[1].Controls[0])).Text.ToString().Trim() 改成：dataGridV.Rows[e.RowIndex].Cells[1].Text.ToString().Trim(); >>详细
相关问题：请问，我有一个已经生成为WWW.dll的asp.net web应...
答：URL、Session、Cookies、Server.Transfer、Application和跨页面传送。 【分析】 本题考查面试者对ASP.NET中多页面传值的理解是否全面。因为ASP.NET的页面表单提交到自身，完成回传的功能，所以默认情况下不能使用POST方式进行多页面传值。关于这... >>详细
相关问题：你正在创建一个ASP.NET定位Web站点，将被在布拉格...
答：在web.config的globalization元素中设置culture和uiCulture属性 >>详细
- 【asp】asp.net url重写浅谈-net-url重写
- 【DataSet】DataSet、DataTable、DataRow区别详解
- 【asp】asp.net 动态添加多个用户控件-net-动态添
- 【创建】ASP.NET Web API教程 创建域模型的方法详
- 【Asp】Asp.net 页面调用javascript变量的值-net-
- 【ASP】ASP.NET 5升级后如何删除旧版本的DNX-NET5
- 【asp】asp.net ubb使用代码-net-ubb使用
- 【默认图片】图片不存在使用默认图片代替的实例
- 【asp】asp.net 页面转向 Response.Redirect Ser
- 【jQuery】jQuery实现倒计时跳转的例子-倒计时跳
- 评论列表（网友评论仅供网友表达个人看法，并不表明本站同意其观点或证实其描述）
-