静态网页设计教程(5数据绑定与显示).ppt

静态网页设计教程学习情境五,数据绑定与显示,回顾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.Page.ClientScript.RegisterStartupScript(this.GetType(),alert(用户名或者密码错误！););UserManager.AddUser(user);,此处应该使用单引号,预习检查,GridView控件有哪两种数据绑定方式？有哪几种数据源控件？,本章任务,完成书籍分类维护模块图书列表分页可多选，实现多个图书分类的调整高亮显示鼠标所在行（光棒效果）图书详细显示页面,本章目标,能熟练使用GridView进行数据的查询与展示熟练使用ObjectDataSource控件绑定业务逻辑层返回的对象,数据展示,数据展示的两种实现方法,使用数据源控件，可以实现快速开发,手写代码实现,简单设置实现,数据源控件,Web服务器,数据库,展示数据,什么是数据源控件？,数据源控件,快速实现多种常用的数据源进行展示和交互快速完成对数据表增删改查操作是ASP.NET2.0引入的一个新的数据抽象层,学习过的数据源控件,“面包屑”导航控件使用的SiteMapDataSource,TreeView导航控件使用的XmlDataSource,数据源控件,VS2005内置的五种数据源控件SqlDataSourceAccessDataSourceObjectDataSourceXmlDataSourceSiteMapDataSource,SqlDataSource允许访问支持ADO.NET数据提供程序的所有数据源。可访问ODBC、SQL Server等,ObjectDataSource可以对业务对象或其他返回数据的类执行特定的数据访问,XmlDataSource可以对XML文档执行特定访问，包括物理访问和内存访问。,SiteMapDataSource可以对站点地图提供程序所存储的Web站点执行特定的站点地图数据访问,数据源控件,数据源控件类的层次结构图：,Control类,普通数据源控件,层次化数据源控件,ObjectDataSource,SqlDataSource,SiteMapDataSource,XMLDataSource,AccessDataSource,所有数据源控件都派生于Control类,ObjectDataSource重要属性,手写代码方式,this.gvMain.DataSource=UserManager.GetAllUsers();this.gvMain.DataBind();,获取数据的方法,展示数据的控件,指定数据集合,数据绑定方法,注意：数据源控件方式只要指定数据源id即可；DataSource方式在指定完数据源后必须使用绑定方法。,数据绑定控件,数据绑定控件可以用来展示和绑定数据数据源控件不提供展示，数据绑定控件提供展示数据绑定控件可以通过数据源控件绑定数据数据绑定控件的层次结构,小结,三层结构下，采用哪个数据源控件比较合适？说明五种数据源控件各自的作用。,图书分类管理,第三波网络书店的图书分类管理,图书列表显示，显示标题和分类,分页,详情,多选效果,光棒效果,分类修改功能,数据展示,JSP中如何显示列表信息？读取数据循环记录集，组合HTML代码（使用标签库或者硬编码）.NET中的数据绑定控件能够将控件绑定到一个数据结果集 能够使用模板自定义控件的布局和样式 提供用于处理和取消事件的方便模型,GridView控件,使用GridView显示图书信息列表1、将GridView控件拖入页面。2、添加并指定ObjectDataSource数据源。3、编辑列，选择需要显示的字段，并可设置表头等。4、设置分页。5、运行，查看效果。,演示示例：图书列表,绑定列,BoundField字段表示数据绑定控件中作为文本显示的字段。可设置表头、样式等信息。DataFormatString，可设置显示字段的格式。,注：当HtmlCode属性设置为false，DataFormatString才有效,0:C,0代表对应后面的第一个参数，这里就是绑定的字段所对应的值；C是格式化标记，它可以将数字型的字段格式化为货币类型。,绑定列,TemplateField字段绑定中显示自定义内容的字段有五种模板（标头、脚注、普通项、交替项、编辑模式）,绑定字段的方法，还可以使用Eval,注意单引号的使用,Eval和Bind,Eval方法是只读方法该方法采用数据字段的值作为参数并将其作为字符串返回。当对表达式操作时候，必须用Eval 如格式化Bind方法支持读/写功能可以检索数据绑定控件的值并将任何更改提交回数据库。,d：日期；m：月份；y：年份。可能格式化为“17/05/2008”。,绑定列,ButtonField字段显示为数据绑定控件中的按钮 CommandName设置自定义命令（RowCommand）,protected void gvBooks_RowCommand()if(e.CommandName=Select)int index=Convert.ToInt32(e.CommandArgument);GridViewRow selectedRow=gvUser.Rowsindex;TableCell contactName=selectedRow.Cells1;,绑定列,CommandField一个特殊字段，显示了用于在数据绑定控件中执行选择、编辑、插入或删除操作的命令按钮 自动生成命令，无须手写对应数据源的增改查删方法HyperLinkField显示为超链接的字段比如链接到详细页面,设置链接的路径格式,设定绑定的参数集合,绑定列,ImageField字段为图像的字段绑定到包含图像 URL 的数据源中的字段指定DataImageUrlFieldCheckBoxField字段以复选框显示的布尔型字段 仅当数据源字段中有布尔型字段时使用此字段,光棒效果,protected void gvDemo_RowDataBound(object sender,GridViewRowEventArgs e)if(e.Row.RowType=DataControlRowType.DataRow)e.Row.Attributes.Add(onmouseover,currentcolor=this.style.backgroundColor;this.style.bac kgroundColor=#6699ff);e.Row.Attributes.Add(onmouseout,this.style.backgroundColor=currentcolor);,GridView数据行绑定事件,判断数据行类型,当鼠标离开时数据行背景色还原,添加属性（客户端）：当鼠标移过的时，数据行背景色变成蓝色,多选效果,function GetAllCheckBox(CheckAll)var items=document.getElementsByTagName(input);for(i=0;iitems.length;i+)if(itemsi.type=checkbox)itemsi.checked=CheckAll.checked;,获得页面上标签 为Input的控件元素,判断控件元素类 型是否为复选框,图书分类管理,完成图书分类管理模块的功能在页面相应位置放置下拉单（DropDownList）设置下拉单的数据源，并配置相关属性绑定数据源，使用ObjectDataSource控件设置需要显示的字段（DataTextField属性）设置值字段（DataValueField属性）放置“修改”按钮，并编写单击事件的代码,参考答案：图书分类管理,关键代码,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.ddlCatagory.SelectedItem.Value;ChangeCatagory(sb,catagory);/实现更新图书分类的方法,遍历行，找到选中的项,获得下拉单选中行的值,详细页面,配合图书列表中的链接项，完成图书的详细页面,显示几个常用的字段,DetailsView控件,使用DetailsView控件完成图书详细信息的显示配置数据源定义数据方法-GetBookById(Int32 id)设置参数获取方法，通过参数获取指定DetailsView的数据源为该数据源,演示示例：图书的详细页面,小结,默写实现全选效果的javascript脚本思路：获得参数（多选框对象）得到页面上所有的INPUT标签的集合遍历该集合并将符合条件的对象选中状态改为参数的选中状态,总结,数据源控件有哪几个？可否使用ObjectDataSource绑定数据访问层返回的DataSet？为什么？为绑定的行添加脚本事件的方法是什么？DropDownList控件的哪个属性可获取当前选择的项？,