Ch10数据控件

北京大学出版社 ISBN 978-7-301-13679-9/TP.0956,ISBN 978-7-301-13679-9/TP.0956,*,单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,北京大学出版社 ISBN 978-7-301-13679-9/TP.0956,ISBN 978-7-301-13679-9/TP.0956,*,单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,知识点,ASP.NET动态网页设计案例教程(C#版),1,第10章 数据控件,教学目标,通过本章学习，使学生掌握利用控件连接Access数据库及SQL Server数据库的基本操作方法，熟练掌握数据源的配置。能够通过GridView控件、DetailsView及FormView控件实现数据排序、插入、删除、更新等常见操作，定义模板字段、数据筛选、主从数据等高级操作。 。,2,重点难点,SQL Server数据源的连接与配置,使用模板列,数据的插入、删除、修改,利用图像控件将记录中的图像路径字段显示为图像。,主从数据的使用方法,3,10.1,数据源控件与数据绑定控件概述,ASP.NET页面中使用数据需要两种控件：数据源控件，提供页面和数据源之间的数据通道；数据绑定控件，则在页面上显示数据。,常用的数据源控件主要包括SqlDataSource控件：主要用于访问SQL Server 数据库； AccessDataSource 控件主要用于访问Access数据库。,Web页面有多种控件可以将数据呈现在页面上，包括GridView、FormView和DetailsView等。一些数据绑定控件可以自动利用数据源控件的优点包括分页、排序、编辑、插入和删除，具体如下：,GridView：多记录和多字段的表格式表现，可以提供分页、排序、修改和删除数据的功能。,DetailsView：一次呈现一个单独的数据项，作为用户的自定义的模板，也允许记录的分页、编辑、删除和创建新记录。,FormView：一条记录中多字段的表格式表现。允许记录的分页、编辑、删除和创建新记录。,4,10.2 “学籍管理”案例,为便于理解，本示例网站制作一个学籍管理系统，实现对记录的选择、编辑、删除、排序、翻页效果，该系统暂不考虑登录及发布等次要功能等，效果如图10.1、10.2、10.3所示。,图10.1 简易学籍管理界面 图10.2 选定记录,5,10.2 “学籍管理”案例,图10.3 编辑记录,6,10.2.1操作步骤,1. 创建一个SQL Server 2000 数据库aspnetdb,下面将利用服务器资源管理器连接数据库服务器并建立数据库,(1) 创建解决方案，编程语言采用【Visual C#】，以【文件系统】方式保存在本机的“D:websiteaspnet”目录下，然后单击【确定】按钮开始建立网站。 (2) 启动“Visual Studio 2005”【视图】|【服务器资源管理器】，如图10.4所示,。,7,10.2.1操作步骤,(3) 右击【数据库连接】，选择【添加连接】，在【添加连接】窗口中单击【更改】，选择数据源为“Microsoft SQL Server”，并单击【确定】返回【添加连接】窗口。如图10.5所示。,8,10.2.1操作步骤,在服务器名处输入SQL Server 2000服务器的名称(也可以输入所在服务器的IP地址，如果是在本机可输入“. ”代表，该服务器要求已安装并正在运行)，单击【测试连接】，如果成功则弹出“测试连接成功”，如图10.6所示。,9,10.2.1操作步骤,(5) 在【选择或输入一个数据库名】处输入“aspnetdb”,单击【确定】|【是】。,(6) 在服务器资源管理器中将出现数据库wu.aspnetdb.dbo。单击展开wu.aspnetdb.dbo，右击表图标选择【添加新表】，表设计如图10.7所示。表命名为xjgl。,10,10.2.1操作步骤,11,10.2.1操作步骤,(7) 在服务器资源管理器中右击表xjgl选择【打开表】|【返回所有行】输入实验数据，如图10.8所示。,12,10.2.1操作步骤,2. 建立数据绑定控件并绑定到数据源控件,(1) 返回首页default.aspx的设计视图，拖入一个Lable控件，设置Text属性为“学籍管理”，并设置Font属性和ForeColor属性以调整文字的大小和颜色。,(2) 从工具箱中拖入GridView控件，单击便捷任务按钮，展开便捷任务面板，选择【新建数据源】，如图10.9所示。,13,10.2.1操作步骤,2. 建立数据绑定控件并绑定到数据源控件,(1) 返回首页default.aspx的设计视图，拖入一个Lable控件，设置Text属性为“学籍管理”，并设置Font属性和ForeColor属性以调整文字的大小和颜色。,(2) 从工具箱中拖入GridView控件，单击便捷任务按钮，展开便捷任务面板，选择【新建数据源】，如图10.9所示。,14,10.2.1操作步骤,15,10.2.1操作步骤,在【选择数据源类型】窗口中，选择程序从“数据库”类型源取得数据，并指定ID为SqlDataSources1，如图10.10所示。,16,10.2.1操作步骤,(4) 在【选择数据连接】窗口的【应用程序连接数据库使用哪个数据连接】下拉列表中，选择数据连接“wu.aspnetdb.dbo”，并单击【下一步】。,(5) 在【是否将连接保存到应用程序配置文件中？】，单击选择【是，将此连接另存为】，在文本框中设置连接字符串名称为“xjglConnectionString”。,(6) 在【配置Select语句】窗口的【希望如何从数据库中检索数据】中，选择【指定来自表或视图的列】下拉列表中的“xjgl”，列选择如图10.11所示。然后单击【高级】按钮。,17,10.2.1操作步骤,18,10.2.1操作步骤,(7) 在【高级SQL生成选项】对话框中，选择【生成INSERT、UPDATE和DELETE语句】与【使用开放式并发】，并单击【确定】。,注：必须选定所有主键字段才能启用选项。,(8) 在【测试查询】窗口，单击【完成】。,注：可单击【测试查询】，预览返回的数据。,(9) 单击【完成】按钮结束数据源的配置。Default.aspx网页自动新增了一个SqlDataSource控件(已配置好)，GridView控件也更新了显示效果，如图10.12所示。,19,10.2.1操作步骤,20,10.2.1操作步骤,3. 自动套用格式，美化表格。,在GridView的便捷面板中选择【自动套用格式】|【秋天】，如图10.13所示。,21,10.2.1操作步骤,在GridView的便捷面板中选择【编辑列】，将【可用字段】列表中需要显示的字段添加到【选定的字段】列表框，并将“XID”对应的【BoundField属性】中【外观】部分的HeaderText改为“学号”，其他字段的该属性分别为“姓名”、“班级”、“专业”、“系别”，如图10.14所示。,22,10.2.1操作步骤,选定字段并编辑HeaderText属性后页面显示效果如图10.15所示。,23,10.2.1操作步骤,5. 分页、编辑、删除、选择,(1) 在GridView的便捷面板中选择【启用分页】、【启用编辑】、【启用删除】和【启用选定内容】选项。,(2) 在GridView控件【属性】面板中设置“PageSizs”属性为“5”。即可设置每页显示5条记录。,6. 浏览结果,单击按钮运行Web应用程序，即可显示如图10.1、10.2、10.3所示效果。,24,10.2.2本节知识点,1.,用SqlDataSource控件结合GridView控件显示数据,1) SqlDataSource控件配置,如果数据存储在SQL Server、SQL Server Express 、Oracle OLEDB数据源，就应当使用SqlDataSource控件。该控件提供了一个易于使用的向导，引导用户完成配置过程。添加该控件可以直接在数据绑定控件的便捷面板中选择“选择数据源”然后“新建数据源”，本例既可以使用该方式，也可以直接把SqlDataSource控件拖放到Web页面，然后在智能标记菜单中选择“数据源配置”启动配置向导。两种方法的区别在于后一种不用选择数据源类型。该控件的配置主要有ConnectionString，Selectedcommand和DataSourceMode属性。,(1) ConnectionString属性。ConnectionString属性是连接字符串，选择不同的数据库类型会生成不同的ConnectionString，向导会要求用户选择是否在Web.congfig中保存连接信息，以便于维护和部署程序。如果不在Web.congfig文件中存储，它就在.aspx页面上被存储为SqlDataSource的一个属性。,25,10.2.2本节知识点,(2) Selectedcommand属性主要用来确定将从数据库中提取什么样的信息，可以自定义SQL语句也可以指定表并在表中选择需要的字段。窗口中“Where”按钮用来添加一个或多个条件进行数据过滤,“高级SQL生成项”主要用于生成“Insert”、“Update”、“Delete”语句，该属性可用的前提是数据库表必须有“主键”。若需要在GridView中实现“编辑”、“删除”功能必须选择此项。为保证数据一致性防止并发冲突需选择“实用开放式并发”。,(3) DataSourceMode属性。DataSourceMode属性主要有DataReader和DataSet两种属性，该属性可在SqlDataSource控件的属性面板中设置。DataReader提供只前向的只读读取方式，速度读取快。DataSet可以使数据源控件功能更强大，能提供执行过滤，排序或分页等操作，但内存和处理的开销较大。,26,10.2.2本节知识点,2) GridView控件显示数据,GridView控件显示数据只需要在该控件的便捷面板中选择一个已配置完成的数据源即可显示数据，若需要显示的字段数目少于数据源提供的字段或要添加一些特殊字段列，如：按钮列、超链接列、图像列等，或对显示样式进行定义等操作需要在字段编辑窗口实现。该窗口的打开方式为，选择【便捷面板】|【编辑列】。,27,10.2.2本节知识点,2. 用AccessDatasource控件结合GridView控件显示数据,AccessDataSource控件用来从Access数据库中将数据提取到ASP.NET2.0页面。这个控件的属性很简单，其中最重要的是DataFile属性，用来指定硬盘上的MDB文件，操作与SqlDataSource数据源的差别在于选择数据库类型为“Access数据库”，然后出现“选择数据库文件”，通过浏览选择文件(本例已经事先在App_Data目录下建立数据库Aspnetdb.mdb) ，如图10.16所示，其他部分操作与SqlDataSource数据源的操作相同。,28,10.2.2本节知识点,29,10.2.2本节知识点,对数据表进行分页、排序和选择，只需在便捷面板中选择相应的选项即可, 如图10.17所示。,30,10.2.2本节知识点,利用模板美化显示,在GridView的便捷面板中可以选择【自动套用格式】进行美化，如前图10.13所示。,31,10.2.2本节知识点,5. 编辑、删除数据的方法,编辑、删除数据只需要在便捷面板中选择相应选项即可，如图10.18所示，但只有在数据源控件的“高级SQL生成选项”设置选中“INSERT、UPDATA、DELETE”选项才可以使用该项功能。另外需注意当更新记录时记录中有空字段的时候会发生记录无法更新的情况，此时需要设置GridView控件的DataKeyNames属性，指定表的主健。,32,10.2.2本节知识点,5. 编辑、删除数据的方法,编辑、删除数据只需要在便捷面板中选择相应选项即可，如图10.18所示，但只有在数据源控件的“高级SQL生成选项”设置选中“INSERT、UPDATA、DELETE”选项才可以使用该项功能。另外需注意当更新记录时记录中有空字段的时候会发生记录无法更新的情况，此时需要设置GridView控件的DataKeyNames属性，指定表的主健。,33,10.3 “深化版学籍管理”案例,案例说明,深化版学籍管理系统除实现对记录的选择、编辑、删除、排序、翻页效果外，增加了显示记录的详细信息、定义模板字段、插入记录等功能，如图10.13、10.14、10.15所示。,34,10.3 “深化版学籍管理”案例,35,10.3 “深化版学籍管理”案例,36,10.3 “深化版学籍管理”案例,37,10.3.1操作步骤,1. 设计网页布局,在页面中对应前图10.13，加入表格进行页面的布局,38,10.3.1操作步骤,2. 设计学生名单表,(1) 拖入GridView控件，其id属性为GridView1。首先按前一个“学籍管理”案例进行设置，并在GridView1的便捷任务面板中启动【排序】、【分页】、【启动选定内容】，Pagesize属性设为5，效果如图10.16所示。,39,10.3.1操作步骤,图10.16 设置GridView控件后效果,40,10.3.1操作步骤,(2) 在便捷任务面板中选择【编辑列】，对“选择”列进行设置，将该列的HeadText属性设为“查看详细”，SelectText属性设为“查看详细”，如图10.17所示。,41,10.3.1操作步骤,3. 设计详细信息管理部分,1) 添加并设置DetailsView控件,(1) 在工具箱中将DetailsView控件拖至详细信息管理区域，如图10.18所示。,42,10.3.1操作步骤,(2) 在其便捷面板中的【选择数据源】中选择“新建数据源”，设置步骤与GridView控件大致相同：在【为数据源选择ID】中指定为“SqlDataSource2”，在【配置Select语句】中选中所有列“*”，在【高级】中启用【INSERT、UPDATA、DELETE】和【使用开放式并发】，在“WHERE”条件设置窗口按图10.19所示进行设置。,43,10.3.1操作步骤,然后单击【添加】按钮在【WHERE子句】窗口生成子句。设置结果如图10.20所示。,44,10.3.1操作步骤,(3) 修改选定字段的属性,如图10.21所示。具体修改的属性和值见表10-1和表10-2。,45,10.3.1操作步骤,修改后效果如图10.22所示。,46,10.3.1操作步骤,2) 编辑模板字段,下面将在模板状态插入绑定控件。,(1) 打开DetailsView的便捷任务面板，选择【编辑模板】，如图10.23所示。选择性别字段的EdititemTemplate，删除内部的所有标签，添加RadioButtonList控件，其Text属性与Value属性分别设为“男”和“女”。如图10.24所示。,47,10.3.1操作步骤,(2) 单击RadioButtonList控件的便捷按钮，选择【编辑DataBindings】，将SelectedValue属性绑定到Xgender字段，并选择【双向数据绑定】选项。如图10.25所示。,48,10.3.1操作步骤,(3) 打开DetailsView便捷任务面板，选择【编辑模板】，对照片字段进行设置：,删除照片字段各模板内部原有标签；,选择ItemTemplate模板拖入Image控件，在Image控件的【编辑DataBindings】中将ImageUrl属性绑定到自定义绑定，值为“Eval(Xphoto)”。,选择照片字段的EditTemplate模板，拖入文件上传控件，Button控件和TextBox控件，其中TextBox的【编辑DataBindings】中将Text值绑定到自定义表达式Bind(Xphoto)。设置Button控件的Text属性为“上传”。,49,10.3.1操作步骤,(4) 编写上传代码。双击【上传】按钮输入如下代码：,protected void Button1_Click(object sender, EventArgs e),f1 = ()DetailsView1.Rows0.FindControl();,TextBox TextBox1 = (TextBox)DetailsView1.Rows0.FindControl(TextBox1);,TextBox1.Text = image/ + f1.;,bool = false;,String ;,if (f1.HasFile),= Path.GetExtension(f1.).ToLower();,String allowedExtensions = .gif, .png, .jpeg, .jpg ;,for (int i = 0; i allowedExtensions.Length; i+),if ( = allowedExtensionsi ),= true;,50,10.3.1操作步骤,(4) 编写上传代码。双击【上传】按钮输入如下代码：,if (),try,f1.Posted(Server.MapPath(/image/ + f1.);,catch (Exception ex),Response.Write(window.alert(图片上传失败!);,else,Response.Write(window.alert(文件类型不符或文件过大(500K以内)!);,51,10.3.1操作步骤,(5) 编辑InsertItemTemplate模板。步骤及方法同EditTemplate模板。,设置后的效果如图10.26所示。,52,10.3.1操作步骤,(6) 运行程序。即可显示案例说明中的效果,53,1.,使用DetailsView控件显示处理数据,GridView控件主要应用于列表显示数据，而DetailsView控件则主要用于单条记录的详细内容显示，类似将GridView控件的PageSize设置为1，并将数据纵向排列。,DetailsView控件可以实现对纪录的分页、插入、编辑、删除功能。设置的方法与GridView控件相同。,54,2. GridView控件与DetailsView控件携手处理数据,。 DetailsView控件与Gridview控件可以同步显示处理数据，主要分以下步骤：,(1) 建立GridView控件及其数据源；,(2) “启用选定内容”；,(3) 建立DetailsView控件及其数据源；,(4) 进入DetailsView控件对应数据源的【添加WHERE子句】窗口，设置好【列】、【运算符】及【列值来源】，本例中选择的来源于是“Control(控件)”,参数中控件ID用于指定该条件值来源于哪个控件，本例中由于需要单击GridView1控件在DetailsView控件中显示数据，所以选择来源是GridView1控件。若需要有默认显示，则在【默认值】中输入相关内容。,55,2. GridView控件与DetailsView控件携手处理数据,图10.52 配置DetailsView数据源的where子句,56,10.4 FormView控件,FormView控件与DetailsView非常相似。都可以分页浏览，也都支持编辑、删除和创建新记录。,区别在于，DetailsView控件能够自动创建一个包含字段名称和值的内部HTML标签结构。而FormView控件则只提供可以添加控件的空白区域。,与具有内置呈现(使用AutoGenerateField，或在Fields集合中定义显示字段) 的DetailsView控件不同，FormView控件显示界面需要自定义它的ItemTemplate。因此，自动化程度要低于DetailsView控件，但却更加自由，而不限于表格的形式。与其他控件同时使用时可以自己添加一个HTML表来组织控件布局，因此更适用于复杂显示界面的需要。,57,本 章 小 结,本章通过“学籍管理”及“学籍管理深化版”案例概括性的介绍了数据源控件的建立与配置，以及GridView控件和DetailsView控件数据绑定控件的使用方法。,实际应用中，具体选择哪一个控件，可以考虑如下几点：,(1) 如果要插入新记录，选择DetailsView控件和FormView。,(2) 如果想更新或者删除数据，可以在GridView、DetailsView或FormView中选择。,(3) 如果显示只读数据，可以通过任何一个控件。,(4) 根据布局选择控件。例如，同时显示多条记录选择GridView，如果一次只显示一条记录可以在FormView(一个空模板空间) 和DetailsView(带有默认内部表) 中选择。,58,