Lect03_动态Web页面设计初步.ppt

1、计算机与IT入门,第三讲： 动态Web页面设计初步,胡 燕 大连理工大学软件学院,2,outline,动态网页简介 ASP .NET简介 ASP .NET之Hello World CSharp语言基础 ASP .NET页面设计要领,3,网页的工作原理,客户端,服务器端,发出请求,发回网页,4,静态网页的工作原理,接受请求,找到静态网页,发送网页,服务器端,客户端发起请求(Request,服务器应答(Response,5,动态网页的工作原理,接受请求,找到动态网页,发送网页,服务器端,执行程序代码， 生成静态网页,客户端发起请求(Request,服务器应答(Response,6,常见的动态网页设

2、计框架,7,ASP（Active Server Pages,微软公司推出 服务器端：Windows 2000+IIS、Windows 98+PWS ； 客户端：普通浏览器即可,8,PHP,Rasmus Lerdorf 1994年提出，经过其他人参与，共同开发而成。 服务器端：Unix/Linux/Windows + Apache应用服务器 客户端：普通浏览器。 优点：免费、开放源代码；缺点：缺乏大公司的支持,9,JSP（ Java Server Pages,它是由SUN提出，多家公司合作建立的一种动态网页技术。该技术的目的是为了整合已经存在的Java编程环境（例如Java Servlet等），

3、结果产生了一个全新的足以和ASP抗衡的网络程序语言。 JSP将Java程序片段（Scriptlet）和JSP标记嵌入普通的HTML文档,10,Web服务器,Web服务器的概念：Web服务器是指驻留于因特网上某种类型计算机的程序。当Web浏览器（客户端）连到服务器上并请求文件时，服务器将处理该请求并将文件发送到该浏览器上。 Web服务器是动态Web页面程序部署的不可或缺的重要部分之一 典型的Web服务器 MS IIS (一般与ASP .NET平台结合使用) Apache（常用于PHP平台） Tomcat (一般与J2EE/JSP平台结合使用),11,ASP .NET简介,12,ASP.NET编程

4、基础,CLR（公共语言运行时,NET Framework基础类库,ADO.NET与XML,ASP.NET(Web Form using System.Data; using System.Configuration; using System.Web; using System.Web.Security; using System.Web.UI; using System.Web.UI.WebControls; using System.Web.UI.WebControls.WebParts; using System.Web.UI.HtmlControls; public partial c

5、lass HelloWorld : System.Web.UI.Page protected void Page_Load(object sender, EventArgs e) protected void Button1_Click1(object sender, EventArgs e) lblMessage.Text = Hello World!;,21,CSharp语言基础,22,名字空间定义及其使用,Namespace System; Using system,23,C#基本语法,数据类型 标识符 运算符 表达式 语句和注释 流程控制语句,24,1）数据类型,值类型 基本类型 结构

6、类型 枚举类型 引用类型 对象类型 字符串类型 类类型 接口类型 指代类型 数组 两者的区别在于进行存取时，值类型的变量直接存储其数据，而引用类型的变量则存储其在系统中对应的存储地址,25,数据类型,值类型 基本类型 整数类型：sbyte、byte、short、ushort、int、uint、long、ulong 布尔（bool）类型（True | False） 字符（char）类型（注意：转义符） 浮点类型：float、double 小数（decimal）类型 结构类型 struct 枚举类型 enum,26,数据类型,引用类型 对象类型 object 字符串类型 string 类类型 cl

7、ass 接口类型 interface 指代类型 delegate 数组,27,标识符,正确： a hello this_is_valid Color Color1 _Color1 错误： 1test Color.test this is invalid $test if,28,5.2 操作符,算术运算符 加+ 减- 乘* 整除/ 取余% 位逻辑运算符 位与）结尾 注释就是在程序中标记、说明某个程序段的作用，它是不会被执行的 /单行注释 /* 多行注释 *,35,控制语句,1. 选择语句 if 语句 if(表达式) 代码1; else 代码2; switch语句 switch(表达式) case

8、 常量1: 语句1; break; default: 语句n; break;,36,控制语句,2. 循环语句 for循环 for(for-initializer;for-condition;for-iterator) 语句块; while循环 while(条件表达式) 语句块; do循环 do 语句块; while(条件表达式,37,控制语句,2.循环语句 foreach 语句 foreach (type identifier in expression) 语句块; 其中： type 表示identifier的类型 Identifier表示集合元素的循环变量 expression对象集合或数组

9、表达式,38,控制语句,3.跳转语句 break 语句 continue 语句 goto 语句 return 语句,39,异常处理,try / Code that throws exceptions catch(OverflowException e) / Catch a specific exception catch(Exception e) / Catch the generic exceptions finally / Execute some cleanup code,40,命名空间,什么是命名空间 命名空间(Namespace)是C#用组织程序的，由于使用命名空间可以养活错误和重用

10、代码，而且分层的组织使一个程序的成员传到另一个程序变得更容易，尽管不强制，但良好的编程习惯是创建命名空间，以清楚地识别应用程序的层次,41,命名空间,命名空间的声明和调用 namespace 用于声明一个范围。格式如下： namespace name name1 type-declaration 其中：name,name1命名空间可以是任何合法的标识符。 type-declaration可以声明一个或多个下列类型： 另一个命名空间,class,interface,struct, enum, delegate,42,命名空间,命名空间的声明和调用 using 使用命名空间。格式如下： using

11、 name; using命令可以避免都要写类的全名，因为全名一般都很长,43,ASP .NET页面设计要领,内容提要： 介绍ASP.NET页面的创建，代码组织方式、文件结构和事件模型。 介绍ASP.NET的内部对象Response和Request及其使用方法,44,创建Web Forms,什么是 ASP.NET Web Forms(窗体)？ ASP.NET Web 窗体页框架是可以在服务器上用于动态生成 Web 页的可缩放公共语言运行库编程模型。 具体说来，它提供： 创建和使用可封装常用功能的可重用 UI 控件，并由此减少页开发人员必须编写的代码量的能力。 开发人员以有序的形式清晰地构造页逻辑

12、的能力。 开发工具为页提供强大的 WYSIWYG 设计支持的能力（现有的 ASP 代码对工具不透明,45,创建Web Forms,ASP.NET Web 窗体页是带 .aspx 文件扩展名的文本文件。可在整个 IIS 虚拟根目录树中部署它们。当浏览器客户端请求 .aspx 资源时，ASP.NET 运行库分析目标文件并将其编译为一个 .NET 框架类。此类然后可用于动态处理传入的请求。（注意只能在第一次访问 .aspx 文件时对其进行编译，已编译的类型实例可以在多个请求间重用,46,创建Web Forms,Web Forms的两种代码组织方式 1.不使用CodeBehind技术。即页面代码与C#

13、代码混合在一起的形式 2.使用CodeBehind技术。页面代码与C#代码分离，这是ASP .NET编程中最常采用的模式,47,ASP.NET文件的编译与执行,本地代码,C# 代码,Visual Basic .NET 代码,1.aspx,html,48,ASP .NET的网页代码模型,1. 单文件页模型 当代码与页面混合在一起的情况下，.aspx页面的代码会形成一个类，其中包含页面内部的处理逻辑,System.Web.UI.Page,aspx,页面,classes,一个.aspx实际上是Page类，然后其中 包含的代码中包含的程序员定义的其他 类，则被会被加载到应用程序域； 页面类和应用程序类

14、构成一个类集合（Classes） 页面类实例化之后，进行对浏览器的页面响应,49,单文件页面模型示例,案例名称：ASP.NET的文件结构 程序名称：hello.aspx string strMessage = 早上好！; void Page_Load(Object sender,EventArgs e) Message1.Text = strMessage;,50,ASP .NET的网页代码模型,2.代码隐藏页模型（CodeBehind） 将事务处理代码都发在cs文件中 当ASP .NET网页运行的时候，ASP .NET类生成的过程中会先处理cs文件中的代码，然后再处理.aspx页面中的代码

15、代码隐藏（代码分离）的好处： 明确任务分工。可以由美工人员设计.aspx页面，而页面的主要逻辑(.cs部分)由程序员来完成 方便代码和页面维护,51,ASP.NET文件的结构（代码隐藏,案例名称：ASP.NET的文件结构 程序名称：hellocb.aspx,52,案例名称：基于CodeBehind技术的ASP.NET的文件结构 程序名称：hellocb.cs using System; using System.Data; using System.Configuration; using System.Collections; using System.Web; using System.W

16、eb.Security; using System.Web.UI; using System.Web.UI.HtmlControls; using System.Web.UI.WebControls; using System.Web.UI.WebControls.WebParts; public partial class Hello : System.Web.UI.Page protected void Page_Load(object sender, EventArgs e) Message1.Text = “早上好”;,53,代码隐藏模型,隐藏模型下的ASP .NET代码运行示例图,S

17、ystem.Web.UI.Page,cs页面生成的类,classes,aspx页面生成的类,页面,cs文件中的代码首先被编译， 然后.aspx页面被编译并生成页面对应的类， .aspx页面对应的类与cs文件中的类协调并 生成新的类， 最后，这些类合起来，用来进行客户端页面 的呈现,54,ASP.NET页面的生命周期,在ASP .NET页面运行的时候，也与类对象一样，有着自己的生命周期 在ASP .NET页面的生命周期内，它将执行一系列的步骤，包括 控件的初始化、实例化 还原页面状态 维护页面状态 通过IIS，向客户端呈现HTML,55,ASP.NET页面的生命周期,ASP .NET生命周期中的

18、几个重要阶段 页请求。当用户请求一个页面时，ASP .NET决定是否需要分析和编译所请求的页面 开始。确定请求属性，根据请求是发回请求还是新的客户端请求，并设置IsPostBack属性。 初始化。对页面所使用的服务器空间进行初始化。 加载。页面加载控件。 验证。调用所有的验证程序控件的Validate方法。 回发事件。 呈现。 下载,56,ASP .NET生命周期中的事件,页面加载事件（Page_PreInit） 只在发生新的客户端请求的时候才执行 用于对页面中的控件进行初始化 页面加载事件Page_Init 与Page_PreInit功能类似 但是，不能保证完全加载各个控件，因为在进行页面回

19、送的时候，Page_Init依然执行所有的代码 页面载入事件Page_Load 在页面加载的时候一定会被执行的事件 可以通过IsPostBack变量来判断当前页面是为相应客户端回发而加载，还是页面被首次访问的时候记载 页面卸载事件Page_Unload 在页面被关闭的时候，会出发Page_Unload事件,57,指令语法 （一,Page指令，定义ASP.NET页分析器和编译器使用的页特定(.aspx文件)属性，只能包含在.aspx文件中。语法形式如下： Import指令，将命名空间显式导入到页中，使所导入的命名空间的所有类和接口可用于该页。语法形式如下：,58,指令语法 （二,Control指

20、令，定义ASP.NET页分析器和编译器使用的控件特定属性，只能包含在.ascx文件（用户控件）中。语法形式如下： Register指令，将别名与命名空间及类名关联起来，以便在自定义服务器控件语法中使用简明的表示法。语法形式如下：,59,ASP.NET的内部对象,60,Response对象,Response对象处理来自服务器端所创建的并发回给客户端的信息。它与Request对象实现了浏览器和服务器的交互。Response对象实际上操作System.Web命名空间中的HTTPResponse对象的实例，HTTPResponse类封装来自ASP.NET操作的HTTP响应信息,61,62,63,Res

21、ponse对象,Buffer属性 Response. Buffer=flag，Buffer属性表示是否对页面输出进行缓冲。如有缓冲，服务器在当前处理的所有页面上的语句被处理之前不将Response送往客户端，除非有flush或end方法被调用。参数flag表示是否对页面输出进行缓冲，True为需要，False表示否，系统默认为True，而Response.Clear()常用于清除缓冲区中的所有内容。（例,64,Response对象,Wirte方法 Write方法输出指定的文本内容，例如：Response.Write（“欢迎光临！”），该方法在前面的例子中已经用到很多，这里不再详细解释。但要注意

22、，在ASP中Response.Write “欢迎光临！”是被允许的，但在ASP.NET中必须有括号框住，否则会出错,65,Response对象,Redirect方法 该方法可以将用户的页面重定向到一个新的页面，使用时只要传入一个字符串类型的地址即可，传入在网址后附加参数的地址字符串也可以。该在实现页面转移的过程中很有用。例如：Response.Redirect(“http:/”)；当然在转向的新页面也可以为相对路径的表示,66,网页转向,案例名称：简化版Response.Redirect 程序名称：test.aspx,67,Request对象,Request对象实际上操作System.Web命

23、名空间中的类HttpRequest。当客户发出请求执行ASP.NET程序时，CLR会将客户端的请求信息包装在Request对象中。这些请求信息包括请求报头（Header）、客户端的基本信息（如浏览器类型、浏览器版本号、用户所用的语言以及编码方式等）、请求方法（如Post、GET）、参数名、参数值等。所以Request对象也被称为请求对象,68,Request对象,69,Request对象,Request对象的调用方法是： Request.Collection“Varible”，其中，Collection包括Querystring、Form、Cookies、ServerVariables四种集合

24、,70,Request对象,Querystring属性 请求字符串Web浏览器向Web服务器传送信息的一种方式，Querystring属性的信息来自于发出请求的URL地址中“？”后面的数据，这些数据称为“URL附加信息”。例如http:/localhost/Queststringtest/webform1.aspx?name=wang”,在该URL中，name=wang是浏览器向Web服务器传送的信息，获取这个信息的语句是： Request.Querystring“name”。 Querystring主要用于收集HTTP协议中的GET请求发送的数据，如果在一个请求事件中被请求的程序URL地址出

25、现了“?”后的数据，则表示此次请求方式为GET。GET方法是HTTP中默认请求方法最常用的超文本链接便是通过GET方法发送请求。如： 则表示显示ID为111的文章。当有多个信息时，信息间用“ Response.Write(“”); Response.Write(hello world;(你好！); ,75,ASP .NET控件简介,ASP .NET的设计的基本理念之一是：将Web页面上的所有界面元素都做成控件形式 每一种控件被封装成为一种对象,76,控件的类别,控件的类型 HTML服务器控件 Web服务器控件 验证控件 用户控件,77,控件类型1：HTML服务器控件,这一类控件是主要是为了保留

26、原来的HTML元素标记。一般和原来的HTML标记一一对应，只是增加了runat=“server”。 常见的有：HtmlForm, HtmlButton, HtmlInputButton, HtmlInputCheckBox, HtmlInputRadioButton, HtmlInputText, HtmlSelect, HtmlTextArea (快速示例中有全部控件示例） http:/,78,HtmlForm（Web表单,它其实就是一个容器，用来盛放其它表单控件。,79,HtmlInputText（单行文本框和密码框,80,HtmlTextArea（多行文本框,81,在这里，与客户端脚本的

27、工作方式不同，当用户完成输入后，输入会被传送到Server端，出发相应Server端控件处理过程,82,类型2：Web服务器控件,Web服务器控件： 用来定义Web应用程序用户界面的空间，会依据Client的情况产生一个或多个Html控件？ 基本与HTML服务器控件一一对应，但是功能更强,83,Button控件的例子：,84,Web服务器控件简介,Web服务器控件使用“asp:”作为前缀说明标志，“/”作为结束标志。一般的Web服务器控件具有如下使用形式： 另外，结束符标志也可以为：“”。 服务器控件可分为四类： 内部控件：与HTML服务器空间相对应。 增强控件：可以实现丰富的用户界面和功能。

28、 验证控件：可以实现页面的数据验证功能。 数据列表控件：用于访问页面上的数据流,85,标签控件Label,该控件在Web窗体页上显示静态文本并使您可以通过编程方式对其进行操作。 Label控件的语法形式如下： 或者： Text,86,按钮控件Button、LinkButton和ImageButton （一,普通按钮控件Button，提供了一种通用的单击按钮传递信息的方式，能够把页面信息返回到服务器，它在页面上显示为一个普通按钮。Button控件的语法形式如下：,87,无标题页,88,按钮控件Button、LinkButton和ImageButton （二,链接按钮控件LinkButton，具有

29、超链接外观的按钮控件。LinkButton控件的语法形式如下：,89,按钮控件Button、LinkButton和ImageButton （三,或者： Text,90,按钮控件Button、LinkButton和ImageButton （四,图形按钮控件ImageButton，具有图形外观的按钮。ImageButton控件的语法形式如下：,91,控件TextBox,用于实现网络上的文本输入，创建单行和多行文本框。语法形式如下：,92,选择类控件,复选框控件CheckBox 复选列表框控件CheckBoxList 下拉列表框控件DropDownList 列表控件ListBox 单选按钮控件Rad

30、ioButton 单选按钮列表框控件RadioButtonList,93,下拉列表框控件DropDownList,使用户可以从单一选择下拉列表中进行选择，列表可以包含任意数目的项。语法形式如下： DataTextField=DataSourceField DataValueField=DataSourceField AutoPostBack=True|False OnSelectedIndexChanged=OnSelectedIndexChangedMethod Text,94,列表控件ListBox,用于创建单选或多选列表框。ListBox控件的语法形式如下： DataTextField=

31、DataSourceField DataValueField=DataSourceField AutoPostBack=True|False Rows=rowcount SelectionMode=Single|Multiple OnSelectedIndexChanged=OnSelectedIndexChangedMethod runat=server Text,95,复选框控件CheckBox,在Web窗体页上创建复选框，该复选框允许用户在true或false状态之间切换。通过设置Text属性可以指定要在控件中显示的标题。标题可显示在复选框的右侧或左侧。设置TextAlign属性以指定标

32、题显示在哪一侧。语法形式如下：,96,复选列表框控件CheckBoxList,创建多选复选框组，此控件支持绑定到数据源。语法形式如下： DataTextField=DataSourceField DataValueField=DataSourceField RepeatColumns=ColumnCount RepeatDirection=Vertical|Horizontal RepeatLayout=Flow|Table TextAlign=Right|Left OnSelectedIndexChanged=OnSelectedIndexChangedMethod runat=server

33、 Text,97,单选按钮控件RadioButton,在页上创建一个单选按钮，可将多个单选按钮分为一组以提供一组互相排斥的选项。语法形式如下：,98,单选按钮列表框控件RadioButtonList,创建一组单选按钮，此控件支持绑定到数据源。语法形式如下： DataTextField=DataSourceField DataValueField=DataSourceField RepeatColumns=ColumnCount RepeatDirection=Vertical|Horizontal RepeatLayout=Flow|Table TextAlign=Right|Left OnSelectedIndexChanged=OnSelectedIndexChangedMethod runat=server,99,超链接控件HyperLink,在页上创建一个链接，用户可以单击它以移动到其他页。语法形式如下： 或者 Text,100,容器类控件,面板控件Panel 表格控件Table、表格行控件TableRow和表格单元控件TableCell,101,面板控件Panel,作为其他控件的容器，它对于以编程方式生成控件以及显示和隐藏控件组尤其有用，此控件作为HTML元素呈现。语法形式如下： (别的