第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窗体页的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的后面 指定方式： 在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与POST缺点 在HTML页中，不论是使用GET还是POST，如果开发人员希望客户端发出请求后，服务器将处理结果再返回到发出请求的页面，每次都考虑用GET还是POST非常繁琐。 在Web窗体中使用ASP.NET Web服务器控件（前缀为“asp:”的控件）， 简化了页面设计的复杂度 显著提高了Web应用程序开发的效率。,2019年5月24日星期五,7,6.1 基于事件的编程模型,Web窗体页的往返机制 ASP.NET的Web窗体页是在服务器上运行的，要使页面中的按钮或其他内容得到处理，必须将这些信息提交到服务器。每次页面提交时，都会再次运行其服务器端代码，然后向用户呈现新的页面，基本处理过程如下： 用户通过客户端浏览器请求页面，页面第一次运行。程序员可以通过在Page_load事件中编写代码对页面进行初步处理，例如初始化页面等。 服务器将代码转换为能被客户端识别的HTML标记发送到客户端，客户端浏览器对HTML进行解析并将其显示出来。 用户通过界面进行各种操作。例如单击某个按钮等。此时浏览器将页面再次发送到Web服务器，在ASP.NET中称该过程为“PostBack”，也叫“回发”。例如用户正在访问的页面是,2019年5月24日星期五,8,6.1 基于事件的编程模型,Default.aspx，当用户单击该页面上的某个按钮后，浏览器发送到服 务器的目标还是Default.aspx。“PostBack”相当于在Web服务器上再次加载该页面，并能在页面上获取用户操作的信息。如果用户单击的是超链接而不是按钮，服务器可能仅仅将其定位到另一个页面，而不会对包含超链接的页面做进一步处理。 服务器执行代码隐藏类中的代码（简称为后台代码），处理指定的操作，然后将执行操作后的页面返回给客户端浏览器。 从基本处理过程可以看出，由于页面处理发生在Web服务器上，因此页面可以执行的每个操作都需要一次“客户端服务器客户端”的往返行程。,2019年5月24日星期五,9,6.1 基于事件的编程模型,Web窗体页的生存期,2019年5月24日星期五,10,6.1 基于事件的编程模型,母版页和使用母版页的Web窗体页 定义： 母版页是指只能被其他Web窗体页作为模板来引用无法单独在浏览器中显示、扩展名为.master的特殊网页。 相同点： 母版页和普通的Web窗体页一样也具有一个与其对应的代码隐藏页面， 不同点 母版页的第1行用特殊的Master指令标识，而普通网页则采用Page指令标识。,2019年5月24日星期五,11,6.1 基于事件的编程模型,母版页中，界面被分为公用区和可编辑区。 可编辑区 指可在引用母版页的Web窗体页中编辑的部分，它由一个或多个ContentPlaceHolder占位符控件组成。 ContentPlaceHolder占位符 程序员创建引用母版页的Web窗体页时，ASP.NET会自动将所引用的母版页的ContentPlaceHolder控件预留的可编辑区替换为该控件的实例。 母版页和Web窗体内容页的创建方法 演示创建母版页的步骤 演示使用模板页的步骤,2019年5月24日星期五,12,6.1 基于事件的编程模型,主题和外观 主题 ASP.NET提供了两大类型的主题， 应用程序主题，保存在App_Themes文件夹下的主题文件夹。 全局主题。 演示创建主题的基本步骤,2019年5月24日星期五,13,6.1 基于事件的编程模型,外观 定义： 外观是指保存在主题文件夹下创建的扩展名为.skin的文件中定义的Web服务器控件的属性设置的集合。 分类： 在.skin文件中，有两种定义的控件外观的方式，分别为“默认外观”和“已命名外观”。当向页应用主题时，默认外观自动应用于同一类型的所有控件。如果控件外观没有SkinID特性，则是默认外观,2019年5月24日星期五,14,6.2 界面交互控件的分类,表单（form） HTML的form标记实际上是一个容器，用于通过客户端浏览器和用户的输入进行交互。 例如 用户输入的信息可以在和之间用提交按钮以及其他输入框来实现，当用户填写完信息后，单击提交按钮，即将表单内包含的内容传送到服务器，然后由服务器根据用户的输入进行相应处理，处理后再将结果返回给客户端。,2019年5月24日星期五,15,6.2 界面交互控件的分类,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 Web服务器控件，都必须将其包含在和之间。,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服务器控件，该控件的各种特性就会在代码隐藏类中被自动公开为可以用C#对其进行操作的属性。,2019年5月24日星期五,18,6.2 界面交互控件的分类,Web服务器控件 什么情况下使用Web服务器控件 当进行复杂的页面设计时，因为Web服务器控件具有比HTML元素更多的内置功能。例如导航、验证、动态数据显示、AJAX、WebParts以及数据和报表处理等。 当需要在客户端动态地响应用户鼠标移动、键盘输入等交互性比较频繁的操作时，由于这些操作实时性要求比较强，不适合每个动作都在服务器端处理，可以使用ASP.NET AJAX对服务器控件进行扩展，利用JavaScript和jQuery在客户端响应用户的操作。,2019年5月24日星期五,19,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绑定，其作用是当用户单击该标记的内容时，光标焦点就会自动定位到它所绑定的控件上。 button标记 用type特性指定是哪类按钮，取值有： type=“reset“：重置按钮，单击该按钮可将表单中的内容全部清除 type=“submit“：提交按钮，单击该按钮可以将表单中的内容提交到form元素的action特性指定的URL地址中。 type=“button“：普通按钮，单击该按钮会自动触发onclick事件。,2019年5月24日星期五,21,6.3 HTML控件的基本用法,button标记： 特殊用法：可以包含元素内容，所以可用它来实现一些特殊的功能，比如同时显示图像和文字： 修改姓名 注意 由于不同的浏览器对button标记的默认type类型并不完全相同，所以使用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日星期五,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控件的基本用法,单选