第第6 6章章 窗体与数据显示控件窗体与数据显示控件 ASP.NET的的Web窗体提供了大量的数窗体提供了大量的数据显示处理控件，其中最重要的有据显示处理控件，其中最重要的有3种，即种，即GridView控件、控件、DataList控件和控件和Repeater控件。控件。 Web窗体是窗体是ASP.NETASP.NET的重要组成部分的重要组成部分, ,是是ASP.NETASP.NET开发的核心。特点：开发的核心。特点： 为客户端引入了为客户端引入了HTMLHTML编程编程的新模式的新模式 为服务器端引入了为服务器端引入了控件事件处理控件事件处理的模式的模式 整个编程环境提供了类似窗体编程的处理整个编程环境提供了类似窗体编程的处理模式。模式。 Web窗体包含传统网页设计的所有处理方窗体包含传统网页设计的所有处理方式，同时提供了不同于传统意义上的式，同时提供了不同于传统意义上的网网页页设计的方式，引入了用户控件和服务器控设计的方式，引入了用户控件和服务器控件等传统件等传统窗体处理模式窗体处理模式6.1Web窗体窗体 Web窗体加入了窗体加入了新的指令新的指令和和新的可重用选新的可重用选项项，以及，以及新的服务器端数据绑定语法新的服务器端数据绑定语法等。等。一、一、Web窗体文件构成：窗体文件构成： .aspx的的文文本本文文件件：包包含含所所有有HTML的的标记符符号号和和相相关关指指令令代代码等等，该文文件件必必须存存在。在。 在在集集成成编辑环境境中中表表现为文文本本视图（源源）和和可可视化化试图（设计）.aspx.cs 的的程程序序代代码：包包含含页面面类的的所所有有申申明明和和事事件件处理理代代码。（该文文件件内内容容可可以以内嵌在内嵌在aspx文件中）文件中） 6.1.1页面组成及元素页面组成及元素 Default.aspx文文件件代代码码中中出出现现了了ASP.NET页面中很多的元素，包括页面中很多的元素，包括: : 服务器端注释服务器端注释 指令指令 静态静态HTML代码代码 服务器控件服务器控件 自定义服务器控件自定义服务器控件 用户控件用户控件2、页面元素、页面元素2页面元素页面元素元素说明服务器端注释服务器端注释网页页面中的描述性文本网页页面中的描述性文本语法格式：语法格式：指令指令用来定义控制页面处理的信息的代码用来定义控制页面处理的信息的代码如如:page静态静态HTML代码代码标准的标准的HTML标记元素标记元素服务器控件服务器控件ASP.NET提供的一组控件提供的一组控件,实现用户与服务器的实现用户与服务器的交互处理交互处理如：如：自定义服务器控件自定义服务器控件在类文件中定义，并编译为托管程序集在类文件中定义，并编译为托管程序集用户控件用户控件用户编写的自定义控件用户编写的自定义控件 ASP.NET的的窗窗体体模模型型提提供供了了用用户户与与服服务务器器端端交交互互的的模模式式，用用户户可可以以通通过过控控件件与与服服务务器器端端的的交交互互完完成成程程序序的的执执行行，这这些些程程序序的的执执行行依依靠靠Web应应用用程程序序的回发特性完成。的回发特性完成。 第第一一次次执执行行ASP.NET的的页页面面时时，页页面面内内的的代代码码会会被被编编译译成成从从Page基基类类继继承承来来的的类类，编编译译完完成成之之后后，类类将将被被执执行行，生生成成可可识识别别的的HTML标标志志流流回回传传客客户户端端,HTML标标记记的的效效果果将将显显示示在在浏浏览览器器上上，然然后后类类将将被被从内存中删除从内存中删除。 每个每个ASP.NET的的Web窗体都包含一个窗体都包含一个标标记，当用户提交一个窗体后，该标记将指示页面记，当用户提交一个窗体后，该标记将指示页面回回发发给自己。给自己。 为了在页面请求之间维持状态，为了在页面请求之间维持状态，ASP.NET运行运行库也为库也为隐藏窗体字段隐藏窗体字段提供了相应的功能。提供了相应的功能。6.1.2页面生存周期页面生存周期 当页面被处理完成并且输出到浏览器后，页面当页面被处理完成并且输出到浏览器后，页面以及其控件立即被卸载，这个过程如下：以及其控件立即被卸载，这个过程如下： （1）用户通过浏览器）用户通过浏览器请求页面请求页面(http)。 （2）加载并）加载并初始化页面和控件初始化页面和控件。 （3）如如果果请请求求的的页页面面是是回回发发的的结结果果，控控件件状状态态从从视图状态加载视图状态加载，并应用用户提交的任何改变。，并应用用户提交的任何改变。 （4）页页面面事事件件处处理理程程序序和和用用于于用用户户操操作作触触发发事事件件的事件处理程序被执行。的事件处理程序被执行。 （5）将控件状态保存到视图状态中。）将控件状态保存到视图状态中。 （6）将页面的）将页面的HTML输出到浏览器中。输出到浏览器中。 （7）卸载页面和控件。）卸载页面和控件。6.1.2页面生存周期页面生存周期 在在ASP中中使使用用了了少少量量的的指指令令，这这些些指指令令在在ASP.NET中中不不但但被被保保留留，而而且且增增加加了了很很多多属属性性，除除此此之之外外，ASP.NET还还增增加加了了新新的的指指令令，这这些些指指令令包包括括控控制制页页面面行行为为和和配配置到缓存输出等。置到缓存输出等。例如例如:6.1.3Page指令：页面专有属性指令：页面专有属性1.Page指令的属性指令的属性 1.Page指令的属性指令的属性 页面跟踪启用之后，将调试语句直接写入页的输出中，并且有条件地运行调试代码。可以按照如下语法设置启用页面跟踪：也可以使用Page指令的TraceMode属性，对跟踪语句按照类别的组织。2.Page指令的跟踪属性指令的跟踪属性 例例: :protected void Button1_Click(object sender,EventArgs e)int i = 10, j, k; /声明声明3个整数变量个整数变量/为整数为整数j赋值赋值j = Int32.Parse(tbComputer.Text); /为整数为整数k赋值赋值k = i / j;Response.Write(k); /输出整数输出整数k的值的值在默认情况下，该属性默认为在默认情况下，该属性默认为SortByTime，如下：如下： 页声明页声明Trace属性用于将语句输出调试到页输出。在属性用于将语句输出调试到页输出。在启用了跟踪语句后，可以使用启用了跟踪语句后，可以使用Trace.Write和和Trace.Warn方法写到调试语句，但是两种方法都采用消息字符串或者方法写到调试语句，但是两种方法都采用消息字符串或者类别和消息字符串，其中类别和消息字符串，其中Trace.Warm是以红色的字符串是以红色的字符串输出。输出。Import指令用于向页面导入指令用于向页面导入.NET框架命名框架命名的命名空间或者自定义空间。导入命名空的命名空间或者自定义空间。导入命名空间之后，在代码中就不再显式地使用命名间之后，在代码中就不再显式地使用命名空间的全名了。空间的全名了。Import指令只有指令只有Namespace一个属性，这个属性指定要导入一个属性，这个属性指定要导入的命名空间。的命名空间。ImportImport指令的语法如下：指令的语法如下：% Import Namespace=% 6.1.4Import指令，导入指令指令，导入指令 Assembly指令用于在编译时将程序集链接指令用于在编译时将程序集链接到页面中，这使得开发人员可以使用程序集到页面中，这使得开发人员可以使用程序集公开的所有类和方法等。公开的所有类和方法等。 在链接应用程序在链接应用程序bin子目录时不需要使用子目录时不需要使用Assembly指令。这些程序集会根据指令。这些程序集会根据Machine.config配置文件中的配置文件中的自自动链接。动链接。6.1.5Assembly指令：程序集链接指令：程序集链接6.2DataBind技术技术绑定属性 绑定到集合绑定表达式或者函数 数据绑定 DataBind是一种全新的技术，通过它可以将程序中的执行数据与页中的属性、集合、表达式以及函数结果“绑定”(binding)在一起。换句话说，只要程序中相应的数据发生变化,那么这些与数据“绑定”在一起的属性、集合、表达式以及函数结果的值就会随之改变。数据绑定数据绑定几乎可以把任何类型的数据绑定到ASP.NET页面中的任何控件或其属性中，可以完全控制数据库和页面之间的移动。可以把数据显示给用户、设置控件上的样式属性，或让用户直接修改数据库。简单绑定：使用数据表达式使用数据表达式复杂绑定：使用控件的使用控件的DataSource绑定数据绑定数据库内容库内容。数据绑定数据绑定 从上面的例子可以看出，绑定的数据包含在，标签之内,这与标签有些相似，千万不要以为它们的“样子”差不多就认为它们的功能也是一样的，与之间的差别非常大。 之间的代码将会被直接执行之间的代码将会被直接执行之间包含的代码之间包含的代码,仅仅在仅仅在DataBind()方法方法调用后，才会被执行。调用后，才会被执行。Page以及所有以及所有Server控件都控件都拥有拥有DataBind万法。万法。1 绑定属性ASP.NET数据绑定语法支持绑定到共有变量、页面上定义的属性对象以及页面上其他控件的属性。 绑定到属性的语法是： 绑定属性 绑定数据到属性绑定数据到属性public string name=刘涛刘涛;public int age = 25;void Page_Load(object sender, System.EventArgs e) Page.DataBind(); 绑定属性 绑定数据到属性示例绑定数据到属性示例 姓名：姓名： 年龄：年龄： 城市：城市：asp:Label id=Label1 text= runat=server / 请输入城市：请输入城市： 2 绑定表达式或者函数在很多情况下，需要在数据绑定到控件之前对数据本身进行一些处理，此时程序可以将数据交给事先定义的函数处理，然后再返回。 绑定到表达式的语法是： 3 绑定到集合列表类的服务器控件，如数据列表控件、下拉列表框控件等可以使用一个集合作为数据源。绑定的集合有: ArrayList(数组) HashTable(哈希表) DataView(数据视图) DataReader(数据访问器)绑定表达式或者函数ArrayListarray=newArrayList();voidPage_Load(objectsender,System.EventArgse)array.Add(中国中国);array.Add(韩国韩国);array.Add(英国英国);array.Add(法国法国);myDataList.DataSource=array;myDataList.DataBind();stringShow(stringstrCountry)if(strCountry=中国中国|strCountry=韩国韩国)return亚洲亚洲;elsereturn欧洲欧洲;绑定表达式或者函数数据绑定到函数或表达式示例数据绑定到函数或表达式示例国家：国家：属于：属于： 在在ASP.NET1.1中，微软为中，微软为.NET开发人员提开发人员提供了一种新的服务器控件，即供了一种新的服务器控件，即DataGrid控件。控件。该控件能够独立地显示数据源中的数据，并且该控件能够独立地显示数据源中的数据，并且能进行在线编辑、数据排序和分页等工作。能进行在线编辑、数据排序和分页等工作。 经过长期的实践和设计后，微软在经过长期的实践和设计后，微软在ASP.NET ASP.NET 2.02.0中正式推出了中正式推出了GridViewGridView控件。控件。6.3 GridView控件控件 GridViewGridView控件以表格形式布局显示数据。在默认情况下， GridViewGridView以只读模式只读模式显示数据，也能够在运行时自动在可编辑可编辑控件中显示数据。还可通过“属性生成器”对话框创建“选择”、“编辑”、“更新”和“取消”按钮及编程结构。GridViewGridView支持分分页页和和排排序序功功能能，可使用控件的自定义导航功能通过控制发送到客户端浏览器的数据量来提高性能。 6.3.1 GridView控件概述控件概述 6.3.1 GridView控件概述控件概述GridViewGridView有个重要的属性:DataSource属性：最简单地讲，就是一组相同特征的对象或者一个相同对象的集合 Items集合 ：每一个列表绑定控件都有一个Items集合，集合中的每一个Item是DataSource所指定的一个对象 数据绑定列表绑定控件基于ASP.NET框架，需要你明确地进行数据绑定。这就意味着：只有当DataBind方法被调用时，才真正需要提取其DataSource 所代表的数据。当DataBind方法被调用时，列表绑定控件将提取DataSource，创建Items集合，并从DataSource取回数据，以初始化Items集合 6.3.1 GridView控件概述控件概述GridViewGridView控件可用于创建各种样式的表格。它还支持对项目的选择和操作，是最复杂、功能最强大的控件GridViewGridView的AutoGenerateColumns属性缺省是True。 当当 AutoGenerateColumns为为 True时时 ， GridViewGridView将将检检查查其其数数据据源源和和其其对对象象映映射射，并并为为每每一个共有属性或者字段创建一个列一个共有属性或者字段创建一个列。每一个自动产生的列称为一个BoundColumn（绑定列）。绑定列根据其数据表对应列的数据类型，自动将其转化为一个字符串，显示在表格的一个单元中。 数据绑定方法：DataBinder.Eval 、Eval、Bind 1. Eval 方法是静态（只读）方法，该方法采用数据字段的值作为参数并将其作为字符串返回。 DataBinder.Eval(Container.DataItem, IntegerValue, 0:c) 2. Bind 方法支持读/写功能，可以检索数据绑定控件的值并将任何更改提交回数据库。 6.3.1 GridView控件概述控件概述 6.3.2 GridView控件使用控件使用1、GridView控件的基本使用（控件的基本使用（显示数据）示数据）2、GridView控件的属性控件的属性设定定 3、GridView控件的分控件的分页和排序和排序实例分析例分析 已已知知学学生生档档案案信信息息表表,通通过过绑绑定定方方式式显显示示学学生的信息生的信息.操作操作: (1) 学生档案表建立学生档案表建立 (2) 建立查询网页建立查询网页 (3) 配置数据源配置数据源(DataSource) (4) 设置绑定效果设置绑定效果1GridView控件的基本使用（控件的基本使用（显示数据）示数据）(1) 自自动套用格式套用格式(2) 列列(字段字段)的设置的设置 字字段段属属性性的的设设置置(标标题题/宽宽度度/字字体体/颜颜色色/字字号号) 特殊类型字段添加特殊类型字段添加 模版字段的设置模版字段的设置(3) 事件处理事件处理 特定事件处理特定事件处理 自定义事件处理自定义事件处理2GridView控件的属性设定控件的属性设定(1) (1) 分页分页 在在ASP.NET2.0中，使用中，使用SqlDataSource控件进行分控件进行分页是十分容易的事情。页是十分容易的事情。SqlDataSource数据源控件是用数据源控件是用来与数据为打交道的，可以读取数据库中的数据，并可来与数据为打交道的，可以读取数据库中的数据，并可以和以和GridView等控件进行绑定。等控件进行绑定。 如果要对分页时每页显示多少条数据进行显示，则如果要对分页时每页显示多少条数据进行显示，则只需要设置只需要设置GridView的的PageSize属性即可。属性即可。设置设置:AllowPaging=True“PageSize=33 GridView控件的控件的分页和排序分页和排序 有有时时需需要要立立即即返返回回首首页页或或者者前前进进到到最最后后一一页页，为为此此GridView控控件件提提供供了了PagerStyle和和PagerSettings属属性性。PagerStyle属属性性对对显显示示页页数数的的属属性性进进行行设设置置，PagerSettins属属性性则则是是设设置置往往返返页页面面链链接接的的一一些些属属性性，如如链链接接的的文文字字和模式等。和模式等。3 GridView控件的控件的分页和排序分页和排序(2) (2) 排序排序设置: AllowSorting=True“SortExpression=XM3 GridView控件的控件的分页和排序分页和排序6.4 Repeater控件Repeater控件是一种比较实用的Web控件，它通过重复的列表重复的列表来显示数据项。以一种重复清单的方式将数据一行行显示出来，它本身不提供内建的布局和风格，需要开发者自定义模板来实现它的布局和风格。除此之外，它也不具备数据编辑、排序、分不具备数据编辑、排序、分页、选取页、选取的功能。Repeater控件声明一个声明一个Repeater控件的语法形式如下控件的语法形式如下 template content 模板是一种控件，它能够使用HTML标签、文本及其他控件来控制数据的显示。Repeater控件允许在Template中使用HTML片断的。 Repeater控件ItemTemplate： Repeater控件必须使用该模板，它针对每一条记录显示在一行，也可以绑定到其它控件中。AlternatingItemTemplate：与ItemTemplate相同，可以设置隔行样式。HeaderTemplate和FooterTemplate：所有记录的前后显示HTML，典型的是 和SeparatorTemplate：数据记录之间显示间隔符号，如,Repeater控件模模 板板说 明明ItemTemplate为数据源中的数据源中的每一行呈每一行呈现一次的元素一次的元素。若要在。若要在ItemTemplate中中显示数据，示数据，请向向该模板添加一个或多个模板添加一个或多个Web服服务器或器或HTML服服务器控件，并将器控件，并将这些控件些控件绑定到数据源。定到数据源。该模板是模板是必需的必需的AlternatingItemTemplate与与ItemTemplate元素元素类似，但似，但对于于Repeater控件中的行控件中的行每隔每隔一行呈一行呈现一次一次。可以通。可以通过设置置AlternatingItemTemplate元素元素的的样式属性来式属性来为它指定不同的外它指定不同的外观。如果不定。如果不定义该模板，就模板，就使用使用ItemTemplateHeaderTemplate和和FooterTemplate在在呈呈现所有数据所有数据绑定行之前和之后呈定行之前和之后呈现一次的元素一次的元素。例如，。例如，可以通可以通过将开始将开始标记放在放在HeaderTemplate中并将中并将结束束标记放在放在Footer Template中而使中而使HTML表跨表跨整个重复器。如果不定整个重复器。如果不定义，就不，就不显示表示表头或或页脚脚SeparatorTemplate在每行之在每行之间呈呈现的元素，例如分行符的元素，例如分行符(标记)、行、行(标记)或逗号或逗号Repeater控件案例分析连接定义连接定义:#region 连接string Connstr; /连接串Connstr = Provider=SQLOLEDB; +Data Source=ntserver0;User Id=sa;Password=; +Connect Timeout=30;Initial Catalog=MyDb;System.Data.OleDb.OleDbConnection conn;conn = new OleDbConnection (Connstr);conn.Open();/打开连接#endregionRepeater控件案例分析连接定义连接定义:System.Data.OleDb.OleDbCommand Cm;Cm= new OleDbCommand();Cm.Connection =conn;Cm.CommandType=System.Data.CommandType.Text ;Cm.CommandText =select * from XSDAB ;System.Data.OleDb.OleDbDataAdapter Da= new System.Data.OleDb.OleDbDataAdapter(Cm);System.Data.DataSet Ds= new DataSet();Da.Fill(Ds,Dab);this.Repeater1.DataSource =Ds;this.Repeater1.DataMember =Dab;this.Repeater1.DataBind();Repeater控件案例分析ItemTemplate模板:姓名姓名:班级班级：Repeater控件案例分析AlternatingItemTemplate模板:姓名姓名:班级班级：Repeater控件案例分析其它模板:学生档案表开始学生档案表开始学生档案表结束学生档案表结束6.5DataList控件控件它与Repeater类似，不过它具有交互性，允允许用户修改数据许用户修改数据。DataList控件还支持另外两个模板控件：SelectItemTemplate：指定仅当用户选择DataList控件中的项目后才显示的元素，通常用来修改样式属性以反映某记录被选中或扩展诸如层次关系（父子关系）。EditItemTemplate：指定处于编辑模式的样式。DataList控件控件声明DataList控件的语法形式和声明Repeater控件的语法形式很相似，如下所示： template content DataList控件控件模 板说 明SelectItemTemplate如果定义该模板，就提供当前在DataList中选定的项的内容和布局，否则使用ItemTemplateEditItemTemplate如果定义该模板，就提供当前在DataList中编辑的项的内容和布局，否则使用ItemTemplateDataList控件控件类型型名名 称称说 明明属性属性AlternatingItemStyle获取取DataList控件中交替控件中交替项的的样式熟悉式熟悉DataKeyField获取或取或设置由置由DataSource属性指定的数据源中的属性指定的数据源中的键字段字段DataSource获取或取或设置用于填充控件中置用于填充控件中项的源数据的源数据EditItemIndex获取或取或设置置DataList控件中要控件中要编辑的的选定定项的索引号的的索引号的项数数EditItemStyle获取取DataList控件中控件中为进行行编辑而而选定的定的项的的样式属性式属性FooterStyle获取取DataList控件的脚注部分的控件的脚注部分的样式属性式属性HeaderStyle获取取DataList控件的控件的标题部分的部分的样式属性式属性ItemSyle获取取DataList控件中控件中项的的样式属性式属性RepeatColumns获取或取或设置要在置要在DataList控件中控件中显示的列数示的列数RepeatDirection获取或取或设置置DataList控件是垂直控件是垂直显示示还是水平是水平显示示RepeatLayout获取或取或设置控件在表中置控件在表中显示示还是在流布局中是在流布局中显示示SelectIndex获取或取或设置置DataList控件中控件中选定定项的索引的索引SelectItemStyle获取取DataList控件中控件中选定定项的的样式属性式属性SeparatorStyle获取取DataList控件中各控件中各项间分隔符的分隔符的样式属性式属性ShowFooter获取或取或设置一个指示是否在置一个指示是否在DataList控件中控件中显示脚注部分的示脚注部分的值ShowHeader获取或取或设置一个指示是否在置一个指示是否在DataList控件中控件中显示示标题部分的部分的值DataList控件控件类型型名名 称称说 明明方法方法DataBind将控件及其所有子控件将控件及其所有子控件绑定到定到DataSource指定的数据指定的数据源源FindControl在当前的命名容器中搜索指定的服在当前的命名容器中搜索指定的服务器控件器控件事件事件CancelCommand对DataList控件中的某个控件中的某个项单击Cancel按按钮时发生生DeleteCommand对DataList控件中的某个控件中的某个项单击Delete按按钮时发生生EditCommand对DataList控件中的某个控件中的某个项单击Edit按按按按钮发生生ItemCommand当当单击DataList控件中的任一按控件中的任一按钮时发生生ItemCreated当在当在DataList控件中控件中创建建项时在服在服务器上器上发生生ItemDataBound当当项被数据被数据绑定到定到DataList控件控件时发生生SelectedIndexChanged在两次服在两次服务器器发送之送之间，在数据列表控件中，在数据列表控件中选择了不了不同的同的项时发生生UpdateCommand对DataList控件中的某个控件中的某个项单击Update按按按按钮发生生