【IT168 技术】在大多数电子商务Web应用程序中，他们设计的“将产品添加至购物车”的特性主要通过使用按钮或者链接之类的UI界面来将产品添加至购物车中。在偶然的机会中，我看到了JQuery Shopping Cart Plug-in 的示例。在这个例子中，产品添加至购物车实现的功能更为强大，你只需要将产品拖拽至购物车即可。
这个示例给了我很大的启发，我意识到了对于电子商务Web应用程序，可以在添加至购物车的功能模块中新增更多的交互性。所以我决定使用Asp.net MVC插件。
为了让应用程序变得简单，我只用了一张数据库表，来显示产品列表，至于其它的特性，包括新增产品数据表等，我一概都没有提及。
配置
要实现这些功能，我们需要安装两个JQuery文件。
1.JQuery-1.6.2
2.JQuery-ui-1.8.11
你可以从Jquery.com网站上下载这个文件，如果你正在使用VS2010和MVC3或者MVC4的应用程序，那么脚本的文件夹中就已经包含了jQuery文件。
实现步骤：
第一步：在Visual Studio中创建一个新的MVC应用程序。检查一下脚本文件夹中是否存在两个Jquery文件。如果没有，下载该文件，并将文件添加至脚本文件夹中。
第二步：创建数据库，新增以下数据表并且命名为Products。
在新建products数据表后，在数据表中插入数据记录，将产品信息显示在列表页里。由于产品图片在数据表中只能存储图片名称，所以需要在项目的根目录下新建一个文件夹，命名为images，然后将所有的图片拷贝至文件夹中。最后，在webconfig文件中添加数据库连接字符串。
现在，为了从数据库中查询数据，我已经新建了一个类“Products”，声明代码如下：
{
public int ProductID ;
public string ProductName;
public decimal Price;
public string ProductImage;
}
在应用程序的根目录下创建一个新文件夹，命名为Data Access，在文件夹中新增一个类，命名为DALProducts.这个类主要用于数据库操作，具体代码如下：
{
public List<products> GetProductList()
{
SqlConnection _con = new SqlConnection(ConfigurationManager.ConnectionStrings["ProductDataBaseConnection"].ConnectionString);
try
{
if (_con.State != System.Data.ConnectionState.Open)
_con.Open();
SqlCommand _cmd = _con.CreateCommand();
_cmd.CommandText = "Select * From Products";
SqlDataReader _reader = _cmd.ExecuteReader();
List<products> _lstPoducts = new List<products>();
while (_reader.Read())
{
Products _Products = new Products();
_Products.ProductID =Convert.ToInt32(_reader["ProductID"]);
_Products.ProductImage = _reader["ProductImage"].ToString();
_Products.ProductName = _reader["ProductName"].ToString();
_Products.Price = Convert.ToDecimal(_reader["Price"]);
_lstPoducts.Add(_Products);
}
return _lstPoducts;
}
catch (Exception ex)
{
throw ex;
}
finally
{
if (_con.State != System.Data.ConnectionState.Closed)
_con.Close();
}
}
}
</products></products></products>
以上的代码GetProductList方法返回产品列表。新增ProductController类，该类将继承Controller类，新增代码如下：
{
//
// GET: /Product/
public ActionResult Index()
{
DataAccess.DALProducts _obj = new DataAccess.DALProducts();
return View(_obj.GetProductList());
}
}
controller的Index函数会调用一个DALProduct类的GetproductList方法，并将产品信息列表传递给视图。
