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

第五章,数据查询与展示: 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.Page.ClientScript.RegisterStartupScript(this.GetType( ), “, “alert(“用户名或者密码错误！“);“); UserManager.AddUser(user);,此处应该使用单引号,预习检查,GridView控件有哪两种数据绑定方式？ 有哪几种数据源控件？,本章任务,完成书籍分类维护模块 图书列表分页 可多选，实现多个图书分类的调整 高亮显示鼠标所在行（光棒效果） 图书详细显示页面,本章目标,能熟练使用GridView进行数据的查询与展示 熟练使用ObjectDataSource控件绑定业务逻辑层返回的对象,数据展示,数据展示的两种实现方法,使用数据源控件，可以实现快速开发,手写 代码实现,简单 设置实现,数据 源控件,Web服务器,数据库,展示数据,什么是数据源控件？,数据绑定简介 3-1,控件,FORM,数据,检索到的数据,数据,输出结果,欢迎 “ ”,数据绑定是将数据链接到显示该数据的控件的过程,简单数据绑定 简单数据控件绑定 DropDownList ListBox CheckBoxList RadioButtonList BulletedList 富数据控件绑定 GridView、DetailsView、DataList,数据绑定简介 3-2,数据绑定简介 3-3,用于绑定控件的表达式置于 标记之间,数据绑定,简单属性,表达式,方法的结果,数据源,简单属性绑定,“ ImageUrl=“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(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 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(object sender, System.EventArgs e) vote2 += 1; this.DataBind(); private void btnVote3_Click(object sender, System.EventArgs e) vote3 += 1; this.DataBind(); ,方法的结果绑定,protected string GetVotePercent(int vote) int sumVote = vote1 + vote2 + vote3; if (sumVote = 0) return “0%“; else decimal percent = 100 * (Convert.ToDecimal(vote) /Convert.ToDecimal(sumVote); return percent.ToString(“n2“) + “%“; ,建立一个新方法,“ ImageUrl=“red.bmp“ “ runat=“server“ “ ImageUrl=“red.bmp“ “ runat=“server“ “ ImageUrl=“red.bmp“ “ runat=“server“,调用方法的结果绑定,运行结果,绑定到数据源中的单个值,数据源为一个集合或者列表 数据源为某一个控件中绑定到的数据源,简单数据控件绑定,DropDownList ListBox CheckBoxList RadioButtonList BulletedList,数据源控件,快速实现多种常用的数据源进行展示和交互 快速完成对数据表增删改查操作 是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、运行，查看效果。,演示示例： 图书列表,设置页眉和页脚,可使用“属性生成器”对话框设置 DataGrid 的页眉和页脚,属性生成器,使用“属性生成器”对话框指定各列的页脚文本和页眉文本,输出结果,绑定列,BoundField字段 表示数据绑定控件中作为文本显示的字段。 可设置表头、样式等信息。 DataFormatString，可设置显示字段的格式。,注： 当HtmlCode属性设置为false， DataFormatString才有效,0:C,0代表对应后面的第一个参数，这里就是绑定的字段所对应的值； C是格式化标记，它可以将数字型的字段格式化为货币类型。,绑定列,ImageField字段 为图像的字段 绑定到包含图像 URL 的数据源中的字段 指定DataImageUrlField CheckBoxField字段 以复选框显示的布尔型字段 仅当数据源字段中有布尔型字段时使用此字段,绑定列,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; ,除了“选择”、“编辑、更新、取消”等执行不同任务的一些命令以外，也可以将一般按钮列添加到 DataGrid,添加按钮列,下列显示的代码在确定在 GridView 上的执行命令是否为 Convert 之后将文本形式的供应商名称转换为大写,private void dgDisplay_ItemCommand(object source, System.Web.UI.WebControls.DataGridCommandEventArgs e) if (LinkButton)e.CommandSource).CommandName = “Convert“) lblMessage.Text = e.Item.Cells1.Text.ToUpper(); ,确定所单击按钮的命令名称，并执行相应的代码,单击 DataGrid 中第一行的“转换”链接后，输出结果显示如下：,绑定列,CommandField 一个特殊字段，显示了用于在数据绑定控件中执行选择、编辑、插入或删除操作的命令按钮 自动生成命令，无须手写 对应数据源的增改查删方法 HyperLinkField 显示为超链接的字段 比如链接到详细页面,设置链接的路径格式,设定绑定的参数集合,使用数据库时需要执行三项基本任务，分别是： 选择数据 更新数据 删除数据,选择 DataGrid 中的行,要选择DataGrid中的记录，可使用“按钮列”中的“选择” 要确定用户选择的行，可使用 DataGrid 的 SelectedIndexChanged 事件 要为 dgDisplay 生成 SelectedIndexChanged 事件，可双击 dgDisplay 的“属性”窗口中显示的 SelectedIndexChanged 事件,private void dgDisplay_SelectedIndexChanged(object sender, System.EventArgs e) lblMessage.Text = “您已选定 “ + dgDisplay.SelectedItem.Cells1.Text; ,输出结果,在 DataGrid 中选择记录,更新数据 4-1,呈现用于更新数据界面的方式之一是向用户提供一组数据，允许用户选择要更新的行,DataGrid 控件,EditItemIndex,EditCommandColumn,编辑,更新,取消,更新数据 4-2,在“属性生成器”对话框中，将“编辑、更新、取消”从“按钮列”添加到“选定的列”列表中,要为 dgDisplay 生成 EditCommand 事件处理程序，请双击 dgDisplay 的“属性”窗口中显示的 EditCommand 事件,public void dgDisplay_EditCommand(object source, System.Web. UI.WebControls.DataGridCommandEventArgs e) dgDisplay.EditItemIndex = e.Item.ItemIndex; BindGrid(); ,更新数据 4-3,要为 dgDisplay 生成 UpdateCommand 事件处理程序，请双击 dgDisplay 的“属性”窗口中显示的 UpdateCommand 事件,public void dgDisplay_UpdateCommand(object source , System.Web.UI.WebControls.DataGridCommandEventArgs e) sqlUpdateCommand1.Parameters“Original_pub_id“.Value = dgDisplay.DataKeys(int)e.Item.ItemIndex; sqlUpdateCommand1.Parameters“pub_id“.Value = (TextBox)e.Item.Cells0.Controls0).Text; sqlUpdateCommand1.Parameters“pub_name“.Value= (TextBox)e.Item.Cells1.Controls0).Text; sqlUpdateCommand1.Parameters“city“.Value = (TextBox)e.Item.Cells2.Controls0).Text; sqlUpdateCommand1.Parameters“state“.Value = (TextBox)e.Item.Cells3.Controls0).Text; sqlUpdateCommand1.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 exc) if (exc.Number = 2627) lblMessage.Text = “错误：已存在相同主键的记录 “; else lblMessage.Text = exc.ToString() + “错误：无法更新记录，请确保字段都“ + “已正确填写“; BindGrid(); ,更新数据 4-4,要为 dgDisplay 生成 CancelCommand 事件处理程序，请双击 gDisplay 的“属性”窗口中显示的 CancelCommand 事件,public void dgDisplay_CancelCommand(object source, System.Web. UI.WebControls.DataGridCommandEventArgs e) dgDisplay.EditItemIndex = -1; BindGrid(); ,这确保 DataGrid 中无记录处于编辑模式下,显示编辑模式下的 DataGrid 控件 dgDisplay,编辑模式下的 DataGrid,删除数据 2-1,要为用户给出删除行的选项，可将名为“删除”的按钮列 添加到 DataGrid 控件,private void dgDisplay_DeleteCommand(object source, System.Web. UI.WebControls.DataGridCommandEventArgs e) sqlDataAdapter1.DeleteCommand.Parameters“Original_pub_id“.Value = dgDisplay.DataKeys(int)e.Item.ItemIndex; try if(sqlConnection1.State = ConnectionState.Closed) sqlConnection1.Open(); sqlDataAdapter1.DeleteCommand.ExecuteNonQuery(); 续,lblMessage.Text = “删除的记录“; sqlConnection1.Close(); catch (SqlException exc) lblMessage.Text = exc.ToString() + “错误：不能删除记录“; BindGrid(); ,删除数据 2-2,要为 dgDisplay 生成 dgDisplay_DeleteCommand 事件处理程序，请双击 dgDisplay 的“属性”窗口中显示的 DeleteCommand 事件,输出结果,删除 DataGrid 中的记录,绑定列,TemplateField字段 绑定中显示自定义内容的字段 有五种模板（标头、脚注、普通项、交替项、编辑模式）, ,绑定字段的方法，还可以使用Eval,注意单引号的使用,Eval和Bind,Eval 方法是只读方法 该方法采用数据字段的值作为参数并将其作为字符串返回。 当对表达式操作时候，必须用Eval 如 格式化 Bind 方法支持读/写功能 可以检索数据绑定控件的值并将任何更改提交回数据库。,d：日期；m：月份；y：年份。可能格式化为“17/05/2008”。,光棒效果,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.ch