Community Server页面布局

经过前两个文章的努力，我们已经能看到仅仅是一个空空的页面，在开发我们想要的功能之前一个合理的布局是非常必要的．

打开几个原有页面的原代码我们分现，ＣＳ的布局，全部是类似于，

<CS:MPContainer runat="server" id="MPContainer" ThemeMasterFile="LocalPhotosMaster.ascx" >

<CS:MPContent id="bcr" runat="server">

</CS:MPContent>

<CS:MPContent id="lcr" runat="server">

</CS:MPContent>

<CS:MPContent id="rcr" runat="server" >

</MPContent>

</CS:MPContainer>

都是一个MPContainer包含了数个MPContent

我们可以把MPContainer看成是一个页面容器(从英文的字面意思上也就是这个意思),MPContent就是用来显示内容的区域,但是几个MPContent是怎么来确定各自在整个页面中的位置的呢?

可以看到,每个MPContent都有一个id属性,第个id属性都有一个bcr和lcr等不同的值.要弄清楚为什么只要设置一个相应的值,我们的内容就会自动出现在相应的位置,我们有必要了解一下CS所的模版机制,CS采用的是MetaBuilders.WebControls.MasterPages这个第三方的组件,在\source\Controls\ContentContainer.cs中CS采用了一个代理模式把这个组件引入,为什么用代理模式,说句古话叫以不变应万变,不用但心MetaBuilders.WebControls.MasterPages一个接口或一个方法的变更而要对我们的程序大动干戈.具体代理模式的好处还是请各位自已查查相关资料吧,CNBLOG上有许多这方面的文章,我这里就不细说了

打个ContentContainer.cs我们可以看到

public class MPRegion : MetaBuilders.WebControls.MasterPages.Region{} //为CS的中的控件注册位置,就是占个座,打个比方说我们国家刚开过的人大代表会议,不是每个桌子上都有个姓名牌么上面写着XXX,开会的时候XXX来了,就要坐在这个位置,而且这个位置只能坐一个人,坐两个人就挤了,在CS中也一样,第个MPRegion定义一个"ID"比如id="bcr"它就是哪块牌子,在MPContent中的id="bcr"中内容就要显示在这个位置,它就相当于开会的人了
public class MPContent : MetaBuilders.WebControls.MasterPages.Content{} 这个就是用来包括内容和控件的容器
public class MPForm : MetaBuilders.WebControls.MasterPages.NoBugForm {} 这个用来在客户端生成表单

了解到了这里,我们可能会疑问,为什么我们的LocalPhotosMaster.ascx中没有定义一个相应的MPRegion了,但是我们的内容还是正解的显示出来了, 这是因为,CS中第一个子模版都是继续自\source\Web\Themes\default\Masters\Master.ascx这个主模版,打开它就可以看到这些个MPRegion的定义了,

<%@ Control Language="C#" %>
2

<%@ Import Namespace="CommunityServer.Components" %>
3

<%@ Register TagPrefix="CS" Namespace="CommunityServer.Controls" Assembly="CommunityServer.Controls" %>
4

<%@ Register TagPrefix="Blog" Namespace="CommunityServer.Blogs.Controls" Assembly="CommunityServer.Blogs" %>
5

<%@ Register TagPrefix="CSD" Namespace="CommunityServer.Discussions.Controls" Assembly="CommunityServer.Discussions" %>
6

<%@ Register TagPrefix="TWC" Namespace="Telligent.Web.UI" Assembly="Telligent.Web.UI" %>
7

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

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
9

<CS:MPRegion id="HeaderRegion" runat="server">
10

<CS:Head runat="Server">
11

<CS:Style id="UserStyle" runat="server" visible = "true" />
13

<CS:Style id="s2" runat="server" visible = "true" Href="../style/Common.css" />
14

<CS:Style runat="server" Href="../style/common_print.css" media="print" />
15

<CS:Script id="s" runat="server" />
16

</CS:Head>
17

</CS:MPRegion>
18

<body>
19

<CS:MPForm runat="server">
20

<TWC:Modal runat="server" CssClasses="CommonModal" TitleCssClasses="CommonModalTitle" CloseCssClasses="CommonModalClose" ContentCssClasses="CommonModalContent" FooterCssClasses="CommonModalFooter" ResizeCssClasses="CommonModalResize" MaskCssClasses="CommonModalMask" LoadingUrl="~/utility/loading.htm" />
21

<CS:MPRegion id="bscr" runat="server" />
22

<div id="CommonOuter"><div id="Common">
23

<div id="CommonHeader">
24

<CS:MPRegion id="bhcr" runat="server" >
25

<CS:TitleBar runat="server" id="t" />
26

</CS:MPRegion>
27

</div>
28

<div id="CommonBody">
30

<table cellspacing="0" cellpadding="0" border="0" width="100%" id="CommonBodyTable">
31

<tr>
32

<td valign="top" id="CommonLeftColumn">
33

<CS:MPRegion id="lcr" runat="server" />
34

</td>
35

<td valign="top" width="100%" id="CommonBodyColumn"><table cellpadding="0" cellspacing="0" border="0" style="table-layout: fixed;" width="100%"><tr><td>
36

<CS:MPRegion id="bcr" runat="server" />
37

</td></tr></table></td>
38

<td valign="top" id="CommonRightColumn">
39

<CS:MPRegion id="rcr" runat="server" />
40

</td>
41

</tr>
42

</table>
43

</div>
44

<div id="CommonFooter">
45

<CS:MPRegion id="BodyFooterRegion" runat="server" >
46

<CS:Footer runat="server" id="Footer1"/>
47

</CS:MPRegion>
48

</div>
49

</div></div>
50

</CS:MPForm>
51

<CS:MPRegion id="outsidetheform" runat="server" />
52

</body>
53

</html>
54

当然如我们相要显示更多的内容可以在自己的子模版内添加MPRegion来增加一些座位

本文转自无心之柳.NET博客园博客，原文链接：http://www.cnblogs.com/9527/archive/2007/03/30/694603.html，如需转载请自行联系原作者

Community Server页面布局相关推荐

ExtJs懒人笔记(2) ExtJs页面布局
ExtJs学习目录懒人笔记(1) ExtJs初探 ExtJs懒人笔记(2) ExtJs页面布局 ExtJs懒人笔记(3) 动态Grid的实现页面布局,对于做Web开发者来说是一定不会陌生的,而这些 ...
CSS3与页面布局学习总结（八）——浏览器兼容与前端性能优化
一.浏览器兼容 1.1.概要世界上没有任何一个浏览器是一样的,同样的代码在不一样的浏览器上运行就存在兼容性问题.不同浏览器其内核亦不尽相同,相同内核的版本不同,相同版本的内核浏览器品牌不一样,各种运 ...
使用母版页实现页面布局
使用母版页实现页面布局 asp.net mvc beta 2008-12-12 08:46 阅读4 评论0 字号: 大大中中小小 (原创:灰灰虫的家http://hi. ...
CSS3与页面布局学习笔记（八）——浏览器兼容性问题与前端性能优化方案
一.浏览器兼容 1.1.概要世界上没有任何一个浏览器是一样的,同样的代码在不一样的浏览器上运行就存在兼容性问题.不同浏览器其内核亦不尽相同,相同内核的版本不同,相同版本的内核浏览器品牌不一样,各种运 ...
unigui的页面布局使用
(unigui的页面布局还是很强大的,基本什么的排版都能搞好.前面部分为原文章翻译,翻译不一定很准确,就能看吧,后面有使用说明,有什么不明白的欢迎加我QQ(910300653)一起交流学习) 一.布局 ...
table和div在页面布局上应该注意的问题
在这篇文章开篇,我先纠正一下我之前写的一篇入门文章的错误,还是先引用一下比较官方的说法吧,避免再次误导各位新手 " <!DOCTYPE> 声明必须位于 HTML5 文档中的第一行 ...
xml信息管理系统_WPF信息管理系统项目实战教程二：使用XAML实现页面布局
首页面布局设计 XAML(Extensible Application Markup Language),可扩展应用程序标记语言的使用使得C#桌面应用程序开发前后端实现真正分离.前端人员可使用该标记语 ...
wordpress page显示未找到页面_通过Avada主题了解网页基本结构和页面布局
Avada主题是目前很流行的国外建站主题,我们在学习 avada主题建站初期有必要先了解网页基本结构和页面布局情况,这样对后面使用 avada主题建站,了解 avada主题Theme Options设 ...
使用 IntraWeb (5) - 页面布局之 TFrame
IW 对 TFrame(还是之前那个), 这在页面布局中很有用. 如果多个页面都有一个共同的部分(譬如页眉.页脚.菜单.边栏等), 可以将这些共同的部分放在一个 TFrame 中, 从而方便统一与修改 ...

Community Server页面布局

Community Server页面布局相关推荐

最新文章

热门文章