ASP课题实践购物车设计课件

1、ASP 课 题 实 践 购 物 车 简 单 设 计 班 级： 08计本 学 号： 01 姓 名： * 指导老师：* 第1页，共21页。基本设计要求设计目标设计简介设计思想设计步骤代码实现第2页，共21页。设计目标熟练使用ASP.NET服务器控件更多的了解有关ASP.NET的各种控件及相关的能实现的功能知道数据库的基本链接实现一个简单的网上购物程序第3页，共21页。设计简介用ASP.NET实现一个简单的网上购物程序，包含以下功能：显示所需物品顾客可以选中某一物品，并且能将该物品拖动添加到购物 车中顾客可以查看购物车中所有的物品信息，包括物品的价格 和购物车中已有的数量顾客能够将物品从购物车中删除

2、第4页，共21页。设计思想设计一个Web窗体Default.aspx。在该窗体中使用一个 ListBox服务器控件显示所有的物品。其中添加 Datalist链接数据库，通过数据绑定，完成数据的 调用，然后定义其他的一些功能，像该窗体中可以拖动鼠 标是物品移至listbox中，还有一个delete按钮。用户可以 选中LIstBox中显示的某一本物品，然后拖动鼠标将选中 的物品添加到购物车中。然后再页面上显示单价和总价钱。第5页，共21页。添加定义了Datalist,链接sql数据库，显示出数据库里的文件，像所有的物品，物品单价及物品。然后再然后给窗口添加代码，通过数据绑定，以实现购物车的各个功能

3、。第6页，共21页。设计步骤打开Microsoft Visual Studio 2005。新建一个Visual C#”ASP.NET网站”，将网站存储在文件夹中。新建Default.aspx。点击左下角的设计，进入设计页面，打开工具箱，从中拖动两个Lable控件，一个Image控件到表单上，然后将控件的ID分别更改为lblTitle, lblPrice, imgPicture,显示输入购物费用，总共的费用第7页，共21页。代码实现Default.aspx的代码： 拖动购物车进行购物 第8页，共21页。 购物费用 总共: $ 0.00 asp:Label ID=lblTitle runat=se

4、rver Text= / asp:Label ID=lblPrice runat=server Text = / asp:Image ID=“imgPicture” runat=“server” ImageUrl= / /调用数据库的 第9页，共21页。 script language=“javascript” type=“text/javascript” / 添加了Java脚本实现以下功能var mouseState = up;var clone = null; var totalPurchase = 0.0; var dropZoneArray = new Array(1); dropZo

5、neArray0 = dZone;var titlePattern = .+_lblTitle$var pricePattern = .+_lblPrice$var dragElementPattern = .+_a$;var uniqueNumber = 1; 第10页，共21页。function ResetColor() document.getElementById(dZone).className = DefaultDropZoneColor; function IsInDropZone(evtTarget) var result = false; / 遍历阵列,并发现它的id存在 f

6、or(i = 0; i dZone.offsetLeft & evt.clientX dZone.offsetTop & evt.clientY (dZone.offsetTop + dZone.offsetHeight) AddPrice(); document.onmouseup = null; document.onmousemove = null; document.body.removeChild(clone); mouseState = up; ResetColor(); 第13页，共21页。function AddPrice() 增价的实现 var title = GetProd

7、uctTitle(); var price = GetProductPrice(); var dZone = document.getElementById(dZone); var textNode = document.createTextNode(title); var priceNode = document.createTextNode(price); var spaceNode = document.createTextNode(: $); var paragraphElement = document.createElement(p); / 创建删除按钮 var deleteBut

8、ton = document.createElement(button); deleteButton.value = Delete; deleteButton.innerHTML = Delete; deleteButton.onclick = DeleteItem; 第14页，共21页。 var item = document.createElement(div); item.id = itemDiv + uniqueNumber; item.appendChild(paragraphElement); item.appendChild(textNode); item.appendChild

9、(spaceNode); item.appendChild(priceNode); item.appendChild(spaceNode); item.appendChild(deleteButton); dZone.appendChild(item); / 价格的增加 IncrementTotal(price); uniqueNumber+; 第15页，共21页。function DeleteItem(e) 删除列表的功能实现 var evt = e | window.event; var evtTarget = evt.target | evt.srcElement; if(IsFireF

10、ox() price = evtTarget.parentNode.childNodes2.nodeValue; evtTarget.parentNode.parentNode.removeChild(evtTarget.parentNode); else price = evtTarget.parentElement.childNodes2.nodeValue; evtTarget.parentElement.parentElement.removeChild(evtTarget.parentElement); DecrementTotal(price); function Decremen

11、tTotal(price) 总量减少时的价格变化 totalPurchase -= Math.ceil(Number(price); document.getElementById(divTotal).innerHTML = totalPurchase; 第16页，共21页。function IncrementTotal(price) 总量增加时的价格变化 totalPurchase += Math.ceil(Number(price); document.getElementById(divTotal).innerHTML = totalPurchase; function GetProdu

12、ctPrice() var price = ; if(IsFireFox() price = (clone.childNodes3.innerHTML); else price = (clone.childNodes2.innerHTML); return price; 第17页，共21页。function GetProductTitle() var title = ; if(IsFireFox() title = clone.childNodes1.innerHTML; else title = clone.childNodes0.innerHTML; return title; funct

13、ion IsFireFox() 浏览器 if(navigator.appName = Netscape) return true; else return false; 第18页，共21页。Default.aspx.cs代码using System;using System.Data;using System.Configuration;using System.Web;using System.Web.Security;using System.Web.UI;using System.Web.UI.WebControls;using System.Web.UI.WebControls.Web

14、Parts;using System.Web.UI.HtmlControls;using System.Data.SqlClient;public partial class _Default : System.Web.UI.Page protected void Page_Load(object sender, EventArgs e) if (!Page.IsPostBack) BindData(); 第19页，共21页。 private void BindData() 数据库的绑定 string connectionString = ConfigurationManager.ConnectionStringsConnectionString.ConnectionString; SqlConnection myConnection = new SqlConnection(connectionString); SqlDataAdapter ad = new SqlDataAdapter(SELECT * FROM tblToys, myConnection); DataSet ds = new DataSet(); ad.Fill(ds); dlToys.DataSource