后台商品显示电子商务案例分析与解决方案教学课件ppt

《后台商品显示电子商务案例分析与解决方案教学课件ppt》由会员分享，可在线阅读，更多相关《后台商品显示电子商务案例分析与解决方案教学课件ppt（25页珍藏版）》请在装配图网上搜索。

1、学习情境6 后台商品显示,廖黎莉,任务描述,熟练使用gridview控件进行数据的查询与展示 熟练使用objectdatasource控件帮顶业务逻辑层返回的对象 熟练使用gridview控件的摸板列进行数据显示,6.1商品分页显示,熟练使用objectdatasource控件绑定业务逻辑层返回的对象。 熟练使用gridview控件的模板列和绑定列显示商品信息。 正确使用数据绑定的不同方法。,1.数据源和数据绑定控件(1),数据源控件： Sqldatasource:允许访问支持ADO.NET数据提供程序的所有数据源，可以访问ODBC、SQLServer等。 Accessdatasource:继

2、承自Sqldatasource，专门用于访问Access数据库。 Objectdatasource:表示具有数据检索和更新功能的业务层对象 。 Xmldatasource:可以对XML文档执行特定访问，包括物理访问和内存访问。 Sitemapdatasource:专门处理类似站点地图的XML数据，默认数据源是.sitemap。 大多数 ASP.NET 数据源控件，如 SqlDataSource，都在两层应用程序层次结构中使用。在该层次结构中，表示层（ASP.NET 网页）可以与数据层（数据库和 XML 文件等）直接进行通信。但是，常用的应用程序设计原则是，将表示层与业务逻辑相分离，而将业务逻辑

3、封装在业务对象中。这些业务对象在表示层和数据层之间形成一层，从而生成一种三层应用程序结构。ObjectDataSource 控件通过提供一种将相关页上的数据控件绑定到中间层业务对象的方法，为三层结构提供支持。在不使用扩展代码的情况下，ObjectDataSource 使用中间层业务对象以声明方式对数据执行选择、插入、更新、删除、分页、排序、缓存和筛选操作。,1.数据源和数据源绑定控件(2),数据绑定控件： Gridview:以表格形式实现数据的展示 Detailsview:显示单条记录 Dropdownlist:下拉列表控件，显示单列属性值 数据源绑定方式 通过编写代码指定数据源 使用数据源控

4、件指定数据源,层次化数据绑定：,普通数据绑定：,列表控件,复合型控件,GridView,DetailsView,FormView,DropDownList,CheckBoxList,RadioButtonList,ListBox,BulletList,Menu,TreeView,2.Gridview控件,Gridview控件：可实现以表格的方式实现数据的展示，并集编辑、分页和排序功能。 Boundfield:用于显示普通文本（DataField），dataformatstring属性 0:c：设置显示的内容是货币类型 0:d：设置显示的内容是数字 0:yy-mm-dd：设置显示的是日期格式 T

5、emplatefield:允许以模板的形式自定义数据绑定列的内容。 标头（headertemplate） 脚注（headertemplate） 普通项（itemtemplate） 交替项（alternatingtemplate） 编辑模式（edittemplate）,GridView控件的数据绑定方式,除了前两种方式外，还有5种方式： CheckBoxField HyperLinkField:118页图6-16 ImageField ButtonField CommandField,为GridView添加属性DataKeyNames =Id,绑定字段的方法,Bind方法：可读写方法 Eval方

6、法：只读方法 注意：如果绑定的是一个对象，可以绑定在该对象的显示属性上，例： ,3.商品分页显示的实现,用后台模板新建页面 实现商品页显示的操作过程 选择新数据源，使用objectdatasource “选择业务对象”-选择productmanager类 “定义数据方法”-getallproducts方法 设置需要显示的列 编辑gridview的“全选”模板 进入“商品类别”列编辑模板 进入“id”列编辑模板 在GridView中，分页通过AllowPaging属性设为“真”,6.2多选和光棒效果,光棒效果：当鼠标停留在gridview某一数据行时，该数据行高亮显示。 多选效果：当选中标题上的

7、“全选”时，所有的复选框选中。,1.光棒效果的实现思路,高亮显示即改变某行的背景色，可通过this.style.backgroundcolor来获取或设置某对象的背景色 对数据行添加两个事件onmouseover和onmouseout。 Onmouseover为高亮颜色， onmouseout为变色之前颜色。 Gridview，onrowdatabound行绑定事件，在绑定行的时候，设置当前行的鼠标移动光棒效果。,2.多选效果的实现思路,采用客户端脚本实现，head模板上的“全选”的checkbox应为html服务器控件。 多选的checkbox控件在浏览器中显示时，最终生成checkbox。

8、可采用遍历所有的input标签，对比其type属性不是checkbox，如果是就将它的选中状态与头模板“全选”复选框状态保持一致。 在头模板“全选”的复选框上添加onclick事件，此事件出发时调用getallcheckbox(this)。,多选和光棒效果（p118）,为gridview添加rowdatabound事件，实现光棒效果 protected void gvProducts_RowDataBound(object sender, GridViewRowEventArgs e) if (e.Row.RowType = DataControlRowType.DataRow) e.Row.

9、Attributes.Add(onmouseover, currentcolor=this.style.backgroundColor;this.style.backgroundColor=#6699ff); e.Row.Attributes.Add(onmouseout, this.style.backgroundColor=currentcolor); /Tools.GridViewCSS.NormalCss(sender, e); ,多选和光棒效果（p118）,为gridview控件中的headtemplate中的checkbox添加onclick事件 function GetAllCh

10、eckBox(CheckAll) var items = document.getElementsByTagName(input); for(i=0; iitems.length;i+) if(itemsi.type=checkbox) itemsi.checked = CheckAll.checked; ,function IsCheck() var gvList = document.getElementById(); var j = 0; for (i = 1; i gvList.rows.length; i+) if (gvList.rowsi.cells0.getElementsBy

11、TagName(input)0.checked = true) j = j + 1; break; if (j = 0) alert(请选择要修改类别的记录！); return false; else return confirm(您确认要进行此操作吗？); ,6.3实现多个商品类别的调整,熟练使用dropdownlist控件与相应的数据源进行绑定。 熟练获取gridview控件中templatefield字段中相应控件的值。 正确实现商品分类的修改。,1.Dropdownlist控件,2.商品类别调整的实现思路,dropdownlist与数据源绑定 设置dropdownlist对象的相关属性

12、，以获取分类名称和分类id 实现商品类别更改,实现多个商品类别的调整（p120）,在BLL项目中添加CategoryManager类 在gridview控件下方放置一个dropdownlist控件和按钮 将dropdownlist与数据源绑定，其数据源为CategoryManager类的GetAllCateogries()方法 设置dropdownlist对象的相关属性 DataTextField字段为显示值，设为Category.Name DataValueField字段设为Category.Id,实现多个商品类别的调整（p120）,通过编辑“修改”按钮的单击事件，实现商品类别更改 prot

13、ected void btnSure_Click(object sender, EventArgs e) string sb = String.Empty; /遍历gridview的所有行，获取要更改商品的ID号 for (int i = 0; i this.gvProducts.Rows.Count; i+) CheckBox cb = (gvProducts.Rowsi.FindControl(chkSelect) as CheckBox; if (cb.Checked = true) sb += (gvProducts.Rowsi.FindControl(lblId) as Label)

14、.Text + ,; /获取要更改为的目标类别名 string catagory = this.ddlCatagory.SelectedItem.Value; ChangeCatagory(sb, catagory); ,/ 更改分类 private void ChangeCatagory(String sb, string catagory) if (sb.Length 0) sb = sb.Substring(0, sb.Length - 1); ProductsManager.ModifyCatagory(sb, catagory); Response.Redirect(ListProd

15、uctsByCategory.aspx); else Response.Write(alert(请选择要修改类别的数据！);location.href=ListProductsByCategory.aspx;); ,public static void ModifyCatagory(string ids, string catagory) DBHelper.ExecuteCommand(update Products set CategoryId= + catagory + where id in( + ids + ); ,6.4实现商品的详细信息显示,熟练使用detailsview控件显示商

16、品详细信息,1.Detailsview控件,这个控件用来显示数据库中一条记录的详细信息，与gridview控件非常相似。,2.某一商品的详细信息显示,新建商品详细信息显示页 添加detailsview控件，新建objectdatasource数据源odsproducts。 编辑字段，修改已生成字段的headertext属性。 单击“确定”按钮，完成detailsview控件的设置，浏览运行productdetails.aspx页面。 给商品列表页上的“详细”字段添加链接。,实现商品的详细信息显示（p123）,新建商品详细显示页(ProductDetails.aspx) 添加Detailsview控件，将其与数据源绑定 设置Detailsview对象的相关属性 添加“详细”字段的链接,总结归纳,在中，数据的展示可以通过数据源控件+数据绑定控件实现。 Objectdatasource可以结合三层结构使用。 Gridview控件是一种符合的控件，它使用表格形式实现多列数据的展示。 数据绑定的写法有两种：eval和bind Gridview控件上使用特效一般需要客户端javascript 脚本，可以绑定数据时，为控件增加该属性。 Dropdownlist是下拉列表控件，用于建立可单选的下拉列表。 Detailsview控件主要用于显示一个对象的内容。,