asp基础学.docx

上传人:b****4 文档编号:24871234 上传时间:2023-06-02 格式:DOCX 页数:38 大小:144.58KB
下载 相关 举报
asp基础学.docx_第1页
第1页 / 共38页
asp基础学.docx_第2页
第2页 / 共38页
asp基础学.docx_第3页
第3页 / 共38页
asp基础学.docx_第4页
第4页 / 共38页
asp基础学.docx_第5页
第5页 / 共38页
点击查看更多>>
下载资源
资源描述

asp基础学.docx

《asp基础学.docx》由会员分享,可在线阅读,更多相关《asp基础学.docx(38页珍藏版)》请在冰豆网上搜索。

asp基础学.docx

asp基础学

ASP.NET2.0入门经典(第4版)

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和位于

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">

 

//www.w3.org/1999/xhtml">

 

WroxUnited

/>

其次,Master页面中有一个用于存放脚本的区域,这些脚本可以在所有的页面上运行(例如,Page_Load的代码,该事件在页面每次加载的时候都会运行),例如:

SubPage_Load(ByValsenderAsObject,ByValeAsSystem.EventArgs)

'...

EndSub

第三,Master页面包含一些HTML布局、开始/结束标记

content…ContentPlaceHolderID=“xxx”>和

content>。

包含在Content页面中的内容将放置在这些标记之间。

例如:

...

...

contentplaceholderid="mainContent"runat="server"/>

Allcontentcopyright©WroxPressanditssubsidiaries

2004.

总结一下,每个Master页面都必须包含如下元素:

●      基本的HTML和XML输入标记

●      第一行是<%@master…%>

●      带有ID的

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将在这个页面中放置一个

content>控件,该控件的ID和Master页面中占位符的ID相同。

一个Master页面中可能会包含多个可以插入Content页面的位置。

指示符表明哪个占位符将由这个特定的页面填充。

<%@PageLanguage="VB"MasterPageFile="MyMasterPage.master"%>

ContentID="Content1"

ContentPlaceHolderID="ContentPlaceHolderIDinMasterPage"

Runat="Server">

 

...contentgoeshere

 

Content>

总结一下,一个Content页面包含如下特性:

●      没有HTML的

DOCTYPEHTML…>标记和XML的标记

●      第一行的<%@pageMasterPageFile=…%>指示ASP.NET2.0应使用哪个Master页面

●      包含一个

content>标记

理论上并不难,而且代码由VWD自动添加。

在下面的示例中,可以看到Master和Content页面的相互协作。

2.2.3 Master和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">

//www.w3.org/1999/xhtml">

CorporateMaster

CorporationName

contentplaceholder

id="ContentPlaceHolderMissionStatement"

runat="server">

contentplaceholder>

下面是该示例中Content页面的代码。

灰色部分指示了Master页面和描述插入到Master页面中的内容的控件。

ContentPlaceHolder的ID必须匹配Master页面中的ContentPlaceHolder的ID。

下面的代码是完整的;页面的顶部不包含其他标记或属性:

<%@PageLanguage="VB"MasterPageFile="~/research.master"Title="UntitledPage"%>

 

ContentID="Content1"

ContentPlaceHolderID="ContentPlaceHolderMissionStatement"

Runat="Server">

 

OurMissionStatementistoprovidevaluetothecustomer.

 

Content>

注意Content页面必须包含一组最小化的标记。

Content页面中没有

DOCTYPE>或者

//www.w3.org/1999/xhtml”>等标记,也不会包含信息。

这些数据由Master页面提供。

2.2.4 在Master页面中使用级联样式表

在Master页面中声明到级联样式表(CascadingStyleSheet,CSS)的链接是一个不错的选择。

CSS是HTML的特性,而不是ASP.NET2.0的特性,所以本书没有深入讨论这个主题。

然而,CSS将在第5章中和相关主题一起讨论。

在附录E中还有HTML和CSS的简单参考。

简而言之,CSS包含了用于页面和控件的各种样式的格式,因此页面在显示时,其上面的所有元素、文本和按钮以及链接的风格等等,都会根据CSS中定义的格式显示。

有了CSS,设计人员就可以少用(并维护)很多使用很频繁的单个样式格式标记。

CSS还可以加快页面的加载速度,因为CSS在浏览器中只加载一次,当需要重复使用时,可以直接使用保存在客户端缓存中的CSS。

在一个Master页面中,应该在部分包含一个类似如下的链接(灰色部分代码)从而将页面和CSS链接在一起:

WroxUnited

runat="server"/>

在下面的“试一试”部分,您将有机会创建WroxUnited站点的Master页面。

在本书每一章的练习中,您都将为站点添加内容和功能。

现在只需要简单地创建Master页面的架构。

在本书的后续章节中将为Master页面添加其他部分,所以现在该文件看起来还不是很完整,暂时不用关注这个问题!

(1)打开本章的示例站点,目录是C:

\BegASPNET2\Chapters\Begin\Chapter02。

首先导入一个作者创建的CSS文件。

右击站点的根目录并选择AddExistingItem,如图2-4所示。

图 2-4

(2)导航到存放本书下载文件的文件夹(C:

\BegASPNET2\WroxUnited),选择site.css并单击Add。

CSS是HTML的主题(不是ASP.NET的),但是如果打开该文件,将可以看到为HTML编写的样式集,例如

等。

不必修改该文件。

可以看到在SolutionExplorer内显示的文件列表中已经包含了文件site.css。

如果打开了这个CSS文件,请关闭它。

(3)再次右击根目录,但这次选择AddNewItem并使用MasterPage模板。

将该页面命名为site.master。

确保Selectmasterpage复选框没有选中(这个选项只用于Content页面)。

在VWD创建该页面之后可以在Design视图中查看它,不过现在它是一个空页面。

注意,在Source视图中可以看到VWD已经添加了几个标记和控件(查看如下代码)。

第一个标记是一个指示符,表明这是一个Master页面,而第二个标记是普通的文档类型指示符。

接下来是一个插入脚本代码的位置,然后是一个XMLNS值。

可以看到,VWD在标记内创建了一个contentplaceholder控件:

<%@masterlanguage="VB"debug="true"%>

DOCTYPEHTMLPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN"

"http:

//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 

 

//www.w3.org/1999/xhtml">

 

...

 

contentplaceholderid="mainContent"runat="server"/>

(4)可以修改表单(form)的名称,把由VWD产生的普通名称修改为更适合自己情况的名称。

切换到Source视图并将修改为

(5)切换到Design视图设置样式表。

在Properties窗口的顶端,打开控件下拉列表并选择Document。

在属性列表的底部找到StyleSheet(如图2-5所示),单击椭圆形的按钮,并找到site.css。

单击OK。

图 2-5

(6)添加

标记分隔页面可以简化页面格式的修改。

创建的Master页面将在

内使用4个
区域。

有些区域中会包含其他

标记(子层次结构的
)。

第一个

是由VWD自动创建的;其他的需手动添加。

可以从工具箱的HTML面板中将

拖放到页面上,但是在Design视图中很难将其放到正确的位置上。

您可以使用Source视图进行精确定位。

(7)切换到Source视图并在窗体内找到默认的

标记的开头到
标记的末尾都选中,可以注意到Properties窗口中现在显示的是
的属性。

将id属性设置为content。

(8)继续停留在Source视图中,通过拖放将另一个

从工具箱的HTML面板中拖放到的上方,但仍然在内。

将其id属性设置为header。

(9)在表单内另外添加两个

标记。

将标题下面的第一个

的id设置为sidebar,并将最下面的那个
的id设置为footer。

(10)在Source视图中,现在创建子层次结构的

标记,这些标记将位于前面创建的
内部。

在header

内,拖放一个
并将其id设置为logo。

在logo

的后面将显示一些简单的文本,如下所示:

 

WroxUnited

(11)在sidebar

中添加文本Navigation,如下面的代码所示:

Navigation

(12)在后面几个章节中将在content

内添加控件,但现在,只添加一个class为itemcontent的子层次结构

contentplaceholderid="mainContent"runat="server"/>

(13)在footer

中添加两个版权信息:

Allimagesandcontentcopyright©WroxPressanditssubsidiaries

2004.

Websitedesignedby

//www.frogboxdesign.co.uk"title="croak">FrogBox

Design

 

 

操作回顾

首先为站点导入一个CSS文件,这个文件是由作者创建好的,包含在本书的下载代码中(实际上,作者并不善于设计。

我们觉得红色、粉红色和橙红色组合在一起比较合适,所以我们邀请FrogBoxDesign的一位设计师对示例站点进行设计)。

由于CSS是HTML的技术,因此在这里没有讨论样式表的结构(详细内容可以参考附录E)。

然而,更重要的目标是使用VWD帮助创建一个Master页面,这个页面包含3个基本组成部分。

通过使用MasterPage模板,VWD为您创建了基本的HTML和XML输入标记。

VWD还在第一行添加了<%@master…%>。

最后,VWD提供了一个

,该
中包含了一个

ContentPlaceHolder>标记。

每个占位符标记都需要一个ID,因此可以将该标记的ID修改为有意义的名称。

然后对Master页面做了一些基本的修改,使它能支持本书后续章节将要添加的功能。

所有这些内容其实都是HTML的功能,而不是ASP.NET2.0的。

首先,使用VWD的IntelliSense工具为要导入的CSS文件添加一个链接。

然后创建了几个

标记,以便在标题区、边条(sidebar)、内容区和脚本区组织页面的内容。

下面的“试一试”部分将创建一个Content页面,这个页面用于填充site.master页面中的占位符。

由于“aboutthesite”页面很简单,所以先从创建该页面开始介绍。

(1)在VWD中打开WroxUnited站点,右击根目录。

选择AddNewItem并选中WebForm模板。

将该页面命名为About.aspx并确保同时选中Selectamasterpage和Placecodeinseparatefile两个复选框,如图2-6所示,即使该页面没有任何代码(如果没有为代码指定一个单独的文件,那么代码的架构标记(frameworktag)就将出现在.aspx文件中。

最好和站点的其他页面保持统一,将容

展开阅读全文
相关搜索

当前位置:首页 > 解决方案 > 学习计划

copyright@ 2008-2022 冰豆网网站版权所有

经营许可证编号:鄂ICP备2022015515号-1