《数据绑定控件》PPT课件.ppt

《《数据绑定控件》PPT课件.ppt》由会员分享，可在线阅读，更多相关《《数据绑定控件》PPT课件.ppt（50页珍藏版）》请在三一办公上搜索。

1、第五章,数据查询与展示:GridView,回顾2-1,TreeView控件绑定数据的方式是什么？指定DataSourceID 数据访问层有哪四类常见方法？C、R、U、D在ASP.NET中调用客户端脚本，有哪几种方法？注册客户端脚本页面输出脚本控件的Text中输出脚本,下面是注册用户的部分代码，检查有什么问题。,回顾2-2,User user=new User();user.LoginId=this.txtLoginId.Text;user.LoginPwd=this.txtLoginPwd.Text;if(UserManager.LoginIdExists(user.LoginId)this.

2、Page.ClientScript.RegisterStartupScript(this.GetType(),alert(用户名或者密码错误！););UserManager.AddUser(user);,此处应该使用单引号,预习检查,GridView控件有哪两种数据绑定方式？有哪几种数据源控件？,本章任务,完成书籍分类维护模块图书列表分页可多选，实现多个图书分类的调整高亮显示鼠标所在行（光棒效果）图书详细显示页面,本章目标,能熟练使用GridView进行数据的查询与展示熟练使用ObjectDataSource控件绑定业务逻辑层返回的对象,数据展示,数据展示的两种实现方法,使用数据源控件，可以实

3、现快速开发,手写代码实现,简单设置实现,数据源控件,Web服务器,数据库,展示数据,什么是数据源控件？,数据绑定简介 3-1,控件,FORM,数据,检索到的数据,数据,输出结果,欢迎“”,数据绑定是将数据链接到显示该数据的控件的过程,简单数据绑定简单数据控件绑定DropDownListListBoxCheckBoxListRadioButtonListBulletedList富数据控件绑定GridView、DetailsView、DataList,数据绑定简介 3-2,数据绑定简介 3-3,用于绑定控件的表达式置于 标记之间,数据绑定,简单属性,表达式,方法的结果,数据源,简单属性绑定,Ima

4、geUrl=red.bmp runat=server ImageUrl=red.bmp runat=server ImageUrl=red.bmp runat=server,代码视图,/定义成员变量protected static int vote1=0;protected static int vote2=0;protected static int vote3=0;private void btnVote1_Click(object sender,System.EventArgs e)vote1+=1;this.DataBind();private void btnVote2_Click(

5、object sender,System.EventArgs e)vote2+=1;this.DataBind();private void btnVote3_Click(object sender,System.EventArgs e)vote3+=1;this.DataBind();,HTML视图,运行结果,表达式绑定,ImageUrl=red.bmp runat=server ImageUrl=red.bmp runat=server ImageUrl=red.bmp runat=server,代码视图,HTML视图,运行结果,/定义成员变量protected static int vo

6、te1=0;protected static int vote2=0;protected static int vote3=0;private void btnVote1_Click(object sender,System.EventArgs e)vote1+=1;this.DataBind();private void btnVote2_Click(object sender,System.EventArgs e)vote2+=1;this.DataBind();private void btnVote3_Click(object sender,System.EventArgs e)vot

7、e3+=1;this.DataBind();,方法的结果绑定,protected string GetVotePercent(int vote)int sumVote=vote1+vote2+vote3;if(sumVote=0)return 0%;elsedecimal percent=100*(Convert.ToDecimal(vote)/Convert.ToDecimal(sumVote);return percent.ToString(n2)+%;,建立一个新方法,ImageUrl=red.bmp runat=server ImageUrl=red.bmp runat=server

8、ImageUrl=red.bmp runat=server,调用方法的结果绑定,运行结果,绑定到数据源中的单个值,数据源为一个集合或者列表数据源为某一个控件中绑定到的数据源,简单数据控件绑定,DropDownListListBoxCheckBoxListRadioButtonListBulletedList,数据源控件,快速实现多种常用的数据源进行展示和交互快速完成对数据表增删改查操作是引入的一个新的数据抽象层,学习过的数据源控件,“面包屑”导航控件使用的SiteMapDataSource,TreeView导航控件使用的XmlDataSource,数据源控件,VS2005内置的五种数据源控件S

9、qlDataSourceAccessDataSourceObjectDataSourceXmlDataSourceSiteMapDataSource,SqlDataSource允许访问支持ADO.NET数据提供程序的所有数据源。可访问ODBC、SQL Server等,ObjectDataSource可以对业务对象或其他返回数据的类执行特定的数据访问,XmlDataSource可以对XML文档执行特定访问，包括物理访问和内存访问。,SiteMapDataSource可以对站点地图提供程序所存储的Web站点执行特定的站点地图数据访问,数据源控件,数据源控件类的层次结构图：,Control类,普通数

10、据源控件,层次化数据源控件,ObjectDataSource,SqlDataSource,SiteMapDataSource,XMLDataSource,AccessDataSource,所有数据源控件都派生于Control类,ObjectDataSource重要属性,手写代码方式,this.gvMain.DataSource=UserManager.GetAllUsers();this.gvMain.DataBind();,获取数据的方法,展示数据的控件,指定数据集合,数据绑定方法,注意：数据源控件方式只要指定数据源id即可；DataSource方式在指定完数据源后必须使用绑定方法。,数据绑

11、定控件,数据绑定控件可以用来展示和绑定数据数据源控件不提供展示，数据绑定控件提供展示数据绑定控件可以通过数据源控件绑定数据数据绑定控件的层次结构,小结,三层结构下，采用哪个数据源控件比较合适？说明五种数据源控件各自的作用。,图书分类管理,第三波网络书店的图书分类管理,图书列表显示，显示标题和分类,分页,详情,多选效果,光棒效果,分类修改功能,数据展示,JSP中如何显示列表信息？读取数据循环记录集，组合HTML代码（使用标签库或者硬编码）.NET中的数据绑定控件能够将控件绑定到一个数据结果集 能够使用模板自定义控件的布局和样式 提供用于处理和取消事件的方便模型,GridView控件,使用Grid

12、View显示图书信息列表1、将GridView控件拖入页面。2、添加并指定ObjectDataSource数据源。3、编辑列，选择需要显示的字段，并可设置表头等。4、设置分页。5、运行，查看效果。,演示示例：图书列表,设置页眉和页脚,可使用“属性生成器”对话框设置 DataGrid 的页眉和页脚,属性生成器,使用“属性生成器”对话框指定各列的页脚文本和页眉文本,输出结果,绑定列,BoundField字段表示数据绑定控件中作为文本显示的字段。可设置表头、样式等信息。DataFormatString，可设置显示字段的格式。,注：当HtmlCode属性设置为false，DataFormatStrin

13、g才有效,0:C,0代表对应后面的第一个参数，这里就是绑定的字段所对应的值；C是格式化标记，它可以将数字型的字段格式化为货币类型。,绑定列,ImageField字段为图像的字段绑定到包含图像 URL 的数据源中的字段指定DataImageUrlFieldCheckBoxField字段以复选框显示的布尔型字段 仅当数据源字段中有布尔型字段时使用此字段,绑定列,ButtonField字段显示为数据绑定控件中的按钮 CommandName设置自定义命令（RowCommand）,protected void gvBooks_RowCommand()if(e.CommandName=Select)int

14、 index=Convert.ToInt32(e.CommandArgument);GridViewRow selectedRow=gvUser.Rowsindex;TableCell contactName=selectedRow.Cells1;,除了“选择”、“编辑、更新、取消”等执行不同任务的一些命令以外，也可以将一般按钮列添加到 DataGrid,添加按钮列,下列显示的代码在确定在 GridView 上的执行命令是否为 Convert 之后将文本形式的供应商名称转换为大写,private void dgDisplay_ItemCommand(object source,e)if(Lin

15、kButton)e.CommandSource).CommandName=Convert)lblMessage.Text=e.Item.Cells1.Text.ToUpper();,确定所单击按钮的命令名称，并执行相应的代码,单击 DataGrid 中第一行的“转换”链接后，输出结果显示如下：,绑定列,CommandField一个特殊字段，显示了用于在数据绑定控件中执行选择、编辑、插入或删除操作的命令按钮 自动生成命令，无须手写对应数据源的增改查删方法HyperLinkField显示为超链接的字段比如链接到详细页面,设置链接的路径格式,设定绑定的参数集合,使用数据库时需要执行三项基本任务，分别

16、是：选择数据更新数据删除数据,选择 DataGrid 中的行,要选择DataGrid中的记录，可使用“按钮列”中的“选择”要确定用户选择的行，可使用 DataGrid 的 SelectedIndexChanged 事件要为 dgDisplay 生成 SelectedIndexChanged 事件，可双击 dgDisplay 的“属性”窗口中显示的 SelectedIndexChanged 事件,private void dgDisplay_SelectedIndexChanged(object sender,System.EventArgs e)lblMessage.Text=“您已选定+dg

17、Display.SelectedItem.Cells1.Text;,输出结果,在 DataGrid 中选择记录,更新数据 4-1,呈现用于更新数据界面的方式之一是向用户提供一组数据，允许用户选择要更新的行,DataGrid 控件,EditItemIndex,EditCommandColumn,编辑,更新,取消,更新数据 4-2,在“属性生成器”对话框中，将“编辑、更新、取消”从“按钮列”添加到“选定的列”列表中,要为 dgDisplay 生成 EditCommand 事件处理程序，请双击 dgDisplay 的“属性”窗口中显示的 EditCommand 事件,public void dgDi

18、splay_EditCommand(object source,System.Web.e)dgDisplay.EditItemIndex=;BindGrid();,更新数据 4-3,要为 dgDisplay 生成 UpdateCommand 事件处理程序，请双击 dgDisplay 的“属性”窗口中显示的 UpdateCommand 事件,public void dgDisplay_UpdateCommand(object source,e)sqlUpdateCommand1.ParametersOriginal_pub_id.Value=;sqlUpdateCommand1.Paramete

19、rspub_id.Value=(TextBox)e.Item.Cells0.Controls0).Text;sqlUpdateCommand1.Parameterspub_name.Value=(TextBox)e.Item.Cells1.Controls0).Text;sqlUpdateCommand1.Parameterscity.Value=(TextBox)e.Item.Cells2.Controls0).Text;sqlUpdateCommand1.Parametersstate.Value=(TextBox)e.Item.Cells3.Controls0).Text;sqlUpda

20、teCommand1.Parameters“country”.Value=(TextBox)e.Item.Cells4.Controls0).Text;,try if(sqlConnection1.State=ConnectionState.Closed)sqlConnection1.Open();sqlDataAdapter1.UpdateCommand.ExecuteNonQuery();lblMessage.Text=Record Updated;dgDisplay.EditItemIndex=-1;sqlConnection1.Close();catch(SqlException ex

21、c)if(exc.Number=2627)lblMessage.Text=错误：已存在相同主键的记录;elselblMessage.Text=exc.ToString()+错误：无法更新记录，请确保字段都+已正确填写;BindGrid();,更新数据 4-4,要为 dgDisplay 生成 CancelCommand 事件处理程序，请双击 gDisplay 的“属性”窗口中显示的 CancelCommand 事件,public void dgDisplay_CancelCommand(object source,System.Web.e)dgDisplay.EditItemIndex=-1;B

22、indGrid();,这确保 DataGrid 中无记录处于编辑模式下,显示编辑模式下的 DataGrid 控件 dgDisplay,编辑模式下的 DataGrid,删除数据 2-1,要为用户给出删除行的选项，可将名为“删除”的按钮列添加到 DataGrid 控件,private void dgDisplay_DeleteCommand(object source,System.Web.e)sqlDataAdapter1.DeleteCommand.ParametersOriginal_pub_id.Value=;tryif(sqlConnection1.State=ConnectionSta

23、te.Closed)sqlConnection1.Open();sqlDataAdapter1.DeleteCommand.ExecuteNonQuery();续.,lblMessage.Text=“删除的记录;sqlConnection1.Close();catch(SqlException exc)lblMessage.Text=exc.ToString()+“错误：不能删除记录;BindGrid();,删除数据 2-2,要为 dgDisplay 生成 dgDisplay_DeleteCommand 事件处理程序，请双击 dgDisplay 的“属性”窗口中显示的 DeleteComman

24、d 事件,输出结果,删除 DataGrid 中的记录,绑定列,TemplateField字段绑定中显示自定义内容的字段有五种模板（标头、脚注、普通项、交替项、编辑模式）,绑定字段的方法，还可以使用Eval,注意单引号的使用,Eval和Bind,Eval方法是只读方法该方法采用数据字段的值作为参数并将其作为字符串返回。当对表达式操作时候，必须用Eval 如格式化Bind方法支持读/写功能可以检索数据绑定控件的值并将任何更改提交回数据库。,d：日期；m：月份；y：年份。可能格式化为“17/05/2008”。,光棒效果,protected void gvDemo_RowDataBound(objec

25、t sender,GridViewRowEventArgs e)if(e.Row.RowType=DataControlRowType.DataRow)e.(onmouseover,kgroundColor=#6699ff);e.(onmouseout,this.style.backgroundColor=currentcolor);,GridView数据行绑定事件,判断数据行类型,当鼠标离开时数据行背景色还原,添加属性（客户端）：当鼠标移过的时，数据行背景色变成蓝色,多选效果,function GetAllCheckBox(CheckAll)var items=document.getEle

26、mentsByTagName(input);for(i=0;iitems.length;i+)if(itemsi.type=checkbox)itemsi.checked=CheckAll.checked;,获得页面上标签 为Input的控件元素,判断控件元素类 型是否为复选框,图书分类管理,完成图书分类管理模块的功能在页面相应位置放置下拉单（DropDownList）设置下拉单的数据源，并配置相关属性绑定数据源，使用ObjectDataSource控件设置需要显示的字段（DataTextField属性）设置值字段（DataValueField属性）放置“修改”按钮，并编写单击事件的代码,参考

27、答案：图书分类管理,关键代码,string sb=String.Empty;for(int i=0;i this.gvBooks.Rows.Count;i+)CheckBox cb=(gvBooks.Rowsi.FindControl(chbSelect)as CheckBox;if(cb.Checked=true)sb+=(gvBooks.Rowsi.FindControl(lblId)as Label).Text+,;string catagory=this.;ChangeCatagory(sb,catagory);/实现更新图书分类的方法,遍历行，找到选中的项,获得下拉单选中行的值,详细

28、页面,配合图书列表中的链接项，完成图书的详细页面,显示几个常用的字段,DetailsView控件,使用DetailsView控件完成图书详细信息的显示配置数据源定义数据方法-GetBookById(Int32 id)设置参数获取方法，通过参数获取指定DetailsView的数据源为该数据源,演示示例：图书的详细页面,小结,默写实现全选效果的javascript脚本思路：获得参数（多选框对象）得到页面上所有的INPUT标签的集合遍历该集合并将符合条件的对象选中状态改为参数的选中状态,总结,数据源控件有哪几个？可否使用ObjectDataSource绑定数据访问层返回的DataSet？为什么？为绑定的行添加脚本事件的方法是什么？DropDownList控件的哪个属性可获取当前选择的项？,Thank you,