第8章 数据绑定控件（二）

8.1 GridView 数据绑定控件 

GridView 控件以表格的形式显示数据源的数据，每列表示一个字段，而每行表示一条记录。其最大的特点是自动化程度高，可以在不编写代码的情况下实现分页和排序等功能。常用属性 

• AllowPaging ：设置是否启用分页功能 
• Columns ：获取 GridView 控件中列字段的集合 
• PageCount：获取在 GridView 控件中显示数据源记录所需的页数
• PageIndex：获取或设置当前显示页的索引 
• PageSize：设置 GridView 控件每次显示的最大记录条数 

示例：新鲜生活站点的后台管理程序中，使用GridView控件在用户列表页面显示 UserInfo 数据表内容 

GridView控件 

使用GridView控件在用户列表页面显示 UserInfo 数据表内容 

• 在站点后台管理项目 Admin 中创建 UserInfo 文件夹，并在其中添加UserInfoList.aspx   页面 
• 从 Visual Studio 2017 工具箱中，拖放 GridView 控件到 UserInfoList.aspx 页面中 

在 DAL 项目的 UserInfoService 类中添加 SelectUserInfoALL 方法 

public static List<UserInfo> SelectUserInfoALL()
{
  string sql = "select * from userinfo";
  SqlDataReader dr = DBHelper.Instance().GetDataReaderBySql(sql);
  List<UserInfo> list = new List<UserInfo>();
  while (dr.Read())
  {
    UserInfo user = new UserInfo();
    user.UserID = dr.GetInt32(0);//DAL中完成数据库查询用户信息，读取数据到List集合中
    user.UserName = dr.GetString(1);
    user.UserPwd = dr.GetString(2);
    //其他属性略
     list.Add(user);
  }
  dr.Close();
  return list;}

在 BLL 项目的 UserInfoManager 类中添加 SelectUserInfoALL 方法 

public static List<UserInfo> SelectUserInfoALL()
{
//业务逻辑层方法调用DAL
  return UserService.SelectUserInfoALL();
}

在 UserInfoList.aspx 页面的后端类中编写如下

protected void Page_Load(object sender, EventArgs e)
{
  if(!this.IsPostBack)
  {
    BindUserInfo();//调用绑定数据方法
  }
}
void BindUserInfo()
{
  this.gdvUserInfo.DataSource = UserInfoManager.SelectUserInfoALL() ;//设置GridView数据源
  this.gdvUserInfo.DataBind();
}

GridView 控件以表格形式自动显示 UserInfo 数据表内容，列标题文本自动设定为UserInfo 数据表字段名称 

GridView显示结果 列标题是UserInfo类中的字段名 

GridView默认显示实体中的字段名，如要自定义列标题文本，则需要设置 GridView 控件

点击 GridView 控件右侧的箭头，显示 GridView 任务菜单 

GridView自定义列标题文本 

• 选择编辑列 

GridView可以显示多种类型的字段

• BoundField：默认的数据绑定字段列，以文本的方式显示数据
• CommandField：预定义的命令按钮列，显示选择、编辑和删除等预定义命令按钮
• TemplateField：模板列，以模板的形式自定义数据绑定列的内容，可以使用 HTML 或控件呈现数据 

GridView自定义列标题文本

• 选中 BoundField 字段，点击“添加”

修改 BoundField 字段的属性，在 DataField 中填写“UserID”（UserInfo 数据表字段），在 HeaderText中填写“编号” 

按照同样的方式添加“账号”和“住址”等其他的 BoundField 字段。同时取消勾选“自动生成字段（G）” 

重新浏览 UserInfoList.aspx 页面 

列名已经更正为中文 

8.2 GridView 控件的使用（一） 

8.2.1 GridView 删除操作 

• GridView 不仅可以用于数据的显示，还具有对数据进行删除和修改的功能 
• 为 UserInfoList.aspx 页面的GridView 控件增加删除列，用户点击该删除列的超链接后，删除该行数据 

GridView控件列表数据中删除操作 

点击 GridView 控件右侧的箭头，显示 GridView 任务菜单，选择“编辑列” 

选中 CommandField 列中的“删除”列，点击“添加”按钮

为 GridView 控件添加 RowDeleting 事件

编写 RowDeleting 事件处理代码 

protected void gdvUserInfo_RowDeleting(object sender, GridViewDeleteEventArgs e)
{
      string id = int.Parse(this.gdvUserInfo.Rows[e.RowIndex].Cells[0].Text));//从GridView中获取选定行第一列ID数据
  if (AdminManager.DeleteAdminUser(id)
  {
    	Response.Write("<script>alert(' 删除成功！ ')</script>");//获取编号列数据，调用方法完成删除
  }
  else
  {
	Response.Write("<script>alert(' 删除失败！ ')</script>");
  }
}

8.3 GridView 控件的使用（二） 

8.3.1 GridView 编辑操作

GridView 以表格形式展示数据，可以在表格最后增加一列“编辑”，当点击编辑按钮时，可以对该行数据进行修改 

点击 GridView 控件右侧的箭头，显示 GridView 任务菜单，选择“编辑列“ 

选中 CommandField 列中的“编辑、更新、取消”列，点击“添加”按钮

为 GridView 控件添加 RowEditing、RowUpdating 以及 RowCancelingEdit 事件 

• RowEditing：开始编辑事件
• RowUpdating：开始更新事件
• RowCancelingEdit：取消编辑事件 

编写 RowEditing 事件，当用户点击编辑时打开编辑状态，让用户可以在当前行输入数据 

protected void GridView1_RowEditing(object sender, GridViewEditEventArgs e)
{
  GridView1.EditIndex = e.NewEditIndex;  	// 设置开启编辑
  bind();                  		// 重新绑定 GridView
}

编写 RowUpdating 事件代码

protected void GridView1_RowUpdating(object sender, GridViewUpdateEventArgs e)
{
  // 获取绑定的主键 ID 值
  String id= GridView1.DataKeys[e.RowIndex].Value.ToString();//获取当前选择行中编号列数据
  // 获取用户修改的单元格里面的值（Cells[ 索引 ]）
  String Name= (TextBox)(GridView1.Rows[e.RowIndex].Cells[1].Controls[0])).Text;//获取当前选择行中Name列文本框的数据
  if (AdminManager.UpdateAdminUser(int.Parse(id),Name)
  {
    Response.Write("<script>alert(' 修改成功！')</script>");
  }
  else
  {
    Response.Write("<script>alert(' 修改失败！')</script>");
  }
  GridView1.EditIndex = -1;  // 结束编辑
  bind();            	   // 重新绑定 GridView
}

编写 RowCancelingEdit 事件，当用户点击取消时结束编辑状态 

protected void GridView1_RowCancelingEdit(object sender, GridViewCancelEditEventArgs e)
{
  GridView1.EditIndex = -1;   	// 结束编辑
  bind();            	 	// 重新绑定 GridView
}

8.4 GridView 控件的使用（三） 

8.4.1 GridView 分页操作 

提问：为什么需要对列表数据进行分页？ 

经验：

1、减轻服务端压力，节约内存开销

2、提高运行效率和速度

3、客户端速度快，更美观，用户体验高 

GridView 控件以表格的形式显示数据源的数据，当数据较多时，无法在一个页面显示所有数据，这个时候就需要对数据进行分页操作。 

GridView 本身自带有分页的功能操作，需要设置一些属性和事件来完成分页 

• AllowPaging属性 ：设置是否启用分页功能 
• PageCount 属性 ：获取在 GridView 控件中显示数据源记录所需的页数
• PageIndex 属性 ：获取或设置当前显示页的索引 
• PageSize属性 ：设置 GridView 控件每次显示的最大记录条数 
• PageIndexChanging 事件 ：页码索引改变触发事件 

为 UserInfoList.aspx 页面的 GridView 控件增加分页功能 

• 选中 GridView 控件，点击右键选择属性，设置 AllowPaging 为 True，开启分页功能
• 设置 PageSize属性 为 5，每页显示 5 条记录 

选中 GridView 控件，点击右键选择属性，找到 GridView 事件中的PageIndexChanging 事件，双击产生此事件，在事件中设置用户每次操作的新页码 

protected void gdvUserInfo_PageIndexChanging(object sender, GridViewPageEventArgs e)
{
  gdvUserInfo.PageIndex = e.NewPageIndex;// 设置显示用户选择的页码
  bind();
}

总结

1. GridView 控件以表格的形式显示数据源的数据，每列表示一个字段，而每行表示一条记录，可以在不编写代码的情况下实现分页和排序等功能
2. GridView使用DataSource绑定数据源，使用DataBind()进行显示
3.  GridView实现删除功能时需要处理RowDeleting事件，事件中获取选中行的ID列，调用业务逻辑层删除方法实现删除
4.  GridView实现编辑功能时需要处理RowEditing、RowUpdating、RowCancelEdit事件
5. 应用列表数据分页的目的是减轻服务端压力，提高客户端浏览速度和体验，GridView中可以通过设置AllowPaging和PageSize属性，触发PageIndexChanging 事件来实现分页功能