如何构建积木式Web应用.docx
《如何构建积木式Web应用.docx》由会员分享，可在线阅读，更多相关《如何构建积木式Web应用.docx（23页珍藏版）》请在冰豆网上搜索。
如何构建积木式Web应用
如何构建积木式Web应用
上下文
基本上我们在儿童时代都玩过积木玩具。
通过一块块的积木，再加上我们的想象力，就可以构造出非常多不同的风格的建筑。
那么，我们可不可以把这种搭积木的方式应用到我们的web应用上呢。
问题
web应用通过提供给用户一整套组件（相当于积木），以及一套已经成型的方案（相当于图纸）。
用户可以采用类似搭建积木的方式来根据自己的需要制作界面和应用。
环境
采用1.0或1.1
预备知识
C#，的服务器控件编程，服务器控件生命周期
最好具备以下知识
PageController，FrontController
解决方案
1、建立目录结构
为了了解如何采用积木块式应用，我们首先建立如下的主题目录结构：
在Sheme目录下保存所有的主题，每个主题都采用相同的目录结构。
UserControl目录保存最基本的积木块（UserControl），Page目录是积木块组成的页面所形成的UserControl，Css目录保存与积木块同名的css文件来控制UserControl的界面。
PageTeamplate.ascx是页面布局框架，根据所请求的页面不同，在PageTemplate的主体位置载入不同Page目录下的ascx文件。
2、划分自己的web积木——UserControl
将web应用分成一块块的积木，每一块积木形成一个UserControl，并且每一个UserControl有一个同名的css文件用来控制界面。
最基本的积木块要放在UserControl目录下，而由最基本积木块组成的页面文件放在Page目录下。
提示：
在一般的web应用中，都会有Header，Footer，Login等等这样的模块，这些模块就可以形成UserControl组成web应用的积木。
具体积木块应该根据你的web应用功能来划分，一般来说我们可以把某个功能就划分成一个积木
3、构建载入积木块的容器——MyPlaceHolder
有了UserControl这些积木块之后，就需要有能够自动在应用中载入这些UserControl积木的容器，这就是PlaceHolder。
不过，我们需要扩展PlaceHolder的功能达到自动载入UserControl的目的。
publicclassMyPlaceHolder:
PlaceHolder
{
privatestringuserControl;//要载入的UserControl目录下的.ascx
privatestringpageControl;//要载入的Page目录下的.ascx
publicMyPlaceHolder（）
{
userControl="";
pageControl="";
}
publicstringUserControl
{
get
{
returnuserControl;
}
set
{
userControl=value;
}
}
publicstringPageControl
{
get
{
returnpageControl;
}
set
{
pageControl=value;
}
}
//当需要载入多个UserControl时，可以直接调用LoadUserControl
//当只需要载入一个UserControl时，可以调用Clear清除载入过的内容
publicvoidClear（）
{
this.Controls.Clear（）;
}
//载入UserControl目录下的.ascx
//以及导入对应的css文件
publicvoidLoadUserControl（stringUserControl）
{
this.userControl=UserControl;
BasePagepage=（BasePage）this.Page;
//请参考后面的BasePage的代码
Controlcontrol=this.Page.LoadControl（
page.Scheme+"usercontrol/"+userControl+".ascx"）;
stringcss="css/"+userControl+".css";
//对应的css文件
if（File.Exists（this.Page.MapPath（page.Scheme+css）））
{
page.AddCss（page.Scheme+css）;
}
this.Controls.Add（control）;
}
//载入Page目录下的.ascx
//LoadPage与LoadUserControl的区别是两者载入的.ascx所在的目录不同
//Page目录下的.ascx可以看成是一些搭建主体结构的.ascx,其使用MyPlaceHolder
//来包含最基础的积木块.ascx（在UserControl目录下）
publicvoidLoadPage（stringPageControl）
{
this.PageControl=PageControl;
BasePagepage=（BasePage）this.Page;
Controlcontrol=this.Page.LoadControl（
page.Scheme+"page/"+pageControl+".ascx"）;
stringcss="css/"+pageControl+".css";
if（File.Exists（this.Page.MapPath（page.Scheme+css）））
{
page.AddCss（page.Scheme+css）;
}
this.Controls.Add（control）;
}
protectedoverridevoidOnLoad（EventArgse）
{
base.OnLoad（e）;
if（!
userControl.Equals（string.Empty））
{
LoadUserControl（userControl）;
}
}
}
publicclassMyPlaceHolder:
PlaceHolder
{
privatestringuserControl;//要载入的UserControl目录下的.ascx
privatestringpageControl;//要载入的Page目录下的.ascx
publicMyPlaceHolder（）
{
userControl="";
pageControl="";
}
publicstringUserControl
{
get
{
returnuserControl;
}
set
{
userControl=value;
}
}
publicstringPageControl
{
get
{
returnpageControl;
}
set
{
pageControl=value;
}
}
//当需要载入多个UserControl时，可以直接调用LoadUserControl
//当只需要载入一个UserControl时，可以调用Clear清除载入过的内容
publicvoidClear（）
{
this.Controls.Clear（）;
}
//载入UserControl目录下的.ascx
//以及导入对应的css文件
publicvoidLoadUserControl（stringUserControl）
{
this.userControl=UserControl;
BasePagepage=（BasePage）this.Page;
//请参考后面的BasePage的代码
Controlcontrol=this.Page.LoadControl（
page.Scheme+"usercontrol/"+userControl+".ascx"）;
stringcss="css/"+userControl+".css";
//对应的css文件
if（File.Exists（this.Page.MapPath（page.Scheme+css）））
{
page.AddCss（page.Scheme+css）;
}
this.Controls.Add（control）;
}
//载入Page目录下的.ascx
//LoadPage与LoadUserControl的区别是两者载入的.ascx所在的目录不同
//Page目录下的.ascx可以看成是一些搭建主体结构的.ascx,其使用MyPlaceHolder
//来包含最基础的积木块.ascx（在UserControl目录下）
publicvoidLoadPage（stringPageControl）
{
this.PageControl=PageControl;
BasePagepage=（BasePage）this.Page;
Controlcontrol=this.Page.LoadControl（
page.Scheme+"page/"+pageControl+".ascx"）;
stringcss="css/"+pageControl+".css";
if（File.Exists（this.Page.MapPath（page.Scheme+css）））
{
page.AddCss（page.Scheme+css）;
}
this.Controls.Add（control）;
}
protectedoverridevoidOnLoad（EventArgse）
{
base.OnLoad（e）;
if（!
userControl.Equals（string.Empty））
{
LoadUserControl（userControl）;
}
}
}
使用方法：
MyPlaceHolder
id="Myplaceholder1"
runat="server"
UserControl="Header">
MyPlaceHolder>
//这里的Header是位于UserControl目录下的Header.ascx
4．构建主要的建筑结构——PageTemplate.ascx
PageTemplate其实也是一个UserControl，只不过其功能是用来包含其他的UserControl积木，在PageTemplate里，可以定义页面的整体布局。
比如：
Header、Footer在整个页面中的位置，页面主体区域的位置等等。
更重要的是，PageTemplate中应该包含Form的定义，这是所需要的不可缺少的服务器控件。
<%@RegisterTagPrefix="HomeOffice"
Namespace="HomeOffice.Web.UI.WebControl"
Assembly="HomeOffice.Web.UI"%>
DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.0Transitional//EN">
构建积木式应用程序LiteralID="CssHolder"runat="server">
Literal>
LiteralID="ScriptHolder"Runat="server">
Literal>
enctype="multipart/form-data">
| |
MyPlaceHolderid="PlaceHolder1" runat="server"UserControl="Header">
MyPlaceHolder> |
MyPlaceHolderid="Myplaceholder1" runat="server"UserControl="MainMenu">
MyPlaceHolder> |
6px;background:
#f6f6f6;font-size:
1px;
border-top:
1pxsolidwhite;">
|
4px;background:
#e1e1e1;font-size:
1px;
border-top:
1pxsolid#e6e6e6;">
|
white;border-bottom:
1pxsolid#bbbbbb">
MyPlaceHolderid="PageBody"runat="server">
MyPlaceHolder>
|
20px">
MyPlaceHolderid="Myplaceholder2"
runat="server"UserControl="Footer">
MyPlaceHolder>
|
|