在开始开发Web站点之前,通常应该设想好站点所具有的功能;例如,一个博客(blog)站点,必须能够对帖子进行分类存储、向帖子添加评论,还需有进行管理的模块,这些是最少的功能。另外,考虑一个简单的零售商店,它想进入电子商务领域,它希望通过Web站点让客户浏览并购买商品。在着手开发任何一个站点之前,都必须仔细地考虑和设计,之后才能编写代码实现站点。
在开始讨论具体技术的实现时,我们应先讨论如何使用ASP.NET2.0服务器端控件所支持的功能开发设计良好的站点。毕竟,创建、使用和维护经过良好设计的站点要容易得多,而且维护费用更低。
本章将介绍以下概念:
●怎样启动站点的设计流程,并在开始编写代码之前考虑站点的所有需求。
●使用Master和Content页面实现站点的一致外观,这是ASP.NET2.0最重要的新功能。
●创建站点地图,该地图表明站点中存在哪些页面,以及这些页面在层次上与其他文件是什么关系。
●使用Web.config和Global.asax文件保存数据和代码的全局配置,这些配置将用于站点的所有页面。
在本章的结束部分有一些练习可以帮助加深对这些概念的理解。
1.1总体设计目标
设计一个功能完整的Web应用程序是一项很复杂的任务。如果是开发自己的站点,可能对站点是什么样子考虑得已经很多很具体了,所以在开始编写代码之前知道自己要做什么。然而,如果是为客户开发站点,就必须确保在站点的设计上与客户在各个细节上达成高度的一致。在一个专业的开发环境中,这个过程通常包括如下步骤:
●开发一个功能模型,该模型描述站点的具体运行情况。当用户单击LogIn按钮时会发生什么事情?当用户想浏览产品时哪些功能是可用的?在开始设计之前,需要回答这些问题以及其他很多问题,以免最后开发出来的站点不是客户想要的!
●确定在实现站点的过程中可以使用的技术。很多主机软件包对数据库的支持都有不同程度的限制,进而限制站点的总体大小,所以要尽早讨论这个问题并确保能使用所希望使用的技术。
●开发一个技术说明书,描述怎样实现所需的功能。例如,对于博客站点,当用户单击按钮发布新帖子的时候,如何确保将用户输入的文本保存到数据库中?描述要尽可能地详细,因为以后维护这个站点的人很可能不再是当初的开发人员。
这似乎需要做很多工作,但即使是对比较小的企业或者单个贸易承包人,遵循这个流程将帮助开发人员和客户保持良好的合作关系,并为将来和客户以及客户的朋友或商业伙伴继续合作打下基础。
从一旦业务端进入实现阶段,就要开始考虑如何实现这个应用程序,如何使得站点的设计符合客户的需求。创建Web应用程序并不仅仅要求能正确地使用ASP.NET2.0服务器端控件,因为网页的具体设计和布局也同样重要。
注意,术语设计(design)有两层意思。第一层意思是对色彩和布局做出选择,这通常由站点的美工人员完成。第二个定义包括站点的智能结构和各个部分之间的协作关系。这包括为信息的体系结构制定计划;作为开发人员,您希望在关系数据库中保存尽可能多的信息。本章专注于第二种定义。下一章介绍怎样混合使用HTML和ASP.NET控件设计站点中的每个页面。
WroxUnited示例站点的如下几个总体设计目标是在本章中实现的:
●在开发过程中尽可能使排查问题变得容易,以便简化追踪错误的过程。
●设置站点在部署后处理错误的标准。
●为所有页面创建一致的外观。
注意:
其他总体设计目标将在本书的后续章节中讨论,包括鉴别会员的登录系统界面(第4章)、为站点设置统一的样式和主题风格(第5章)和在数据库或XML数据文件中获得尽可能多的信息(第7和第8章)。
2.2Master和Content页面
站点具有一致的外观有很多好处,在Internet上很少看到没有统一布局的站点。统一的布局通常包括以下内容:
●一个公共标题和整个站点的菜单系统。
●页面左边的导航条,提供一些页面导航选项。
●提供版权信息的页脚和一个用于联系网管的二级菜单。
这些元素将显示在所有页面上,它们不仅提供了最基本的功能,而且这些元素的统一布局也使得用户意识到他们仍处于同一个站点内。虽然这种外观可以使用在HTML中包含文件的方式创建,但是ASP.NET2.0通过Master和Content页面机制提供了更强健的工具。
Master页面定义了所有基于该页面的网页使用的布局。它是页面布局的最高控制,指定了每个页面上的标题应该多大、导航功能应该放置在什么位置、以及在每个页面的页脚中应该显示什么内容——有些类似每个页面的形状切割插件(cookiecutter)。Master页面包含了一些可用于站点中所有页面的内容,所有可以在这里定义标准的版权页脚,并将站点的主要图标放置在页面的顶部。一旦定义好Master页面的标准特性之后,接下来将添加一些占位符(placeholder)——页面上的命名区域,这些区域将包含不同的页面。
每个Content页面都以Master页面为基础,开发人员将在这里为每个页面添加具体的内容。Content页面包含文本、HTML和位于<asp:content >标记内的控件。当关于某个Content页面的请求到达时,该Content页面将和它的Master页面的一个副本组合到一起,由Master页面中特定的占位符包含Content页面的内容。然后完整的页面将发送到浏览器,如图2-1所示。
图2-1
幸运的是,构造这一体系的重担由ASP.NET2.0承担;开发人员只需创建下面两个小节中讨论的Master和Content页面即可。
2.2.1创建Master页面 要创建Master页面,可以在VWD的SolutionExplorer中右击根目录,选择AddItem,并将类型指定为MasterPage。默认情况下,新Master页面的名称是MasterPage.master,位于站点的根目录中。Master页面由三部分组成。
首先是一些基本的标记(tag)和标志(例如Master页面的标志,DOCTYPE、xmlns、html和head标记),所有已显示出来的页面都会包含这些内容。这些内容在Master页面中只输入一次,以减少重复工作。DOCTYPE和xmlns指示服务器可以从何处查看页面中所使用的标记的定义。注意这些标记不会出现在Content页面中:
<%@masterlanguage="VB"% >
<!DOCTYPEHTMLPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
<htmlxmlns="http://www.w3.org/1999/xhtml" >
<headid="PageHead"runat="server" >
<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/ >
<metahttp-equiv="Content-Language"content="en-uk"/ >
<title >WroxUnited</title >
<linkrel="stylesheet"type="text/css"href="site.css"runat="server"
/ >
</head >
其次,Master页面中有一个用于存放脚本的区域,这些脚本可以在所有的页面上运行(例如,Page_Load的代码,该事件在页面每次加载的时候都会运行),例如:
<scriptrunat="server" >
SubPage_Load(ByValsenderAsObject,ByValeAsSystem.EventArgs)
'...
EndSub
</script >
第三,Master页面包含一些HTML布局、开始/结束标记<asp:content…ContentPlaceHolderID=“xxx” >和</asp:content >。包含在Content页面中的内容将放置在这些标记之间。例如:
<body >
<formid="mainForm"runat="server" >
<divid="header" >...</div >
<divid="sidebar" >...</div >
<divid="content" >
<asp:contentplaceholderid="mainContent"runat="server"/ >
</div >
<divid="footer" >
<pclass="left" >
Allcontentcopyright©WroxPressanditssubsidiaries
2004.</p >
</div >
</form >
</body >
</html >
总结一下,每个Master页面都必须包含如下元素:
●基本的HTML和XML输入标记
●第一行是<%@master…% >
●带有ID的<asp:ContentPlaceHolder >标记
现在,Master页面可以作为容器包含其他页面了。下一节中将创建一些Content页面。
2.2.2创建Content页面 与ASP.NET2.0一样,VWD也减少了开发人员的输入。在SolutionExplorer中,右击根目录并选择AddNewItem。通常选择WebForm;Content页面没有特定的模板。注意对话框底部的Selectmasterpage(如图2-2所示)复选框。当选中该复选框并单击Add按钮时,VWD将显示另一个对话框,询问为新的Content页面选用哪个Master页面。
图2-2
在如图2-3所示的对话框中,开发人员可以选中要使用的Master页面。选中Master页面(通常命名为MasterPage.master)并单击OK。
图2-3
VWD在这个Content页面中设置了两个值。在Design视图中看不到这两个值,但切换到Source视图就可以看到它们,如下面的代码所示。首先,所使用的Master页面将在第一条指令中说明。其次,VWD将在这个页面中放置一个<asp:content >控件,该控件的ID和Master页面中占位符的ID相同。一个Master页面中可能会包含多个可以插入Content页面的位置。指示符表明哪个占位符将由这个特定的页面填充。
<%@PageLanguage="VB"MasterPageFile="MyMasterPage.master"% >
<asp:ContentID="Content1"
ContentPlaceHolderID="ContentPlaceHolderIDinMasterPage"
Runat="Server" >
...contentgoeshere
</asp:Content >
总结一下,一个Content页面包含如下特性:
●没有HTML的<!DOCTYPEHTML… >标记和XML的<htmlxmlns=… >标记
●第一行的<%@pageMasterPageFile=…% >指示ASP.NET2.0应使用哪个Master页面
●包含一个<asp:content >标记
理论上并不难,而且代码由VWD自动添加。在下面的示例中,可以看到Master和Content页面的相互协作。
2.2.3Master和Content页面的示例 本书中的所有练习基本上都可以在Design视图中完成(不用直接处理代码)。但是切换到Source视图查看VWD如何创建页面是一件很有趣的事情。下面显示的代码是一个公司的Master页面(名为research.master)和一个名为missionstatement的Content页面示例。第一行阴影代码指示Master页面,在第二个阴影部分是一个控件,该控件定义了一个内容占位符,Content页面的内容可以插入到这个占位符中:
<%@MasterLanguage="VB"% >
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd" >
<htmlxmlns="http://www.w3.org/1999/xhtml" >
<headrunat="server" ><title >CorporateMaster</title ></head >
<body >
CorporationName
<formid="form1"runat="server" >
<div >
<asp:contentplaceholder
id="ContentPlaceHolderMissionStatement"
runat="server" >
www.lmwlove.com
</asp:contentplaceholder >
</div >
</form >
</body >
</html >
下面是该示例中Content页面的代码。灰色部分指示了Master页面和描述插入到Master页面中的内容的控件。ContentPlaceHolder的ID必须匹配Master页面中的ContentPlaceHolder的ID。下面的代码是完整的;页面的顶部不包含其他标记或属性:
<%@PageLanguage="VB"MasterPageFile="~/research.master"Title="UntitledPage"% >
<asp:ContentID="Content1" ContentPlaceHolderID="ContentPlaceHolderMissionStatement" Runat="Server" >
OurMissionStatementistoprovidevaluetothecustomer.
</asp:Content >
注意Content页面必须包含一组最小化的标记。Content页面中没有<!DOCTYPE >或者<htmlxmlns=“http://www.w3.org/1999/xhtml” >等标记,也不会包含<head >信息。这些数据由Master页面提供。x剉閑gz錧wQ龕坃€{K?0蔔)Yb霳颯錘玁譙0R貧o忲N