[ASP.NET]如何灵活定制皮肤/页面:布局设计器介绍

以前看过DotNetNuke 4(以下简称DNN)的部分源码,作为一个CMS它的实现无疑有很多值得借鉴的地方。个人比较注重页面的呈现部分,所以特别关注其中的换肤、布局等部分,虽然DNN的这方面的实现已经十分优秀,但是我认为还是有改进的地方的,这也是本文要介绍的主要内容:布局设计器!

那DNN在皮肤/布局方面到底有什么不好的呢?那就是,用户不能很方便地添加新的皮肤!要添加新的皮肤,只能是Web开发/设计人员设计添加新的用户控件(.ASCX,这是DNN皮肤的实现机制),并将相关的图片文件拷贝到Portals\*\Skins目录下,如果站点没有提供相关的上传功能的话,这项工作只能由管理员进行;而且修改起来也特别不方便,可能还需要重新上传。如果能够在线修改皮肤的布局和内容,那岂不是完美了么?!

为了达到以上目的,DNN那种将皮肤实现为“静态”的ascx形式显然不可取!大家知道,DNN的页面是通过将模块拖到指定皮肤上形成的,那么我们就模仿这种方式,就是说:皮肤是通过将模块拖放到一个空白页面形成的,这个空白页面已经由布局设计器拆分成特定的布局,如DNN内定的“三行,中间行分为三列”的标准布局(不知道怎么描述,大家能看懂么?我驾驭文笔的能力比较差的说!),当然,皮肤中应该留出一个或多个空白区域,让具体页面放置它们各自的内容。

如果理解了上面的描述的话,那么毫无疑问,第一步需要将空白页面拆成N个区域,然后才能往各个区域拖放模块形成皮肤。举个例子,我们将页面分成三行,然后往第一行和最后一行放置一个Html模块(看过DNN的人都应该知道这个模块的作用吧?!),然后编辑第一行的Html模块形成页头,编辑最后一行的Html模块形成页脚,哈哈,一个拥有页头、页脚,中间有个空白区域的皮肤就形成了!

目前我已经把布局编辑器封装成一个服务器端控件,利用ASP.NET 2.0引入的Callback特性,达到类似ajax的效果,演示截图如下:
[ASP.NET]如何灵活定制皮肤/页面:布局设计器介绍_第1张图片

结合布局设计器以及ASP.NET WebPart框架,我做了一个基本可用的例子,证明其可行性,下面是简单拆分成两列的效果(嘻嘻,好像丑了点,毕竟我不是美工,没有任何加工的嘛):
[ASP.NET]如何灵活定制皮肤/页面:布局设计器介绍_第2张图片

P.S. 以上均为个人学习研究结果,可能用于公司项目,不提供源码下载,不过实现也不复杂,想想我都能作,可见是多么简单啦,呵呵~~~

你可能感兴趣的:(asp.net)