《HTML5与ASP.NET程序设计教程 第2版 教学课件 ppt 作者 马骏 第06章 Web窗体与基本控件》由会员分享，可在线阅读，更多相关《HTML5与ASP.NET程序设计教程 第2版 教学课件 ppt 作者 马骏 第06章 Web窗体与基本控件（55页珍藏版）》请在金锄头文库上搜索。
1、第6章 Web窗体与 基本控件,2019年5月24日星期五,2,Ch6 Web窗体与基本控件,6.1 基于事件的编程模型 6.2 界面交互控件的分类 6.3 HTML控件的基本用法 6.4 基本Web服务器控件 6.5 ASP.NET内置对象与状态管理 6.6 页面切换与页间数据传递 6.7 用户控件,6.1 基于事件的编程模型,Web窗体页 Web窗体页的组成及特征，一个Web窗体默认由两个文件组成 扩展名为.aspx的页面描述文件，称为代码隐藏页 扩展名为.aspx.cs的文件，该文件对应的类称为代码隐藏类。 代码隐藏类作用 所有代码隐藏文件都会自动被编译为.dll文件。 当用户请求Web
2、窗体页的URL时，ASP.NET将在服务器上调用对应的.dll文件，并动态地生成HTML页面输出到客户端，供浏览器解析和显示 新建Web窗体页，观察窗体组成及Page指令,2019年5月24日星期五,3,6.1 基于事件的编程模型,在客户端向服务器发送信息的过程中，提交方式有 GET： 将数据附加在URL的后面用显式方式提交 POST： 将数据包含在文件头中用隐式方式提交 默认采用POST方式提交数据,2019年5月24日星期五,4,6.1 基于事件的编程模型,GET方式 通过URL请求来传递用户请求的数据，将表单内各字段名称及其内容，以字符串的形式放在向服务器提交的URL的后面 指定方式：
3、在form的开始标记内指定method=“get“。 注意： 如果URL后有参数，该URL和其后面的参数信息也会在浏览器的地址栏中显示出来。,2019年5月24日星期五,5,6.1 基于事件的编程模型,POST方式 POST方式将表单内各字段名称及其内容放置在HTML的头文件内传送给服务器 ASP.NET Web窗体页默认使用的方式。 当客户端使用POST方式向服务器提交数据时，如果页面元素没有runat=“server“声明，则服务器只能通过Request.Form来获取提交的内容。,2019年5月24日星期五,6,6.1 基于事件的编程模型,Web窗体页对GET和POST的封装 GET与P
4、OST缺点 在HTML页中，不论是使用GET还是POST，如果开发人员希望客户端发出请求后，服务器将处理结果再返回到发出请求的页面，每次都考虑用GET还是POST非常繁琐。 在Web窗体中使用ASP.NET Web服务器控件（前缀为“asp:”的控件）， 简化了页面设计的复杂度 显著提高了Web应用程序开发的效率。,2019年5月24日星期五,7,6.1 基于事件的编程模型,Web窗体页的往返机制 ASP.NET的Web窗体页是在服务器上运行的，要使页面中的按钮或其他内容得到处理，必须将这些信息提交到服务器。每次页面提交时，都会再次运行其服务器端代码，然后向用户呈现新的页面，基本处理过程如下：
5、 用户通过客户端浏览器请求页面，页面第一次运行。程序员可以通过在Page_load事件中编写代码对页面进行初步处理，例如初始化页面等。 服务器将代码转换为能被客户端识别的HTML标记发送到客户端，客户端浏览器对HTML进行解析并将其显示出来。 用户通过界面进行各种操作。例如单击某个按钮等。此时浏览器将页面再次发送到Web服务器，在ASP.NET中称该过程为“PostBack”，也叫“回发”。例如用户正在访问的页面是,2019年5月24日星期五,8,6.1 基于事件的编程模型,Default.aspx，当用户单击该页面上的某个按钮后，浏览器发送到服 务器的目标还是Default.aspx。“Po
6、stBack”相当于在Web服务器上再次加载该页面，并能在页面上获取用户操作的信息。如果用户单击的是超链接而不是按钮，服务器可能仅仅将其定位到另一个页面，而不会对包含超链接的页面做进一步处理。 服务器执行代码隐藏类中的代码（简称为后台代码），处理指定的操作，然后将执行操作后的页面返回给客户端浏览器。 从基本处理过程可以看出，由于页面处理发生在Web服务器上，因此页面可以执行的每个操作都需要一次“客户端服务器客户端”的往返行程。,2019年5月24日星期五,9,6.1 基于事件的编程模型,Web窗体页的生存期,2019年5月24日星期五,10,6.1 基于事件的编程模型,母版页和使用母版页的We
7、b窗体页 定义： 母版页是指只能被其他Web窗体页作为模板来引用无法单独在浏览器中显示、扩展名为.master的特殊网页。 相同点： 母版页和普通的Web窗体页一样也具有一个与其对应的代码隐藏页面， 不同点 母版页的第1行用特殊的Master指令标识，而普通网页则采用Page指令标识。,2019年5月24日星期五,11,6.1 基于事件的编程模型,母版页中，界面被分为公用区和可编辑区。 可编辑区 指可在引用母版页的Web窗体页中编辑的部分，它由一个或多个ContentPlaceHolder占位符控件组成。 ContentPlaceHolder占位符 程序员创建引用母版页的Web窗体页时，ASP
8、.NET会自动将所引用的母版页的ContentPlaceHolder控件预留的可编辑区替换为该控件的实例。 母版页和Web窗体内容页的创建方法 演示创建母版页的步骤 演示使用模板页的步骤,2019年5月24日星期五,12,6.1 基于事件的编程模型,主题和外观 主题 ASP.NET提供了两大类型的主题， 应用程序主题，保存在App_Themes文件夹下的主题文件夹。 全局主题。 演示创建主题的基本步骤,2019年5月24日星期五,13,6.1 基于事件的编程模型,外观 定义： 外观是指保存在主题文件夹下创建的扩展名为.skin的文件中定义的Web服务器控件的属性设置的集合。 分类： 在.ski
9、n文件中，有两种定义的控件外观的方式，分别为“默认外观”和“已命名外观”。当向页应用主题时，默认外观自动应用于同一类型的所有控件。如果控件外观没有SkinID特性，则是默认外观,2019年5月24日星期五,14,6.2 界面交互控件的分类,表单（form） HTML的form标记实际上是一个容器，用于通过客户端浏览器和用户的输入进行交互。 例如 用户输入的信息可以在和之间用提交按钮以及其他输入框来实现，当用户填写完信息后，单击提交按钮，即将表单内包含的内容传送到服务器，然后由服务器根据用户的输入进行相应处理，处理后再将结果返回给客户端。,2019年5月24日星期五,15,6.2 界面交互控件的
10、分类,HTML控件 HTML控件是指基于HTML标记的控件。在HTML中，一般通过form表单中的input标记来实现与用户的交互。例如： 演示代码编写方式添加HTML控件的方法 演示设计视图添加HTML控件的方法,2019年5月24日星期五,16,6.2 界面交互控件的分类,HTML服务器控件 将HTML元素转换为HTML服务器控件 任何一个HTML元素，不论其是否在form块内，只要在元素的开始标记内添加id和runat=“server“特性，就能在服务器端用C#代码访问它。例如： 但是这里要注意，对于和用户输入有关的控件，如果需要在服务器端处理，不论是HTML控件还是ASP.NET We
11、b服务器控件，都必须将其包含在和之间。,2019年5月24日星期五,17,6.2 界面交互控件的分类,在代码隐藏类中使用C#动态控制页面中的HTML元素 将HTML控件转化为HTML服务器控件后，便可以直接在隐藏代码类中利用控件的id直接获取HTML对象。 例如HTML代码为： 在代码隐藏类中，HTML的id特性的值被自动封装为属性，因此程序员可以通过age属性修改输入文本框控件的Value值： this.age.Value = “20“; HTML服务器控件共有的属性 网页中的任何一个HTML元素，例如div、p、span等，一旦将其作为HTML服务器控件，该控件的各种特性就会在代码隐藏类中
12、被自动公开为可以用C#对其进行操作的属性。,2019年5月24日星期五,18,6.2 界面交互控件的分类,Web服务器控件 什么情况下使用Web服务器控件 当进行复杂的页面设计时，因为Web服务器控件具有比HTML元素更多的内置功能。例如导航、验证、动态数据显示、AJAX、WebParts以及数据和报表处理等。 当需要在客户端动态地响应用户鼠标移动、键盘输入等交互性比较频繁的操作时，由于这些操作实时性要求比较强，不适合每个动作都在服务器端处理，可以使用ASP.NET AJAX对服务器控件进行扩展，利用JavaScript和jQuery在客户端响应用户的操作。,2019年5月24日星期五,19,
13、6.2 界面交互控件的分类,注意 Web服务器控件与HTML服务器控件相比更为抽象，其对象模型和HTML元素不一定有一对一的关系。 所有ASP.NET Web服务器控件全部都带有“asp:”前缀。 为了区分客户端控件和服务器控件，默认情况下，VS2010自动生成的HTML控件的id一律用小写字母“id”来表示，Web服务器控件的id一律用大写字母“ID”来表示。,2019年5月24日星期五,20,6.3 HTML控件的基本用法,label标记 用于为表单控件定义显示的内容，其内容一般是文本，但是也可以包含其他标记。 for特性，用于和其他元素的id绑定，其作用是当用户单击该标记的内容时，光标焦
14、点就会自动定位到它所绑定的控件上。 button标记 用type特性指定是哪类按钮，取值有： type=“reset“：重置按钮，单击该按钮可将表单中的内容全部清除 type=“submit“：提交按钮，单击该按钮可以将表单中的内容提交到form元素的action特性指定的URL地址中。 type=“button“：普通按钮，单击该按钮会自动触发onclick事件。,2019年5月24日星期五,21,6.3 HTML控件的基本用法,button标记： 特殊用法：可以包含元素内容，所以可用它来实现一些特殊的功能，比如同时显示图像和文字： 修改姓名 注意 由于不同的浏览器对button标记的默认t
15、ype类型并不完全相同，所以使用button标记来表示按钮时，一定要指定其type特性，否则有可能得不到预期的结果。,2019年5月24日星期五,22,6.3 HTML控件的基本用法,input标记 按钮 input标记利用type特性指定是哪类按钮，其取值和button标记的type取值相同，即type=“reset“表示重置按钮，type=“submit“表示提交按钮，type=“button“表示普通按钮。例如： 文本框及密码框（input、textarea） 单行文本框 当input标记的type=“text“时，表示控件为单行文本输入框。 例如：用户名：,2019年5月24日星期五,
16、23,6.3 HTML控件的基本用法,密码框 当input标记的type=“password“时，表示该标记为密码输入框。密码输入框与单行文本输入框的功能基本一致，不同的是当用户输入密码时，密码框中的文本显示的是同一个字符。 例如： 多行文本框 在HTML中，用textarea标记表示多行文本域，用于多行文本输入。 例如： ,2019年5月24日星期五,24,6.3 HTML控件的基本用法,列表和下拉列表（select、option） HTML的select标记和option标记配合使用，可以用来定义列表项。例如： 请选择专业： 计算机科学与技术 网络工程 软件工程 ,2019年5月24日星期五,25,6.3 HTML控件的基本用法,容器（div、fieldset、legend） 容器的用途是可以方便地控制多个元素，例如只需要控制容器的显示和隐藏，就能控制该容器所包含的所有元素全部显示或不显示。 在客户端实现中，一般使用div作为容器，也可以用fieldset作为容器，例如： 个人信息 姓名： 地址： ,2019年5月24日星期五,26,6.3 HTML控件的基本用法,单选
