第8章数据绑定控件二

1、第8章 数据绑定控件（二）ASP.NET Web程序设计回顾n 数据绑定是 ASP.NET 提供的另一种访问数据库的方法，它可以在不关注数据库操作代码的情况下直接把数据绑定到 HTML 元素和 Web 控件中。n 数据控件是用来显示从数据库中获取的数据的一种控件，以可视化的方式查看绑定数据之后的效果。n 数据绑定的类型分为单值绑定和多值绑定两种。n DropDownList 控件用于显示只能选择一项的下拉列表框，被解释成标签。n DataList 控件使用模板与定义样式来显示数据，并执行数据的选择、删除和编辑。GridView 数据绑定n GridView 数据删除GridView 数据修改n

2、 通过 GridView 显示用户信息通过 GridView 对数据进行删除操作n 通过 GridView 对数据进行分页操作n 通过 GridView 对数据进行修改操作GridView 数据分页8.1 GridView 数据绑定控件1.GridView 控件简介n通过 GridView 显示用户信息25n208.1.1 GridView 数据绑定控件nGridView 控件以表格的形式显示数据源的数据，每列表示一个字段，而每行表示一条记录。其最大的特点是自动化程度高，可以在不编写代码的情况下实现分页和排序等功能。常用属性如下：属性名描述AllowPaging设置是否启用分页功能Column

3、s获取 GridView 控件中列字段的集合PageCount 获取在 GridView 控件中显示数据源记录所需的页数PageIndex 获取或设置当前显示页的索引PageSize 设置 GridView 控件每次显示的最大记录条数8.1.1 GridView 数据绑定控件n新鲜生活站点的后台管理程序中，使用GridView控件在用户列表页面显示 UserInfo 数据表内容。GridView控件8.1.1 GridView 数据绑定控件n使用GridView控件在用户列表页面显示 UserInfo 数据表内容步骤如下：n1、在站点后台管理项目 Admin 中创建 UserInfo 文件夹，

4、并在其中添加UserInfoList.aspx 页面n2、从 VisualStudio2017 工具箱中，拖放 GridView 控件到 UserInfoList.aspx 页面中8.1.1 GridView 数据绑定控件n使用GridView控件在用户列表页面显示 UserInfo 数据表内容步骤如下：n3、在 DAL 项目的 UserInfoService 类中添加 SelectUserInfoALL 方法publicstaticListSelectUserInfoALL() stringsql=select*fromuserinfo; SqlDataReaderdr=DBHelper.I

5、nstance().GetDataReaderBySql(sql); Listlist=newList(); while(dr.Read() UserInfouser=newUserInfo(); user.UserID=dr.GetInt32(0); user.UserName=dr.GetString(1); user.UserPwd=dr.GetString(2); /其他属性略 list.Add(user); dr.Close(); returnlist;DAL中完成数据库查询用户信息，读取数据到List集合中8.1.1 GridView 数据绑定控件n使用GridView控件在用户列

6、表页面显示 UserInfo 数据表内容步骤如下：n4、在 BLL 项目的 UserInfoManager 类中添加 SelectUserInfoALL 方法publicstaticListSelectUserInfoALL() returnUserService.SelectUserInfoALL();业务逻辑层方法调用DAL8.1.1 GridView 数据绑定控件n使用GridView控件在用户列表页面显示 UserInfo 数据表内容步骤如下：n5、在 UserInfoList.aspx 页面的后端类中编写如下protectedvoidPage_Load(objectsender,Ev

7、entArgse) if(!this.IsPostBack) BindUserInfo(); voidBindUserInfo() this.gdvUserInfo.DataSource=UserInfoManager.SelectUserInfoALL(); this.gdvUserInfo.DataBind();调用绑定数据方法设置GridView数据源8.1.1 GridView 数据绑定控件nGridView 控件以表格形式自动显示 UserInfo 数据表内容，列标题文本自动设定为UserInfo 数据表字段名称。GridView显示结果列标题是UserInfo类中的字段名8.1.1

8、 GridView 数据绑定控件nGridView默认显示实体中的字段名，如要自定义列标题文本，则需要设置 GridView 控件，步骤如下：n1）点击 GridView 控件右侧的箭头，显示 GridView 任务菜单8.1.1 GridView 数据绑定控件nGridView自定义列标题文本：n2）选择编辑列：nGridView可以显示多种类型的字段：nBoundField：默认的数据绑定字段列，以文本的方式显示数据nCommandField：预定义的命令按钮列，显示选择、编辑和删除等预定义命令按钮nTemplateField：模板列，以模板的形式自定义数据绑定列的内容，可以使用 HTML

9、 或控件呈现数据8.1.1 GridView 数据绑定控件nGridView自定义列标题文本：n3）选中 BoundField 字段，点击“添加”8.1.1 GridView 数据绑定控件nGridView自定义列标题文本：n4）修改 BoundField 字段的属性，在 DataField 中填写“UserID”（UserInfo 数据表字段），在 HeaderText中填写“编号”8.1.1 GridView 数据绑定控件nGridView自定义列标题文本：n5）按照同样的方式添加“账号”和“住址”等其他的 BoundField 字段。同时取消勾选“自动生成字段（G）”8.1.1 Grid

10、View 数据绑定控件nGridView自定义列标题文本：n6）重新浏览 UserInfoList.aspx 页面”列名已经更正为中文8.1.2 学生实践练习n 以列表的形式显示用户信息。258.1.2 学生实践练习（1）在第 7 章的基础上，找到表现层项目，鼠标右键选择“添加新项” “包含母版页的 Web 窗体”，命名为 UsersGrid。（2）在 UserGrid 窗体找到 ID 值为 Content2 的 Content 控件，控件中加入 div，并拖拽一个 GridView 控件。（3）在 GridView 任务菜单中点击“编辑列”，选中 BoundField 字段，点击“添加”，为

11、 GridView 添加 3 个列，分别绑定为用户编号、用户姓名和用户邮箱。设置 DataField 属性与实体类对应属性一致。（4）找到 UserGrid 窗体，在代码文件的 Page_Load 事件中加入绑定代码，把从数据库中获取的所有用户信息绑定到 DataList 中。（5）找到项目中站点地图文件 Web.sitemap，在此文件中加入一个用户信息管理导航。（6）点击鼠标右键选择 Login.aspx 页面，选择设置为起始页，将该页面设置为默认启动页面。8.2 GridView 控件的使用（一）1.GridView 删除操作n通过 GridView 对数据进行修改删除25n208.2.

12、1 GridView 删除操作nGridView 不仅可以用于数据的显示，还具有对数据进行删除和修改的功能。n为 UserInfoList.aspx 页面的GridView 控件增加删除列，用户点击该删除列的超链接后，删除该行数据：8.2.1 GridView 删除操作nGridView控件列表数据中删除操作：n1、点击 GridView 控件右侧的箭头，显示 GridView 任务菜单，选择“编辑列”8.2.1 GridView 删除操作nGridView控件列表数据中删除操作：n2、选中 CommandField 列中的“删除”列，点击“添加”按钮8.2.1 GridView 删除操作nG

13、ridView控件列表数据中删除操作：n3、为 GridView 控件添加 RowDeleting 事件n4、编写 RowDeleting 事件处理代码：protectedvoidgdvUserInfo_RowDeleting(objectsender,GridViewDeleteEventArgse) string id = int.Parse(this.gdvUserInfo.Rowse.RowIndex.Cells0.Text); if(AdminManager.DeleteAdminUser(id) Response.Write(alert( 删除成功！ ); else Respons

14、e.Write(alert( 删除失败！ ); 获取编号列数据，调用方法完成删除从GridView中获取选定行第一列ID数据8.2.2 学生实践练习n 对用户信息加入删除功能。258.2.2 学生实践练习（1）在上一节案例基础上找到 UserGrid 页面中的 GridView 控件，点击“编辑列”，添加“删除列”，点击“确定”按钮。（2）找到 GridView 控件，点击右键属性，找到事件（闪电符号）中处理删除事件 RowDeleting（处理删除），双击产生对应事件。（3）找到 DAL 中的 UserDAL 类，加入删除代码。（4）找到 BLL 中 UsersBLL 类，加入删除的逻辑处理

15、代码。（5）找到 UserGrid 窗体页面的代码部分，在代码中找到 RowDeleting 事件处理方法，加入删除的调用代码。（6）运行程序。点击主菜单里“调试”菜单中的“开始调试”或按“F5 键”来运行。8.3 GridView 控件的使用（二）1.GridView 编辑修改操作n通过 GridView 数据进行修改操作25n208.3.1 GridView 编辑操作nGridView 以表格形式展示数据，可以在表格最后增加一列“编辑”，当点击编辑按钮时，可以对该行数据进行修改：n1、点击 GridView 控件右侧的箭头，显示 GridView 任务菜单，选择“编辑列“8.3.1 Gri

16、dView 编辑操作n2、选中 CommandField 列中的“编辑、更新、取消”列，点击“添加”按钮8.3.1 GridView 编辑操作n3、为 GridView 控件添加 RowEditing、RowUpdating 以及 RowCancelingEdit 事件nRowEditing：开始编辑事件nRowUpdating：开始更新事件nRowCancelingEdit：取消编辑事件8.3.1 GridView 编辑操作n4、编写 RowEditing 事件，当用户点击编辑时打开编辑状态，让用户可以在当前行输入数据protectedvoidGridView1_RowEditing(obj

17、ectsender,GridViewEditEventArgse) GridView1.EditIndex=e.NewEditIndex; /设置开启编辑 bind(); /重新绑定 GridView8.3.1 GridView 编辑操作n5、编写 RowUpdating 事件代码：protectedvoidGridView1_RowUpdating(objectsender,GridViewUpdateEventArgse) /获取绑定的主键 ID 值 Stringid=GridView1.DataKeyse.RowIndex.Value.ToString(); /获取用户修改的单元格里面的

18、值（Cells 索引 ） StringName=(TextBox)(GridView1.Rowse.RowIndex.Cells1.Controls0).Text; if(AdminManager.UpdateAdminUser(int.Parse(id),Name) Response.Write(alert( 修改成功！); else Response.Write(alert( 修改失败！); GridView1.EditIndex=-1; /结束编辑 bind(); /重新绑定 GridView获取当前选择行中Name列文本框的数据获取当前选择行中编号列数据8.3.1 GridView 编

19、辑操作n6、编写 RowCancelingEdit 事件，当用户点击取消时结束编辑状态：protectedvoidGridView1_RowCancelingEdit(objectsender,GridViewCancelEditEventArgse) GridView1.EditIndex=-1; /结束编辑 bind(); /重新绑定 GridView8.3.2 学生实践练习n 对用户信息加入编辑功能。258.3.2 学生实践练习（1）在上节案例基础上，找到 UserGrid 页面中的 GridView 控件，点击编辑列添加编辑，点击“确定”按钮。（2）找到 GridView 控件，点击右

20、键属性，找到事件（闪电符号）中处理编辑的 3 个事件 RowEditing（处理开启编辑）、RowUpdating（处理修改）以及 RowCancelingEdit（处理结束编辑），双击产生对应事件。（3）找到 DAL 中的 UserDAL 类，加入修改代码功能方法。（4）找到 BLL 中 UsersBLL 类，加入修改的逻辑处理代码。（5）找到 UserGrid 窗体页面的代码部分，在代码中找到 RowEditing、RowUpdating 以及RowCancelingEdit事件处理方法，加入修改的代码。（6）运行程序。点击主菜单里“调试”菜单中的“开始调试”或按“F5 键”来运行。8.4

21、 GridView 控件的使用（三）1.GridView 分页操作n通过 GridView 数据进行分页操作25n208.4.1 GridView 分页操作n 为什么需要对列表数据进行分页？1、减轻服务端压力，节约内存开销2、提高运行效率和速度3、客户端速度快，更美观，用户体验高8.4.1 GridView 分页操作nGridView 控件以表格的形式显示数据源的数据，当数据较多时，无法在一个页面显示所有数据，这个时候就需要对数据进行分页操作。nGridView 本身自带有分页的功能操作，需要设置一些属性和事件来完成分页：属性名/事件名作用AllowPaging属性设置是否启用分页功能Page

22、Count 属性获取在 GridView 控件中显示数据源记录所需的页数PageIndex 属性获取或设置当前显示页的索引PageSize属性设置 GridView 控件每次显示的最大记录条数PageIndexChanging 事件页码索引改变触发事件8.4.1 GridView 分页操作n为 UserInfoList.aspx 页面的 GridView 控件增加分页功能。步骤如下：n1、选中 GridView 控件，点击右键选择属性，设置 AllowPaging 为 True，开启分页功能n2、设置 PageSize属性 为 5，每页显示 5 条记录allowPaging设置为truePageSize设置为58.4.1 GridView 分页操作n为 UserInfoList.aspx 页面的 GridView 控件增加分页功能。步骤如下：n3、选中 GridView 控件，点击右键选择属性，找到 GridView 事件中的PageIndexChanging 事件，双击产生此事件，在事件中设置用户每次操作的新页码protectedvoidgdvUserInfo_Pag