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

静态网页设计教程 学习情境五,数据绑定与显示,回顾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内置的五种数据源控件 SqlDataSource AccessDataSource ObjectDataSource XmlDataSource SiteMapDataSource,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 的数据源中的字段 指定DataImageUrlField CheckBoxField字段 以复选框显示的布尔型字段 仅当数据源字段中有布尔型字段时使用此字段,光棒效果,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的