Web程序设计课堂教学教案第八章.docx

1、Web程序设计课堂教学教案第八章洛阳理工学院课堂教学教案教师姓名： 课程名称：Web程序设计 授课时数：6 第17-19次课授课课题第8章 ASP.NET中的数据绑定8.1 数据绑定概述8.2 单值和列表控件的数据绑定8.2.1 单值绑定8.2.2 列表控件的数据绑定8.3 GridView控件 8.3.1 GridView的数据绑定8.3.2 设定GridView的绑定列和模板列8.3.3 GridView的排序8.3.4 GridView的分页8.4 DataList和FormView控件8.4.1 DataList的数据绑定8.4.2 FormView控件的数据呈现和处理教学目标1 掌握

2、数据绑定概念及方法 2 掌握数据绑定控件GridView、DataList和FormView控件教学重点1 单值绑定、多值绑定2数据绑定控件GridView教学难点GridView控件的使用方法教学方法及手段项目驱动，案例教学，一体化课堂；板书+多媒体。教学过程设计详细授课内容及具体过程，见正文描述。课外拓展GridView控件使用数据源控件进行数据绑定的方法。作业布置1什么是数据绑定？有哪几种实现方法？2比较GridView、DataList、FormView三种控件的使用场合。教学后记以下内容属于第17次课：第8章 ASP.NET中的数据绑定8.1 数据绑定概述问题： 什么是数据绑定 ？

3、数据绑定在web系统开发中的作用? 在ASP.NET中进行数据绑定的基本原理和过程？ 在ASP.NET中提供了那些可以进行数据绑定的控件？1. 数据绑定:WEB系统的一个典型的特征是后台对数据的访问和处理与前台数据的显示分离，而前台显示是通过HTML来实现的。数据绑定实际上就是讲后台数据按照要求，根据某种样式、布局呈现到页面上的过程。2. 数据绑定原理:HTML标记和服务器控件用于显示数据，数据绑定实际上是在HTML标记中或服务器控件中设置要显示数据的过程。数据呈现的最直接的方式是将需要显示的数据和HTML标记拼接成字符串并输出，但这种方案的缺点是复杂而且难以重用，尤其是有大宗数据需要处理时。

4、因此为了简化开发过程，ASP.NET环境中提供了多种不同的服务器端控件来帮助程序员更快速高效地完成数据的呈现。 3. 数据绑定分类：单值绑定控件（如TextBox)列表控件(如DropDownList)复杂数据绑定控件(如GridView,FormView)8.2 单值和列表控件的数据绑定数据绑定实际上是在HTML标记中或服务器控件中设置要显示数据的过程。（1）对于页面中的HTML标记，可以直接嵌入数据或绑定表达式来设置要显示的数据；（2）而对于服务器控件来说，通常通过设置控件属性或指定数据源来完成数据的绑定，并控制其呈现的样式。常用的绑定表达式具有以下形式：8.2.1 单值绑定绑定表达式可以

5、直接嵌入到前台页面代码中去，通常用于HTML标记中的数据显示或单值控件数据设置。见例8-1前台页面代码： asp:TextBox ID=TextBox2 runat=server Text= 后台服务器代码：TextBox1.Text = this.SingleValueBindingStr + 2;使用绑定表达式必须调用Page类或对应控件的DataBind()方法。8.2.2 列表控件的数据绑定列表控件有以下几种：DropDownList、ListBox、CheckBoxList、RadioButtonList、BulletedList等等 可以通过编程的方式为控件对象增加多个数据项，也可

6、以直接在VWD2008环境提供的图形界面中编辑要显示的数据项列表。由于列表控件显示的是数据集合，主要采用指定数据源（DataSource）方法绑定数据 见例8-2以下内容属于第18次课：8.3 GridView控件GridView是一个功能强大的数据绑定控件，主要用于以表格形式呈现、编辑关系数据集。对应于关系数据集的结构，GridView控件以列为单位组织其所呈现的数据，除了普通的文本列，还提供多种不同的内置列样式，例如按钮列、图像列、复选框形式的数据列等等。可以通过设置GridView控件的绑定列属性以不同的样式呈现数据，或通过模板列自定义列的显示样式。GridView控件实现数据绑定的方法

7、：（1）使用数据源控件连接数据库，GridView控件借助数据源控件实现内置的数据编辑、修改、更新、删除以及排序、分页等功能；（2）不使用数据源控件，手动编码实现数据编辑、修改、更新、删除以及排序、分页等功能；方法（2）更灵活，方法（1）简单。8.3.1 GridView的基本数据绑定其基本的数据绑定方式与列表控件类似，首先设置数据源，后调用DataBind()方法。例8-3 演示如何为GridView控件绑定数据源操作步骤：（1）通过数据库操作获取数据库数据填充到DataSet数据集中，并在DataSet数据集中指定要填充的DataTable 表名；（2）设置GridView的数据源；（3）

8、调用DataBind()方法把数据源里的数据绑定到控件上。主要代码： protected void Page_Load(object sender, EventArgs e) /查询student数据库获取结果集ds string sqlconnstr = ConfigurationManager.ConnectionStringsConnectionString.ConnectionString; DataSet ds = new DataSet(); using (SqlConnection sqlconn = new SqlConnection(sqlconnstr) SqlDataAd

9、apter sqld = new SqlDataAdapter(select * from student, sqlconn); sqld.Fill(ds, tabstudent); /以数据集中名为tabstudent的DataTable作为数据源，为控件绑定数据 GridView1.DataSource = ds.Tablestabstudent.DefaultView; GridView1.DataBind();/把数据源里的数据绑定在控件上 /label中显示运行状态 Label1.Text = 查找成功; 8.3.2 设定GridView绑定列和模板列通过设置GridView控件的绑

10、定列属性使其呈现不同的列样式，实现数据的编辑和修改，或编辑模板列定制所需的列样式和功能。在实际应用的时候，根据需要显示的数据类型，选择要绑定的列类型并设置其映射到数据集的字段名称和呈现样式（设置绑定列后GridView中将只显示映射列数据，否则系统将默认以BoundField类型显示数据源表中的所有列）GridView控件中的列及其类型 （P188）CommandField有3中类型：（1）编辑、更新、取消；（2）选择；（3）删除对应的事件：RowEditing、RowUpdating、RowDeleting、RowCancelingEdit为对应事件编写代码实现相应按钮的功能 例8-4 演示

11、为GridView控件设置绑定列操作步骤：（1）添加绑定列并绑定到字段；（2）数据绑定；（3）为命令按钮绑定事件处理方法；（4）为每个事件处理方法添加代码。 主要代码： using System;using System.Data;using System.Configuration;using System.Collections;using System.Web;using System.Web.Security;using System.Web.UI;using System.Web.UI.WebControls;using System.Web.UI.WebControls.WebPa

12、rts;using System.Web.UI.HtmlControls;using System.Data.SqlClient;public partial class gview2 : System.Web.UI.Page protected void Page_Load(object sender, EventArgs e) if (!Page.IsPostBack) bindgrid(); void bindgrid() string sqlconnstr = ConfigurationManager.ConnectionStringsConnectionString.Connecti

13、onString; ; DataSet ds = new DataSet(); using (SqlConnection sqlconn = new SqlConnection(sqlconnstr) SqlDataAdapter sqld = new SqlDataAdapter(select no,name,birth,address from student, sqlconn); sqld.Fill(ds, tabstudent); /判断是否已经进行排序，如果是则按照ViewState中存储的信息生成排序后的DataView对象 if (ViewStateSortDirection =

14、 null) GridView1.DataSource = ds.Tablestabstudent.DefaultView; else DataView SortedDV = new DataView(ds.Tablestabstudent); SortedDV.Sort = ViewStateSortExpression.ToString() + + ViewStateSortDirection.ToString(); GridView1.DataSource = SortedDV; GridView1.DataBind(); protected void GridView1_RowEdit

15、ing(object sender, GridViewEditEventArgs e) GridView1.EditIndex = e.NewEditIndex; bindgrid(); protected void GridView1_RowUpdating(object sender, GridViewUpdateEventArgs e) string sqlconnstr = ConfigurationManager.ConnectionStringsConnectionString.ConnectionString; ; SqlConnection sqlconn = new SqlC

16、onnection(sqlconnstr); /提交行修改 try sqlconn.Open(); SqlCommand Comm = new SqlCommand(); Comm.Connection = sqlconn; Comm.CommandText = update student set name=name,birth=birth,address=address where no=no; Comm.Parameters.AddWithValue(no, GridView1.DataKeyse.RowIndex.Value.ToString(); Comm.Parameters.Ad

17、dWithValue(name, (TextBox)GridView1.Rowse.RowIndex.Cells1.Controls0).Text); Comm.Parameters.AddWithValue(birth, (TextBox)GridView1.Rowse.RowIndex.Cells2.Controls0).Text); Comm.Parameters.AddWithValue(address, (TextBox)GridView1.Rowse.RowIndex.Cells3.Controls0).Text); Comm.ExecuteNonQuery(); sqlconn.

18、Close(); sqlconn = null; Comm = null; catch(Exception ex) Response.Write(数据库更新出错 + ex.ToString(); GridView1.EditIndex = -1; bindgrid(); protected void GridView1_RowCancelingEdit(object sender, GridViewCancelEditEventArgs e) GridView1.EditIndex = -1; bindgrid(); protected void GridView1_RowDeleting(o

19、bject sender, GridViewDeleteEventArgs e) /设置数据库连接 string sqlconnstr = ConfigurationManager.ConnectionStringsConnectionString.ConnectionString; ; SqlConnection sqlconn = new SqlConnection(sqlconnstr); sqlconn.Open(); /删除行处理 String sql = delete from student where no= + GridView1.DataKeyse.RowIndex.Val

20、ue.ToString() + ; SqlCommand Comm = new SqlCommand(sql, sqlconn); Comm.ExecuteNonQuery(); sqlconn.Close(); sqlconn = null; Comm = null; GridView1.EditIndex = -1; bindgrid(); 8.3.3 GridView的排序 GridView控件提供了用于实现排序功能的接口，通过设置相关属性并实现排序事件的处理代码就可以完成排序功能。GridView的AllSorting=true;相应列的SortExpression=yes；GridV

21、iew的Sorting事件中DataView的Sort赋值为“字段名 ASC/DESC”例8-5 演示为GridView控件实现排序操作步骤：（1）设置GridView 属性AllowSorting 为True；（2）设置作为排序关键字的列的SortExpression属性为排序字段，比如“no”；（3）添加排序事件处理方法；（4）为排序事件处理方法添加代码。 主要代码： protected void GridView1_Sorting(object sender, GridViewSortEventArgs e) if (ViewStateSortDirection = null) View

22、StateSortDirection = DESC; if (ViewStateSortDirection.ToString() = ASC) ViewStateSortDirection = DESC; else ViewStateSortDirection = ASC; ViewStateSortExpression = e.SortExpression; this.bindgrid(); 8.3.4 GridView的分页GridView控件提供了内置的分页功能，绑定数据后只要设置分页相关属性系统即可自动完成分页功能，我们只需在分页导航按钮的单击事件处理方法中添加代码，设置当前要显示的页

23、索引并重新绑定数据即可。GridView的AllPaging=true;PageIndex=当前页索引；PageSize=每页行数；PageSettings为分页模式；GridView的PageIndexChanging事件中重新绑定数据。例8-6 演示为GridView 控件实现分页操作步骤：（1）设置GridView 的AllowPaging、PageIndex 、 PageSize和PageSettings属性；（2）添加PageIndexChanging和DataBound事件处理方法；（4）为PageIndexChanging和DataBound事件处理方法添加代码。 主要代码： p

24、rotected void GridView1_PageIndexChanging(object sender, GridViewPageEventArgs e) /设置要显示的页的索引并重新绑定数据 GridView1.PageIndex = e.NewPageIndex; bindgrid(); protected void GridView1_DataBound(object sender, EventArgs e) /分页数据绑定前设置当前页信息 Label2.Text = 共 + (GridView1.PageCount).ToString() + 页; Label1.Text =

25、第 + (GridView1.PageIndex + 1).ToString() + 页; Label3.Text = string.Format(总页数：0，当前页：1, GridView1.PageCount, GridView1.PageIndex + 1);以下内容属于第19次课：8.4 DataList和FormView控件DataList和FormView 控件以项为单位组织和呈现数据（GridView以列为单位），每一项对应于关系数据集的一条记录（行），通过定义和设置不同的项模板定制每一项的显示样式，绑定数据后控件将按照项模板重复显示数据源的每条记录。8.4.1 DataList

26、的数据绑定DataList控件中通过自定义模板设置数据的显示样式， 根据不同的需要定义不同类型的项模板，DataList控件根据项的运行时状态自动加载相应的模板显示数据。例如当某一项被选定后将会以SelectedItemTemplate模板呈现数据，编辑功能被激活时将以EditItemTemplate模板呈现数据。它支持如下模板类型：ItemTemplate ：包含一些 HTML 元素和控件，将为数据源中的每一行呈现一次这些 HTML 元素和控件。AlternatingItemTemplate： 包含一些 HTML 元素和控件，将为数据源中的每两行呈现一次这些 HTML 元素和控件。通常，您可

27、以使用此模板来为交替行创建不同的外观，例如指定一个与在 ItemTemplate 属性中指定的颜色不同的背景色。SelectedItemTemplate： 包含一些元素，当用户选择 DataList 控件中的某一项时将呈现这些元素。通常，您可以使用此模板来通过不同的背景色或字体颜色直观地区分选定的行。还可以通过显示数据源中的其他字段来展开该项。EditItemTemplate： 指定当某项处于编辑模式中时的布局。此模板通常包含一些编辑控件，如 TextBox 控件。HeaderTemplate 和FooterTemplate：包含在列表的开始和结束处分别呈现的文本和控件。SeparatorTe

28、mplate ：包含在每项之间呈现的元素。典型的示例可能是一条直线（使用 HR 元素）。例8-78.4.2 FormView控件的数据呈现和处理FormView控件提供了内置的数据处理功能，只需绑定到支持这些功能的数据源控件，并进行配置，无需编写代码就可以实现对数据的分页和增删改功能。要使用FormView内置的增删改功能需要为更新操作提供EditItemTemplate和InsertItemTemplate模板，FormView 控件显示指定的模板以提供允许用户修改记录内容的用户界面。由于FormView控件的各个项通过自定义模板来呈现，因此控件并不提供内置的实现某一功能（如删除）的特殊按钮

29、类型，而是通过按钮控件的CommandName属性与内置的命令相关联。FormView提供如下命令类型（区分大小写）：Edit：引发此命令控件转换到编辑模式，并用已定义的EditItemTemplate呈现数据。New：引发此命令控件转换到插入模式，并用已定义的InsertItemTemplate呈现数据。Update：此命令将使用用户在EditItemTemplate界面中的输入值在数据源中更新当前所显示的记录。引发ItemUpdating和ItemUpdated事件。Insert：此命令用于将用户在InsertItemTemplate界面中的输入值在数据源中插入一条新的记录。引发ItemInserting和ItemInserted事件。Delete：此命令删除当前显示的记录。引发ItemDeleting和ItemDeleted事件。Cancel：在更新或插入操作中取消操作和放弃用户输入值，然后控件会自动转换到DefaultMode属性指定的模式。在命令所引发的事件中，我们可以执行一些额外的操作，例如对于Update和Insert命令，因为ItemUpdating和ItemInserting事件是在更新或插入数据源之前触发的，可以在ItemUpdating和ItemInserting事件中先判断用户的输入值进行验证，满足要求后才访问数据库，否则取消操作。