• 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的定义了,

     1<%@ 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来增加一些座位

  • 相关阅读:
    JavaScript——封装
    Vue.js——component(组件)
    MySQL数据库——安装教程(5.7版本)
    Vue.js——循环(Java、JSTL标签库、数据库)
    Vue.js——理解与创建使用
    JavaScript——闭包
    自定义最小索引优先队列
    自定义最大索引优先队列
    自定义最小优先队列
    自定义最大优先队列
  • 原文地址:https://www.cnblogs.com/9527/p/694603.html
Copyright © 2020-2023  润新知