Community Server页面布局
經過前兩個文章的努力,我們已經能看到僅僅是一個空空的頁面,在開發我們想要的功能之前一個合理的布局是非常必要的.
打開幾個原有頁面的原代碼我們分現,CS的布局,全部是類似于,
?
?
<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的定義了,?
?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來增加一些座位
? ? 本文轉自無心之柳.NET博客園博客,原文鏈接:http://www.cnblogs.com/9527/archive/2007/03/30/694603.html,如需轉載請自行聯系原作者
總結
以上是生活随笔為你收集整理的Community Server页面布局的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: hive操作create,alter等
- 下一篇: angular HttpClient p