Web程序设计课堂教学教案第八章.docx
《Web程序设计课堂教学教案第八章.docx》由会员分享，可在线阅读，更多相关《Web程序设计课堂教学教案第八章.docx（12页珍藏版）》请在冰豆网上搜索。
Web程序设计课堂教学教案第八章
洛阳理工学院课堂教学教案
教师姓名：
课程名称：
Web程序设计授课时数：
6第17-19次课
授课课题
第8章ASP.NET中的数据绑定
8.1数据绑定概述
8.2单值和列表控件的数据绑定
8.2.1单值绑定
8.2.2列表控件的数据绑定
8.3GridView控件
8.3.1GridView的数据绑定
8.3.2设定GridView的绑定列和模板列
8.3.3GridView的排序
8.3.4GridView的分页
8.4DataList和FormView控件
8.4.1DataList的数据绑定
8.4.2FormView控件的数据呈现和处理
教学目标
1．掌握数据绑定概念及方法
2．掌握数据绑定控件GridView、DataList和FormView控件
教学重点
1．单值绑定、多值绑定
2．数据绑定控件GridView
教学难点
GridView控件的使用方法
教学方法及手段
项目驱动，案例教学，一体化课堂；板书+多媒体。
教学过程设计
详细授课内容及具体过程，见正文描述。
课外拓展
GridView控件使用数据源控件进行数据绑定的方法。
作业布置
1．什么是数据绑定？
有哪几种实现方法？
2．比较GridView、DataList、FormView三种控件的使用场合。
教学后记
以下内容属于第17次课：
第8章ASP.NET中的数据绑定
8.1数据绑定概述
问题：
●什么是数据绑定？
●数据绑定在web系统开发中的作用?
●在ASP.NET中进行数据绑定的基本原理和过程？
●在ASP.NET中提供了那些可以进行数据绑定的控件？
1.数据绑定:
WEB系统的一个典型的特征是后台对数据的访问和处理与前台数据的显示分离，而前台显示是通过HTML来实现的。
数据绑定实际上就是讲后台数据按照要求，根据某种样式、布局呈现到页面上的过程。
2.数据绑定原理:
HTML标记和服务器控件用于显示数据，数据绑定实际上是在HTML标记中或服务器控件中设置要显示数据的过程。
数据呈现的最直接的方式是将需要显示的数据和HTML标记拼接成字符串并输出，但这种方案的缺点是复杂而且难以重用，尤其是有大宗数据需要处理时。
因此为了简化开发过程，ASP.NET环境中提供了多种不同的服务器端控件来帮助程序员更快速高效地完成数据的呈现。
3.数据绑定分类：
单值绑定控件（如TextBox）
列表控件（如DropDownList）
复杂数据绑定控件（如GridView,FormView）
8.2单值和列表控件的数据绑定
数据绑定实际上是在HTML标记中或服务器控件中设置要显示数据的过程。
（1）对于页面中的HTML标记，可以直接嵌入数据或绑定表达式来设置要显示的数据；
（2）而对于服务器控件来说，通常通过设置控件属性或指定数据源来完成数据的绑定，并控制其呈现的样式。
常用的绑定表达式具有以下形式：
<%#XXX%>
8.2.1单值绑定
绑定表达式可以直接嵌入到前台页面代码中去，通常用于HTML标记中的数据显示或单值控件数据设置。
见例8-1
前台页面代码：
<%#SingleValueBindingStr+"1"%>
TextBoxID="TextBox1"runat="server">
TextBox>
TextBoxID="TextBox2"runat="server"
Text="<%#SingleValueBindingStr+3%>">
TextBox>
后台服务器代码：
TextBox1.Text=this.SingleValueBindingStr+"2";
使用绑定表达式必须调用Page类或对应控件的DataBind（）方法。
8.2.2列表控件的数据绑定
列表控件有以下几种：
DropDownList、ListBox、CheckBoxList、RadioButtonList、BulletedList等等
可以通过编程的方式为控件对象增加多个数据项，也可以直接在VWD2008环境提供的图形界面中编辑要显示的数据项列表。
由于列表控件显示的是数据集合，主要采用指定数据源（DataSource）方法绑定数据
见例8-2
以下内容属于第18次课：
8.3GridView控件
GridView是一个功能强大的数据绑定控件，主要用于以表格形式呈现、编辑关系数据集。
对应于关系数据集的结构，GridView控件以列为单位组织其所呈现的数据，除了普通的文本列，还提供多种不同的内置列样式，例如按钮列、图像列、复选框形式的数据列等等。
可以通过设置GridView控件的绑定列属性以不同的样式呈现数据，或通过模板列自定义列的显示样式。
GridView控件实现数据绑定的方法：
（1）使用数据源控件连接数据库，GridView控件借助数据源控件实现内置的数据编辑、修改、更新、删除以及排序、分页等功能；
（2）不使用数据源控件，手动编码实现数据编辑、修改、更新、删除以及排序、分页等功能；
方法
（2）更灵活，方法
（1）简单。
8.3.1GridView的基本数据绑定
其基本的数据绑定方式与列表控件类似，首先设置数据源，后调用DataBind（）方法。
[例8-3]演示如何为GridView控件绑定数据源
操作步骤：
（1）通过数据库操作获取数据库数据填充到DataSet数据集中，并在DataSet数据集中指定要填充的DataTable表名；
（2）设置GridView的数据源；
（3）调用DataBind（）方法把数据源里的数据绑定到控件上。
主要代码：
protectedvoidPage_Load（objectsender,EventArgse）
{
//查询student数据库获取结果集ds
stringsqlconnstr=ConfigurationManager.ConnectionStrings["ConnectionString"].ConnectionString;
DataSetds=newDataSet（）;
using（SqlConnectionsqlconn=newSqlConnection（sqlconnstr））
{
SqlDataAdaptersqld=newSqlDataAdapter（"select*fromstudent",sqlconn）;
sqld.Fill（ds,"tabstudent"）;
}
//以数据集中名为tabstudent的DataTable作为数据源，为控件绑定数据
GridView1.DataSource=ds.Tables["tabstudent"].DefaultView;
GridView1.DataBind（）;//把数据源里的数据绑定在控件上
//label中显示运行状态
Label1.Text="查找成功";
}
8.3.2设定GridView绑定列和模板列
通过设置GridView控件的绑定列属性使其呈现不同的列样式，实现数据的编辑和修改，或编辑模板列定制所需的列样式和功能。
在实际应用的时候，根据需要显示的数据类型，选择要绑定的列类型并设置其映射到数据集的字段名称和呈现样式（设置绑定列后GridView中将只显示映射列数据，否则系统将默认以BoundField类型显示数据源表中的所有列）
GridView控件中的列及其类型（P188）
CommandField有3中类型：
（1）编辑、更新、取消；
（2）选择；（3）删除
对应的事件：
RowEditing、RowUpdating、RowDeleting、RowCancelingEdit
为对应事件编写代码实现相应按钮的功能
[例8-4]演示为GridView控件设置绑定列
操作步骤：
（1）添加绑定列并绑定到字段；
（2）数据绑定；
（3）为命令按钮绑定事件处理方法；
（4）为每个事件处理方法添加代码。
主要代码：
usingSystem;
usingSystem.Data;
usingSystem.Configuration;
usingSystem.Collections;
usingSystem.Web;
usingSystem.Web.Security;
usingSystem.Web.UI;
usingSystem.Web.UI.WebControls;
usingSystem.Web.UI.WebControls.WebParts;
usingSystem.Web.UI.HtmlControls;
usingSystem.Data.SqlClient;
publicpartialclassgview2:
System.Web.UI.Page
{
protectedvoidPage_Load（objectsender,EventArgse）
{
if（!
Page.IsPostBack）bindgrid（）;
}
voidbindgrid（）
{
stringsqlconnstr=ConfigurationManager.ConnectionStrings["ConnectionString"].ConnectionString;;
DataSetds=newDataSet（）;
using（SqlConnectionsqlconn=newSqlConnection（sqlconnstr））
{
SqlDataAdaptersqld=newSqlDataAdapter（"selectno,name,birth,addressfromstudent",sqlconn）;
sqld.Fill（ds,"tabstudent"）;
}
//判断是否已经进行排序，如果是则按照ViewState中存储的信息生成排序后的DataView对象
if（ViewState["SortDirection"]==null）
GridView1.DataSource=ds.Tables["tabstudent"].DefaultView;
else
{
DataViewSortedDV=newDataView（ds.Tables["tabstudent"]）;
SortedDV.Sort=ViewState["SortExpression"].ToString（）+""+ViewState["SortDirection"].ToString（）;
GridView1.DataSource=SortedDV;
}
GridView1.DataBind（）;
}
protectedvoidGridView1_RowEditing（objectsender,GridViewEditEventArgse）
{
GridView1.EditIndex=e.NewEditIndex;
bindgrid（）;
}
protectedvoidGridView1_RowUpdating（objectsender,GridViewUpdateEventArgse）
{
stringsqlconnstr=ConfigurationManager.ConnectionStrings["ConnectionString"].ConnectionString;;
SqlConnectionsqlconn=newSqlConnection（sqlconnstr）;
//提交行修改
try
{
sqlconn.Open（）;
SqlCommandComm=newSqlCommand（）;
Comm.Connection=sqlconn;
Comm.CommandText="updatestudentsetname=@name,birth=@birth,address=@addresswhereno=@no";
Comm.Parameters.AddWithValue（"@no",GridView1.DataKeys[e.RowIndex].Value.ToString（））;
Comm.Parameters.AddWithValue（"@name",（（TextBox）GridView1.Rows[e.RowIndex].Cells[1].Controls[0]）.Text）;
Comm.Parameters.AddWithValue（"@birth",（（TextBox）GridView1.Rows[e.RowIndex].Cells[2].Controls[0]）.Text）;
Comm.Parameters.AddWithValue（"@address",（（TextBox）GridView1.Rows[e.RowIndex].Cells[3].Controls[0]）.Text）;
Comm.ExecuteNonQuery（）;
sqlconn.Close（）;
sqlconn=null;
Comm=null;
}
catch（Exceptionex）
{
Response.Write（"数据库更新出错"+ex.ToString（））;
}
GridView1.EditIndex=-1;
bindgrid（）;
}
protectedvoidGridView1_RowCancelingEdit（objectsender,GridViewCancelEditEventArgse）
{
GridView1.EditIndex=-1;
bindgrid（）;
}
protectedvoidGridView1_RowDeleting（objectsender,GridViewDeleteEventArgse）
{
//设置数据库连接
stringsqlconnstr=ConfigurationManager.ConnectionStrings["ConnectionString"].ConnectionString;;
SqlConnectionsqlconn=newSqlConnection（sqlconnstr）;
sqlconn.Open（）;
//删除行处理
Stringsql="deletefromstudentwhereno='"+GridView1.DataKeys[e.RowIndex].Value.ToString（）+"'";
SqlCommandComm=newSqlCommand（sql,sqlconn）;
Comm.ExecuteNonQuery（）;
sqlconn.Close（）;
sqlconn=null;
Comm=null;
GridView1.EditIndex=-1;
bindgrid（）;
}
}
8.3.3GridView的排序
GridView控件提供了用于实现排序功能的接口，通过设置相关属性并实现排序事件的处理代码就可以完成排序功能。
GridView的AllSorting=true;
相应列的SortExpression=yes；
GridView的Sorting事件中
DataView的Sort赋值为“字段名ASC/DESC”
[例8-5]演示为GridView控件实现排序
操作步骤：
（1）设置GridView属性AllowSorting为True；
（2）设置作为排序关键字的列的SortExpression属性为排序字段，比如“no”；
（3）添加排序事件处理方法；
（4）为排序事件处理方法添加代码。
主要代码：
protectedvoidGridView1_Sorting（objectsender,GridViewSortEventArgse）
{
if（ViewState["SortDirection"]==null）ViewState["SortDirection"]="DESC";
if（ViewState["SortDirection"].ToString（）=="ASC"）
ViewState["SortDirection"]="DESC";
else
ViewState["SortDirection"]="ASC";
ViewState["SortExpression"]=e.SortExpression;
this.bindgrid（）;
}
8.3.4GridView的分页
GridView控件提供了内置的分页功能，绑定数据后只要设置分页相关属性系统即可自动完成分页功能，我们只需在分页导航按钮的单击事件处理方法中添加代码，设置当前要显示的页索引并重新绑定数据即可。
GridView的AllPaging=true;PageIndex=当前页索引；PageSize=每页行数；PageSettings为分页模式；
GridView的PageIndexChanging事件中重新绑定数据。
[例8-6]演示为GridView控件实现分页
操作步骤：
（1）设置GridView的AllowPaging、PageIndex、PageSize和PageSettings属性；
（2）添加PageIndexChanging和DataBound事件处理方法；
（4）为PageIndexChanging和DataBound事件处理方法添加代码。
主要代码：
protectedvoidGridView1_PageIndexChanging（objectsender,GridViewPageEventArgse）
{
//设置要显示的页的索引并重新绑定数据
GridView1.PageIndex=e.NewPageIndex;
bindgrid（）;
}
protectedvoidGridView1_DataBound（objectsender,EventArgse）
{
//分页数据绑定前设置当前页信息
Label2.Text="共"+（GridView1.PageCount）.ToString（）+"页";
Label1.Text="第"+（GridView1.PageIndex+1）.ToString（）+"页";
Label3.Text=string.Format（"总页数：
{0}，当前页：
{1}",GridView1.PageCount,GridView1.PageIndex+1）;
}
以下内容属于第19次课：
8.4DataList和FormView控件
DataList和FormView控件以项为单位组织和呈现数据（GridView以列为单位），每一项对应于关系数据集的一条记录（行），通过定义和设置不同的项模板定制每一项的显示样式，绑定数据后控件将按照项模板重复显示数据源的每条记录。
8.4.1DataList的数据绑定
DataList控件中通过自定义模板设置数据的显示样式，根据不同的需要定义不同类型的项模板，DataList控件根据项的运行时状态自动加载相应的模板显示数据。
例如当某一项被选定后将会以SelectedItemTemplate模板呈现数据，编辑功能被激活时将以EditItemTemplate模板呈现数据。
它支持如下模板类型：
ItemTemplate：
包含一些HTML元素和控件，将为数据源中的每一行呈现一次这些HTML元素和控件。
AlternatingItemTemplate：
包含一些HTML元素和控件，将为数据源中的每两行呈现一次这些HTML元素和控件。
通常，您可以使用此模板来为交替行创建不同的外观，例如指定一个与在ItemTemplate属性中指定的颜色不同的背景色。
SelectedItemTemplate：
包含一些元素，当用户选择DataList控件中的某一项时将呈现这些元素。
通常，您可以使用此模板来通过不同的背景色或字体颜色直观地区分选定的行。
还可以通过显示数据源中的其他字段来展开该项。
EditItemTemplate：
指定当某项处于编辑模式中时的布局。
此模板通常包含一些编辑控件，如TextBox控件。
HeaderTemplate和FooterTemplate：
包含在列表的开始和结束处分别呈现的文本和控件。
SeparatorTemplate：
包含在每项之间呈现的元素。
典型的示例可能是一条直线（使用HR元素）。
例8-7
8.4.2FormView控件的数据呈现和处理
FormView控件提供了内置的数据处理功能，只需绑定到支持这些功能的数据源控件，并进行配置，无需编写代码就可以实现对数据的分页和增删改功能。
要使用FormView内置的增删改功能需要为更新操作提供EditItemTemplate和InsertItemTemplate模板，FormView控件显示指定的模板以提供允许用户修改记录内容的用户界面。
由于FormView控件的各个项通过自定义模板来呈现，因此控件并不提供内置的实现某一功能（如删除）的特殊按钮类型，而是通过按钮控件的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事件中先判断用户的输入值进行验证，满足要求后才访问数据库，否则取消操作。
升级会员 