19.5 购物车模块
购物车模块是本系统中逻辑最为复杂的模块。它由根据类型浏览商品功能、商品类型浏览功能、商品详情浏览功能、购物车功能、填写订单功能和完成结账功能组成。每个功能由控制器和视图共同来实现。
19.5.1 根据类型浏览商品页面
根据类型浏览商品页面的控制器动作方法Browse定义在Controllers文件夹下的StoreController.cs文件夹中,关键代码如下:
上面的代码中第1行定义返回值为ActionResult类型的动作方法Browse,参数是商品类型的名称。通过数据实体模型WebshopEntities的上下文对象storeDB中的商品类型对象Categories的Include方法将获得指定商品类型的包含商品对象Products信息的产品类型,并查询出与传递参数相同的所有类型下的商品对象categoryModel。第3行将对象返回到Browse视图。
设计对应与动作方法Browse的视图,该视图定义在Views文件夹下Store子文件夹下的Browse.cshtml文件中,关键代码如下:
上面的代码中第6行~第15行通过循环遍历从控制器传递的Model对象中的元素,其中第8行~第13行使用列表内容标签显示唱片详情的链接和唱片的图片;第11行在段落标记中显示唱片的标题。
19.5.2 唱片详情浏览页面
唱片详情浏览页面的控制器动作方法Details.aspx定义在Controllers文件夹下的StoreController.cs文件夹中,关键代码如下:
代码说明:第1行定义返回值为ActionResult类型的动作方法Details,参数是商品的编号。第2行通过数据实体模型WebshopEntities的上下文对象storeDB中商品对象Products的Find方法查询获得指定商品编号的商品对象。第3行返回该对象到视图。
设计对应与动作方法Details的视图,该视图定义在Views文件夹下Store子文件夹下的Details.aspx文件中,关键代码如下:
上面代码中第2行定义页面标题。第3行显示商品的名称。第4行在段落标记中显示商品的图片。第5行~第14行在一个div中。第6行~第8行用三个段落标记来显示商品的类别、价格和库存。第10行~第12行在段落标记中显示一个“添加到购物车”的超链接并指定了显示的文本、动作方法、控制器和传递的参数。
19.5.3 购物车页面
购物车页面的控制器动作方法Index、AddToCart和RemoveFromCart定义在Controllers文件夹下的ShoppingCartController.cs文件夹中,关键代码如下:
以上代码中第1行定义返回值为ActionResult类型的动作方法Index。
第2行通过购物车操作类的GetCart获得购物车对象cart。
第3行~第6行实例化购物车视图模型类的对象viewModel,第4行通过cart对象的GetCartItems方法获得购物车中所有对象并赋给viewModel对象属性CartItems。第5行通过cart对象的GetTotal方法获得购物车的总价并赋给viewModel对象属性CartTotal。
第7行返回viewModel购物车视图。
第9行定义返回值为ActionResult类型的动作方法AddToCart,参数是商品的编号。
第10行~第11行获取指定商品编号的唱片对象addedProduct。
第12行通过购物车操作类的GetCart获得购物车对象cart。
第13行调用cart对象的AddToCart方法将addedProduct商品添加到购物车。
第14行重新定向到购物车视图。
第16行定义动作方法RemoveFromCart,参数是购物车的记录编号。
第17行通过购物车操作类的GetCart获得购物车对象cart。
第18行~第19行获取要移除的购物车内商品的名称。
第20行调用cart对象的RemoveFromCart从购物车中移除指定的商品对象。
第21行~第27行实例化一个移除购物车模型视图类的对象results。第22行设置其显示文本属性的值。第23行调用cart对象的GetTotal方法设置其购物车总价属性的值。第24行调用cart对象的GetCount方法设置其购物车商品数量属性的值。第26行设置其移除编号属性的值。
第28行将viewModel对象以Json的数据类型返回到视图购物车视图。
设计对应与动作方法Index的视图,该视图定义在Views文件夹下ShoppingCart子文件夹下的Index.cshtml文件中。在该视图中使用ASP.NET AJAX和JQuery技术实现异步调用移除购物车中商品的方法来实现页面的局部刷新,关键的代码如下。
上面的代码第4行判断如果购物车不为空,则第6行显示“结算”链接并设置其显示文本、动作方法和控制器。第10行~第34行定义一个表格,其中,第11行~第16行定义表格的标题。第17行~第24行使用循环动态生成表格要显示的数据内容,每行分为4列,第20行为第1列,显示一个商品对象的超链接;第22行是第2列显示商品的价格;第23行是第3列显示商品的数量;第24行是第4列显示“从购物车内删除”的链接。第32行显示购物车的总价。
19.5.4 填写订单页面
填写订单页面控制器动作方法AddressAndPayment定义在Controllers文件夹下的CheckoutController.cs文件夹中,关键代码如下:
上面的代码中第1行属性表示下面的方法只接受用户通过Post方法发送的表单数据。第2行定义动作方法AddressAndPayment,参数是表单集合对象。第3行实例化一个订单对象Order。第4行调用TryUpdateModel方法更新订单对象。第6行获取用户名作为订单中用户名属性的值。第7行将当前系统时间作为订单中订单时间属性的值。第8行通过购物车操作类ShoppingCart的GetCart方法得到购物车对象cart。第9行调用CreateOrder方法根据order对象创建订单详情。第10行重新定向到订单完成页面。如果以上操作失败,在第14行返回填写订单页面。
设计对应与动作方法AddressAndPayment的视图,该视图在Views文件夹下Checkout子文件夹下的AddressAndPayment.aspx文件中定义。关键的HTML代码如下:
代码说明:第2行~第5行导入ASP.NET AJAX和JQuery脚本库用来实现客户端验证功能。第6行指定使用客户端验证用户输入的数据。第7行定义一个表单。第8行~第11行定义一个边框。第9行定义边框的标题。第10行使用HTML的EditorForMode方法以自定义的Order订单类的数据类型为模板,在该模板中定义了显示填写订单的HTML代码。第12行定义“提交订单”的按钮。
设计后填写订单视图的界面如图19-11所示。
图19-11 设计后填写订单界面
本模块中完成结账功能的控制器和视图上面的功能类似,这里就不再进行详细的说明,读者可参考光盘中的源代码进行学习。