1 / 65

第七章

第七章. Web页面数据显示技术. 本章目标. 掌握 DataList 数据显示控件的使用方法。 掌握 Repeater 数据显示控件的使用方法。 掌握 GridView 数据显示控件的使用方法。. 学习情境 7-1. 实现“ MYESHOP” 新品速递栏目设计. 教学目标： 掌握 DataList 数据显示控件的使用方法 教学重点： DataList 控件的属性、事件和方法 教学难点： 编写事件处理程序代码 教学课时： 2 学时. 工作任务. 实现 “ 新品速递 ” 栏目. 任务分析. 使用 DataList 控件 创建 DataList 控件模板

niran
Télécharger la présentation

第七章

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. 第七章 Web页面数据显示技术

  2. 本章目标 • 掌握DataList数据显示控件的使用方法。 • 掌握Repeater数据显示控件的使用方法。 • 掌握GridView数据显示控件的使用方法。

  3. 学习情境7-1 实现“MYESHOP”新品速递栏目设计

  4. 教学目标： • 掌握DataList数据显示控件的使用方法 • 教学重点： • DataList控件的属性、事件和方法 • 教学难点： • 编写事件处理程序代码 • 教学课时：2学时

  5. 工作任务 • 实现“新品速递”栏目

  6. 任务分析 • 使用DataList控件 • 创建DataList控件模板 • 访问“新品速递”栏目对应数据库

  7. 1.打开Default.aspx，在“设计”模式下删除原先静态的“新品速递”内容，添加一个DataList控件，命名为“DlNewProductInfo”。1.打开Default.aspx，在“设计”模式下删除原先静态的“新品速递”内容，添加一个DataList控件，命名为“DlNewProductInfo”。

  8. 2.在Default.aspx 的“源”视图中设置DataList控件的属性和模板，需要对“DlNewProductInfo”控件代码做如下修改。 <asp:DataList ID="DlNewProductInfo" runat="server" CellPadding="0" CellSpacing="20" HorizontalAlign="Center" RepeatColumns="5" RepeatDirection="Horizontal" CaptionAlign="Top"> <ItemStyle Height="250px" VerticalAlign="Top" /> <ItemTemplate> <a href="ShowProduct.aspx?ProductId=<%#Eval("ProductId") %>" target="_blank"> <img src="/UploadImages/<%#Eval("ProductSmallPic") %>" width="170" height="170" class="ProductImg" /> </a> <br /> <div class="ProductName"> <a href="ShowProduct.aspx?ProductId=<%#Eval("ProductId") %>" target="_blank"><%#Eval("ProductName") %></a> </div> <font color="#999999">市场价：￥<strike><%#Eval("ProductMarketPrice") %></strike></font> <font color="#990008"><b>售价：￥<%#Eval("ProductPrice") %></b></font> </ItemTemplate> </asp:DataList>

  9. 3.打开“Default.aspx.cs”，编写如下代码 #region private void BindNewProductInfo() 绑定新品速递 /// <summary> /// 绑定新品速递 /// </summary> private void BindNewProductInfo() { BLL.BLL_Table_ProductInfo bll = new BLL.BLL_Table_ProductInfo(); this.DlNewProductInfo.DataSource=bll.GetList(5, "", "ProductId"); this.DlNewProductInfo.DataBind(); } #endregion 9

  10. 4.在BLL层中创建“BLL_Table_ProductInfo.cs”，编写GetList方法；4.在BLL层中创建“BLL_Table_ProductInfo.cs”，编写GetList方法； 5.在DAL层中创建“DAL_Table_ProductInfo.cs”，编写GetList方法； 6.在DBUtility层中创建“DbHelperSQL.cs”，编写Query方法； 7.打开“Web.config”文件，编辑数据库连接字符串。 10

  11. 关键代码回顾 <ItemTemplate> <a href="ShowProduct.aspx?ProductId=<%#Eval("ProductId") %>" target="_blank"> <img src="/UploadImages/<%#Eval("ProductSmallPic") %>" width="170" height="170" class="ProductImg" /> </a> <br /> <div class="ProductName"> <a href="ShowProduct.aspx?ProductId=<%#Eval("ProductId") %>" target="_blank"><%#Eval("ProductName") %></a> </div> <font color="#999999">市场价：￥<strike><%#Eval("ProductMarketPrice") %></strike></font> <font color="#990008"><b>售价：￥<%#Eval("ProductPrice") %></b></font> </ItemTemplate>

  12. 7.1 .1 DataList控件 模板（Template）就是样板或标准规格，在ASP.NET中模板是一个声明性代码，其HTML标记为 模板包含表示元素，如普通文本、数据、格式标记等，它为模板化的ASP.NET服务器控件提供可视化界面 模板标记必须嵌套在它所属的模板控件的HTML标记之内 <TemplateName> <%--该模板内显示的内容与布局--%> </TemplateName> 12

  13. 1. DataList控件支持的模板 DataList中列表项的内容和布局是使用“模板”定义的，基本语法如下 <asp:DataList id=" DlNewProductInfo " runat="server"> <ItemTemplate> </ItemTemplate> <HeaderTemplate> </HeaderTemplate> <FooterTemplate> </ FooterTemplate> < SeparatorTemplate > </ SeparatorTemplate > < AlternatingItemTemplate > </ AlternatingItemTemplate> < SelectedItemTemplate > </ SelectedItemTemplate > < EditItemTemplate > </ EditItemTemplate > </asp:DataList> 13

  14. 2. DataList控件的模板编辑器 DataList控件的模板生成器可以方便地生成项模板、页眉页脚模板和分隔符模板 【例7-1】使用模板编辑器实现“精品推荐”栏目。 14

  15. 3. DataList控件的常用属性 DataSource属性： 绑定到控件的数据源，可以是数组、数据集、数据视图等。DataList控件将其ItemTemplate模板和AlternatingItemTemplate模板绑定到DataSource属性声明和引用的数据模型上。 DataMember属性： 若DataSource属性指定的是一个数据集，则DataMember属性指定到该数据集的一个数据表。 DataKeyField属性： 用于填充DataKey集合的数据源中的字段，一般应指定到数据表的主键字段。 15

  16. 3. DataList控件的常用属性 RepeatColumns属性： 用于布局中的列数，默认值为0（一列）。 RepeatDirection属性： 用于布局中的方向，默认为Vertical(垂直布局)，也可以选择Horizontal(水平布局)。 RepeatLayout属性： 控件的布局形式，当为Table时，以表格形式显示数据；为Flow时将不以表格形式显示数据。 SelectedIndex属性： 当前选定项的索引号，未选中任何项时为-1。 16

  17. 4. DataList控件的常用事件 DataList是容器控件，在DataList内可以加入其他子控件。子控件（如按钮Button）本身可以引发事件，事件会反升至容器控件（DataList），这样的事件就称为反升事件。这时事件处理程序不再写在子控件的事件中，而是要写在DataList控件的反升事件中。 17

  18. 4. DataList控件的常用事件 按钮子控件与反升事件的名称对应取决于按钮的CommandName属性，对应规则为： (1) 按钮的CommandName属性设置为delete，将引发DataList控件的 DeleteCommand事件。 (2)按钮的CommandName属性设置为update，将引发DataList控件的 UpdateCommand事件。 (3)按钮的CommandName属性设置为edit，将引发DataList控件的 EditCommand事件。 18

  19. 4. DataList控件的常用事件 (4)按钮的CommandName属性设置为cancel，将引发DataList控件的 CancelCommand事件。 (5)若按钮的CommandName属性设置不为上述各项，将引发DataList控件的 ItemCommand事件。 (6)特别地，按钮的CommandName属性设置为select，除了引发DataList控件的ItemCommand事件外，还会引发SelectedIndexChange事件。 19

  20. 4. DataList控件的常用事件 ItemCommand事件： 在控件生成事件时发生。 SelectedIndexChange事件： 当控件内的选择项发生改变后激发。 ItemCreated事件： 在控件内创建项时激发。 20

  21. 7.1.2 格式化绑定数据 当需要为绑定数据设置显示形式的时候，可以在Eval()方法的最后增加一个参数，形式为<%#Eval(“字段名”,“{0:c}”)%> 其中{0:c}和String类的Format方法形式一样，即c代表货币、p代表百分号、d代表短日期格式显示、f代表浮点数、f3代表小数点后三位等。

  22. 【例7-2】使用格式化数据的方法，显示“新品速递”栏目中的价格。 <font color="#999999">市场价：<strike><%#Eval("ProductMarketPrice","{0:c}") %></strike></font> <font color="#990008"><b>售价：<%#Eval("ProductPrice", "{0:c}")%></b></font>

  23. 小结 • Datalist控件包括哪两种设计模式？ • Datalist控件可用模板有哪些？ • Datalist控件怎么显示数据信息？ 23

  24. 作业 使用DataList控件设计管理员模块中的一个信息展示页面

  25. 学习情境7-2 实现“MYESHOP”最新动态栏目设计 25

  26. 教学目标： 掌握Repeater数据显示控件的使用方法 教学重点： Repeater控件的属性、事件和方法 教学难点： 编写事件处理程序代码 教学课时：4学时 26

  27. 工作任务 实现“最新动态”栏目 27

  28. 任务分析 使用Repeater控件 创建Repeater控件模板 访问“最新动态”栏目对应数据库 28

  29. 1.打开Default.aspx，删除原先静态的“最新动态”内容，添加一个Repeater控件，命名为“RepNewsInfo”。1.打开Default.aspx，删除原先静态的“最新动态”内容，添加一个Repeater控件，命名为“RepNewsInfo”。 29

  30. <asp:Repeater ID="RepNewsInfo" runat="server"> <HeaderTemplate> <table width="100%" cellpadding="0" cellspacing="10" border="0"> </HeaderTemplate> <ItemTemplate> <tr> <td width="6"><img src="/images/dian.jpg" /></td> <td> <a href="/ShowNews.aspx?NewsId=<%#Eval("NewsId") %>" target="_blank"> <%#Eval("NewsTitle")%> </a></td> </tr> </ItemTemplate> <FooterTemplate> </table> </FooterTemplate> </asp:Repeater> 30 2.在Default.aspx 的“源”中设置Repeater的属性和模板，对“RepNewsInfo”控件代码做如下修改 。

  31. 3.打开“Default.aspx.cs”，编写如下代码 #region private void BindNewsInfo() 绑定新闻信息 /// <summary> /// 绑定新闻信息 /// </summary> private void BindNewsInfo() { BLL.BLL_Table_NewsInfo bll = new BLL.BLL_Table_NewsInfo(); this.RepNewsInfo.DataSource = bll.GetList(10, "", "NewsAddedTime"); this.RepNewsInfo.DataBind(); } #endregion 31

  32. 4.在BLL层中创建“BLL_Table_NewsInfo.cs”，编写GetList方法；4.在BLL层中创建“BLL_Table_NewsInfo.cs”，编写GetList方法； 5.在DAL层中创建“DAL_Table_ NewsInfo.cs”，编写GetList方法； 6.打开DBUtility层的“DbHelperSQL.cs”，编写代码（这部分代码在实现“新品速递”栏目时已经写好）； 7.打开“Web.config”文件，编辑数据库连接字符串（这部分代码在实现“新品速递”栏目时已经写好） 。 32

  33. 关键代码回顾 <ItemTemplate> <tr> <td width="6"><img src="/images/dian.jpg" /></td> <td> <a href="/ShowNews.aspx?NewsId=<%#Eval("NewsId") %>" target="_blank"> <%#Eval("NewsTitle")%> </a> </td> </tr> </ItemTemplate> 33

  34. 7.2.1 Repeater控件1.Repeater控件模板 • AlternatingItemTemplate用于定义交替项呈现的内容和布局 • SeparatorTemplate模板用于定义Repeater控件各项之间的分隔符。 <AlternatingItemTemplate> <%--该模板内显示的内容与布局--%> </AlternatingItemTemplate> <SeparatorTemplate> <%--显示项之间的分割符--%> </SeparatorTemplate> 34

  35. 1.Repeater控件模板 • HeaderTemplate模板和FooterTemplate模板分别定义Repeater控件的页眉和页脚的内容和布局。 <HeaderTemplate> <%--页眉内容和布局--%> </HeaderTemplate> FooterTemplate模板的HTML标记为： <FooterTemplate> <%--页脚内容和布局--%> </FooterTemplate> 35

  36. 2. DataList控件的模板编辑器 • 【例7-3】在“MYESHOP”管理员模块中包含了“订单管理”功能，用来管理用户购买物品时下的订单，要求使用Repeater控件绑定数据库数据来实现该部分功能。 36

  37. 小结 Repeater控件包括哪两种设计模式？ Repeater控件可用模板有哪些？ Repeater控件怎么显示数据信息？ 37

  38. 学习情境7-3 “MYESHOP”购物车设计 38

  39. 教学目标： 掌握GridView数据显示控件的使用方法 教学重点： GridView控件的属性、事件和方法 教学难点： 编写事件处理程序代码 教学课时：6学时 39

  40. 工作任务 “MYESHOP”购物车设计 40

  41. 任务分析 使用GridView控件 创建GridView控件模板 访问购物车对应数据库 41

  42. 1.打开“ProductShopCart.aspx”，在购物车的位置编写代码1.打开“ProductShopCart.aspx”，在购物车的位置编写代码 <asp:GridView ID="GvShopCart" runat="server" BackColor="White" BorderColor="#cccccc" BorderWidth="1px" CellPadding="4" GridLines="Horizontal" Width="100%" AutoGenerateColumns="False" BorderStyle=Solid onrowcommand="GvShopCart_RowCommand" EmptyDataText="购物车中没有商品，请选购" onrowdeleting="GvShopCart_RowDeleting" > <FooterStyle BackColor="White" ForeColor="#333333" /> <PagerStyle BackColor="#336666" ForeColor="White" HorizontalAlign="Center" /> <SelectedRowStyle BackColor="#339966" ForeColor="White" Font-Bold="True" /> <HeaderStyle BackColor="#cccccc" Font-Bold="True" ForeColor="#990008" /> <RowStyle BackColor="White" ForeColor="#333333" /> <Columns> …… </Columns> </asp:GridView> 42

  43. <tr> <td align=right height=“30”> 产品数量总计： <asp:Label ID="LbShopCartNum“ runat="server" Text="0" style="font-weight: 700"></asp:Label>件产品金额总计(不含运费)：￥<asp:Label ID="LbShopCartTotal" runat="server" Text="0" style="font-weight: 700"></asp:Label>&nbsp;&nbsp;</td> </tr> <tr> <td align=right height="40"> <asp:Button ID="Btn" runat="server" Height="40px" Text="￥去结算" Width="119px" onclick="Btn_Click" /> </td> </tr> 43 2.在“ProductShopCart.aspx”中添加结算数量和结算金额总计信息和“去结算”按钮，编写如下代码：

  44. 3.打开“ProductShopCart.aspx.cs”，编写如下代码： protected void Page_Load(object sender, EventArgs e) { if (!IsPostBack) { if (Session["UserId"] == null || Session["UserEmail"] == null) { Response.Redirect("UserLogin.aspx"); } else { BindProductShopCart(Convert.ToInt32(Session["UserId"].ToString())); BindNum(); } } } 44

  45. 4.在“ProductShopCart.aspx.cs”，编写BindProductShopCart方法： #region private void BindProductShopCart(int UserId) 绑定购物车信息 private void BindProductShopCart(int UserId) { BLL.BLL_Table_ShopCartInfo bll = new BLL.BLL_Table_ShopCartInfo(); this.GvShopCart.DataSource=bll.GetList(" UserId=" + UserId); this.GvShopCart.DataKeyNames = new string[] { "ShopCartId" }; this.GvShopCart.DataBind(); this.LbShopCartNum.Text = "0"; this.LbShopCartTotal.Text = "0"; } #endregion 45

  46. 5.在“ProductShopCart.aspx.cs”，编写BindNum方法： #region private void BindNum() 绑定产品数量和总金额 private void BindNum() { double moneysum = 0; double productnum = 0; for (int i = 0; i < this.GvShopCart.Rows.Count; i++) { Label lbShopCartId = (Label)(this.GvShopCart.Rows[i].Cells[5].FindControl("LbShopCartId")); CheckBox cb = (CheckBox)(this.GvShopCart.Rows[i].Cells[0].FindControl("ChbSale")); …… } …… } #endregion 46

  47. 6.在“ProductShopCart.aspx.cs”，编写GvShopCart_RowCommand代码： protected void GvShopCart_RowCommand(object sender, GridViewCommandEventArgs e) { …… if (e.CommandName == "Sub") { if (SaleNum - 1 == 0) { Page.ClientScript.RegisterStartupScript(typeof(string), "aa", "<script>alert('数量已经最小，不能继续减少！');</script>"); } else bll.UpdateSaleNum(ShopCartId, SaleNum - 1); } …… BindProductShopCart(Convert.ToInt32(Session["UserId"].ToString())); BindNum(); } 47

  48. 7.在“ProductShopCart.aspx.cs”，编写GvShopCart_RowDeleting代码： protected void GvShopCart_RowDeleting(object sender, GridViewDeleteEventArgs e) { string ShopCartId = this.GvShopCart.DataKeys[e.RowIndex].Value.ToString(); BLL.BLL_Table_ShopCartInfo bll = new BLL.BLL_Table_ShopCartInfo(); if (bll.Delete(Convert.ToInt32(ShopCartId))) { Response.Redirect("ProductShopCart.aspx"); } BindProductShopCart(Convert.ToInt32(Session["UserId"].ToString())); BindNum(); } 48

  49. 8.在“ProductShopCart.aspx.cs”，编写Btn_Click和Check_Click代码： protected void Btn_Click(object sender, EventArgs e) { Response.Redirect("ProductCheckout.aspx"); } protected void Check_Click(object sender, EventArgs e) { …… CheckBox cb = (CheckBox)(this.GvShopCart.Rows[Index].Cells[0].FindControl("ChbSale")); if (cb.Checked) strSql = "update Table_ShopCartInfo set IsChecked=1 where ShopCartId=" + ShopCartId; else strSql = "update Table_ShopCartInfo set IsChecked=0 where ShopCartId=" + ShopCartId; DBUtility.DbHelperSQL.ExecuteSql(strSql); BindProductShopCart(Convert.ToInt32(Session["UserId"].ToString())); BindNum(); } 49

  50. 9.在BLL层中创建“BLL_Table_ShopCartInfo.cs ”，编写以下方法； • public void UpdateSaleNum(int ShopCartId, int SaleNum) • public bool Exists(int UserId,int ProductId) • public int Add(Model.Model_Table_ShopCartInfo model) • public bool Delete(int ShopCartId) • public bool Update(Model.Model_Table_ShopCartInfo model) • public Model.Model_Table_ShopCartInfo GetModel(int UserId,int ProductId) • public DataSet GetList(string strWhere) • public DataSet GetList(int Top, string strWhere, string filedOrder) • public int GetRecordCount(string strWhere) 50

More Related