经过前两个文章的努力，我们已经能看到仅仅是一个空空的页面，在开发我们想要的功能之前一个合理的布局是非常必要的．
打开几个原有页面的原代码我们分现，ＣＳ的布局，全部是类似于，
< CS:MPContainer runat ="server" id ="MPContainer" ThemeMasterFile ="LocalPhotosMaster.ascx" > < CS:MPContent id ="bcr" runat ="server" > 1 </ CS:MPContent > < CS:MPContent id ="lcr" runat ="server" > 2 </ CS:MPContent > < CS:MPContent id ="rcr" runat ="server" > 3 </ 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 < meta http-equiv ="Content-Type" content ="text/html; charset=UTF-8" /> 12 < 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 29 < 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来增加一些座位