摘要：

SportsStore應用程序進展很順利，但是我不能銷售產品直到設計了一個購物車。在這篇文章裏，我就將創建一個購物車。

在目錄下的每個產品旁邊添加一個添加到購物車按鈕。點擊這個按鈕將顯示客戶到目前為止選擇的產品摘要，包含總價格。這時候，用戶可以點擊繼續購物按鈕返回產品目錄，或者點擊現在下單按鈕完成訂單結束購物過程。

定義Cart實體類

在SportsStore.Domain工程的Entities文件夾下，創建代碼文件Cart.cs。

 1 using System.Collections.Generic;
 2 using System.Linq;
 3 
 4 namespace
 
 SportsStore.Domain.Entities
 5 {
 6     public class Cart
 7     {
 8         private List<CartLine> lineCollection = new List<CartLine>();
 9         public void AddItem(Product product, int quantity)
10         {
11             CartLine line = lineCollection.Where(p => p.Product.ProductID == product.ProductID).FirstOrDefault();
 
12             if (line == null)
13             {
14                 lineCollection.Add(new CartLine
15                 {
16                     Product = product,
17                     Quantity = quantity
18                 });
19             }
20             else {
21                 line.Quantity += quantity;
 
22             }
23         }
24 
25         public void RemoveLine(Product product)
26         {
27             lineCollection.RemoveAll(l => l.Product.ProductID == product.ProductID);
28         }
29 
30         public decimal ComputeTotalValue()
31         {
32             return lineCollection.Sum(e => e.Product.Price * e.Quantity);
33         }
34 
35         public void Clear()
36         {
37             lineCollection.Clear();
38         }
39 
40         public IEnumerable<CartLine> CartLines
41         {
42             get { return lineCollection; }
43         }
44     }
45 
46     public class CartLine
47     {
48         public Product Product { get; set; }
49         public int Quantity { get; set; }
50     }
51 }

Cart類使用了CartLine類，他們定義在同一個代碼文件內，保存一個客戶選擇的產品，以及客戶想買的數量。我定義了添加條目到購物車的方法，從購物車刪除之前已經添加的條目的方法，計算購物車內條目總價格，以及刪除所有條目清空購物車的方法。我還提供了一個通過IEnumrable<CartLine>訪問購物車內容的屬性。這些都很直觀，通過一點點LINQ很容易用C#實施。

定義視圖模型類

在SportsStore.WebUI工程的Models文件夾內，創建代碼文件CartIndexViewModel。

 1 using SportsStore.Domain.Entities;
 2 
 3 namespace SportsStore.WebUI.Models
 4 {
 5     public class CartIndexViewModel
 6     {
 7         public Cart Cart { get; set; }
 8         public string ReturnUrl { get; set; }
 9     }
10 }

該模型類有兩個屬性。Cart屬性保存了購物車信息，ReturnUrl保存了產品目錄的URL，需要這個信息是因為，客戶可以隨時點擊繼續購物按鈕，返回之前的產品目錄URL。

添加購物車控制器CartController

 1 using SportsStore.Domain.Abstract;
 2 using SportsStore.Domain.Entities;
 3 using SportsStore.WebUI.Models;
 4 using System.Linq;
 5 using System.Web.Mvc;
 6 
 7 namespace SportsStore.WebUI.Controllers
 8 {
 9     public class CartController : Controller
10     {
11         private IProductRepository repository;
12 
13         public CartController(IProductRepository productRepository)
14         {
15             repository = productRepository;
16         }
17 
18         public ActionResult Index(string returnUrl)
19         {
20             return View(new CartIndexViewModel
21             {
22                 Cart = GetCart(),
23                 ReturnUrl = returnUrl
24             });
25         }
26 
27         public RedirectToRouteResult AddToCart(int productId, string returnUrl)
28         {
29             Product product = repository.Products.FirstOrDefault(p => p.ProductID == productId);
30             if (product != null)
31             {
32                 GetCart().AddItem(product, 1);
33             }
34             return RedirectToAction("Index", new { returnUrl = returnUrl });
35         }
36 
37         public RedirectToRouteResult RemoveFromCart(int productId, string returnUrl)
38         {
39             Product product = repository.Products.FirstOrDefault(p => p.ProductID == productId);
40             if (product != null)
41             {
42                 GetCart().RemoveLine(product);
43             }
44             return RedirectToAction("Index", new { returnUrl });
45         }
46 
47         private Cart GetCart()
48         {
49             Cart cart = (Cart)Session["Cart"];
50             if (cart == null)
51             {
52                 cart = new Cart();
53                 Session["Cart"] = cart;
54             }
55             
56            return cart;
57         }
58     }
59 }

該控制器的一些解釋：

• GetCart方法：從Session裏獲取購物車對象，如果該對象為空，則創建這個對象，添加到Session，並返回該對象。
• Index方法：傳入returnUrl參數，返回購物車摘要信息視圖。該視圖的模型類是CartIndexViewModel，模型類對象的Cart屬性通過調用方法GetCart返回，ReturnUrl屬性使用方法參數賦值。
• AddToCart方法：傳入productId參數和returnUrl參數，添加產品到購物車，並返回重定向的購物車摘要信息視圖。方法的返回類型是RedirectToRouteResult，該類的基類是ActionResult。
• RemoveFromCart方法：傳入productId參數和returnUrl參數，從購物車中刪除產品，並返回重定向的購物車摘要信息視圖。
• AddToCart方法和RemoveFromCart方法都是通過調用Controller基類的RedirectToAction方法，返回重定向視圖類RedirectToRouteResult的對象。
• RedirectToAction方法的第一個參數是Action名稱，第二個無類型對象參數提供傳入Action的參數值。這裏將重定向到Cart控制器的Index方法。

添加到購物車按鈕

修改ProductSummary.cshtml視圖，添加Add to Cart按鈕。

 1 @model SportsStore.Domain.Entities.Product
 2 
 3 <div class="well">
 4     <h3>
 5         <strong>@Model.Name</strong>
 6         <span class="pull-right label label-primary">@Model.Price.ToString("c")</span>
 7     </h3>
 8     @using (Html.BeginForm("AddToCart", "Cart"))
 9     {
10         <div class="pull-right">
11             @Html.HiddenFor(x => x.ProductID)
12             @Html.Hidden("returnUrl", Request.Url.PathAndQuery)
13             <input type="submit" class="btn btn-success" value="Add to cart" />
14         </div>
15     }
16     <span class="lead"> @Model.Description</span>
17 </div>

• 使用Html.BeginForm幫助方法，生成AddToCart表單。方法的第一個參數是Action名稱AddToCart，第二個參數是控制器名稱Cart。
• 使用Html.HiddenFor幫助方法，生成表單的hidden html元素，該元素的name屬性是字符串ProductID，值是該產品的ProductID值。
• 使用Html.Hidden幫助方法，生成表單的hidden html元素，該元素的name屬性是字符串returnUrl，值是當前頁面的Url。
• 控制器的AddToCart方法將通過表單元素的名稱，獲取要傳入該方法的參數productID和returnUrl的值（大小寫不敏感）。

添加購物車詳細信息視圖

在Views文件夾的Cart文件夾內，添加Index.cshtml。

 1 @model SportsStore.WebUI.Models.CartIndexViewModel
 2 
 3 @{
 4     ViewBag.Title = "Sports Store: Your Cart";
 5 }
 6 <style>
 7     #cartTable td {
 8         vertical-align: middle;
 9     }
10 </style>
11 <h2>Your cart</h2>
12 <table id="cartTable" class="table">
13     <thead>
14         <tr>
15             <th>Quantity</th>
16             <th>Item</th>
17             <th class="text-right">Price</th>
18             <th class="text-right">Subtotal</th>
19         </tr>
20     </thead>
21     <tbody>
22         @foreach (var line in Model.Cart.CartLines)
23         {
24             <tr>
25                 <td class="text-center">@line.Quantity</td>
26                 <td class="text-left">@line.Product.Name</td>
27                 <td class="text-right">
28                     @line.Product.Price.ToString("c")
29                 </td>
30                 <td class="text-right">
31                     @((line.Quantity * line.Product.Price).ToString("c"))
32                 </td>
33                 <td>
34                     @using (Html.BeginForm("RemoveFromCart", "Cart"))
35                     {
36                         @Html.Hidden("ProductId", line.Product.ProductID)
37                         @Html.HiddenFor(x => x.ReturnUrl)
38                         <input class="btn btn-sm btn-warning" type="submit" value="Remove" />
39                     }
40                 </td>
41             </tr>
42         }
43     </tbody>
44     <tfoot>
45         <tr>
46             <td colspan="3" class="text-right">Total:</td>
47             <td class="text-right">
48                 @Model.Cart.ComputeTotalValue().ToString("c")
49             </td>
50         </tr>
51     </tfoot>
52 </table>
53 <div class="text-center">
54     <a class="btn btn-primary" href="@Model.ReturnUrl">Continue shopping</a>
55 </div>

• 這個視圖以表格的形式，展示了購物車摘要產品信息，包含了產品名稱、購買數量、單價、價格信息。
• 每個產品條目後面，添加刪除表單和刪除按鈕，這裏的表單和按鈕，同之前添加到購物車按鈕一樣。
• 表格底部，調用ComputeTotalValue方法，返回總價格。
• 頁面底部中間，顯示一個Continue Shopping按鈕，ReturnUrl屬性指向之前的產品目錄Url，點擊後返回產品目錄頁面。

運行程序，得到運行結果。

這裏我選擇了Chess目錄，瀏覽器地址欄上的URL變成了：http://localhost:17596/Chess

如果我點擊Human Chess Board產品的Add To Cart按鈕，得到頁面：

註意這時候的瀏覽器地址欄的地址變成了：http://localhost:17596/Cart/Index?returnUrl=%2FChess，包含的購物車的Cart/Index，以及以問號?開始的參數?returnUrl=%2FChess。returnUrl的值就是剛才的頁面地址。

如果再點擊Continue Shoppinga按鈕，將返回到returnUrl指向的頁面，既是剛才的頁面：http://localhost:17596/Chess

添加購物車摘要視圖

我還需要添加一個顯示購物車摘要信息的小部件，可以在所有應用程序頁面上都能看到，點擊後返回購物車詳細信息。這個小部件和導航條目類似，需要使用返回PartialViewResult的Action方法，在_Layout.cshtml視圖中，使用Html.Action方法嵌入這個視圖。

首先修改CartController控制器，添加Summary方法。

1         public PartialViewResult Summary()
2         {
3             return PartialView(GetCart());
4         }

然後，添加Summary視圖。

1 @model SportsStore.Domain.Entities.Cart
2 
3 <div class="navbar-text navbar-right">
4     <b>Your cart:</b>
5     @Model.CartLines.Sum(x => x.Quantity) item(s),
6     @Model.ComputeTotalValue().ToString("c")
7 </div>

最後，修改_Layout.cshtml文件，調用Html幫助類方法Action，嵌入這個視圖到頭部導航欄內。

 1 <!DOCTYPE html>
 2 
 3 <html>
 4 <head>
 5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6     <link href="~/Content/bootstrap.css" rel="stylesheet" />
 7     <link href="~/Content/bootstrap-theme.css" rel="stylesheet" />
 8     <title>@ViewBag.Title</title>
 9     <style>
10         .navbar-right {
11             float: right !important;
12             margin-right: 15px;
13             margin-left: 15px;
14         }
15     </style>
16 </head>
17 <body>
18     <div class="navbar navbar-inverse" role="navigation">
19         <a class="navbar-brand" href="#">SPORTS STORE</a>
20         @Html.Action("Summary", "Cart")
21     </div>
22     <div class="row panel">
23         <div id="categories" class="col-xs-3">
24             @Html.Action("Menu", "Nav")
25         </div>
26         <div class="col-xs-8">
27             @RenderBody()
28         </div>
29     </div>
30 </body>
31 </html>

這裏添加頁面樣式navbar-right，使得購物車摘要信息部件在頭部導航欄內靠右顯示。

運行程序，得到運行結果。

使用模板綁定

MVC使用一個名叫模板綁定的系統，為了傳參數給行為方法，它從HTTP請求創建C#對象並作為參數傳給行為方法。MVC框架就是這樣來處理表單的。它看到目標行為方法的參數，然後使用模板綁定得到瀏覽器發送過來的表單裏元素的值，然後根據名稱轉化成對應類型的相同名稱的參數，傳給行為方法。

模板綁定可以從請求裏的任何信息中創建C#類型。這是MVC框架的核心特征之一。我將創建一個客戶的模板綁定來改進CartController控制器。

在SportsStore.WebUI工程的Infrastructure文件夾內創建子文件夾Binders，並在子文件夾下創建代碼文件CartModelBinder.cs。

 1 using SportsStore.Domain.Entities;
 2 using System.Web.Mvc;
 3 
 4 namespace SportsStore.WebUI.Infrastructure.Binders
 5 {
 6     public class CartModelBinder : IModelBinder
 7     {
 8         private const string sessionKey = "Cart";
 9 
10         public object BindModel(ControllerContext controllerContext, ModelBindingContext bindingContext)
11         {
12             // get the Cart from the session
13             Cart cart = null;
14             if (controllerContext.HttpContext.Session != null)
15             {
16                 cart = (Cart)controllerContext.HttpContext.Session[sessionKey];
17             }
18             // create the Cart if there wasn‘t one in the session data
19             if (cart == null)
20             {
21                 cart = new Cart();
22                 if (controllerContext.HttpContext.Session != null)
23                 {
24                     controllerContext.HttpContext.Session[sessionKey] = cart;
25                 }
26             }
27             // return the cart
28             return cart;
29         }
30     }
31 }

• CartModelBinder類繼承接口IModelBinder，並實現接口的方法BindModel。
• 接口方法BindModel提供兩個參數，參數類型ControllerContext：controllerContext獲取控制器上下文環境信息，參數類型ModelBindingContext：bindingContext獲取綁定的上下文信息。
• 接口方法BindModel返回類型是object，他返回的對象的值就是Action方法參數的值。
• 參數controllerContext對象的HttpContext屬性保存了HTTP請求中的信息，通過controllerContext.HttpContext.Session獲取HTTP請求中的Session信息。
• 我的BindMode方法的方法體代碼和CartController控制器的GetCart方法相同。都是從Session裏獲取購物車對象，如果該對象為空，則創建這個對象，添加到Session，並返回該對象。

有了模板綁定方法後，還需要將模板方法在Global.asax.cs代碼的事件Application_Start內，通過調用ModelBinders.Binders.Add方法，註冊到MVC應用程序裏。

修改Global.asax代碼。

 1 using SportsStore.Domain.Entities;
 2 using SportsStore.WebUI.Infrastructure.Binders;
 3 using System;
 4 using System.Collections.Generic;
 5 using System.Linq;
 6 using System.Web;
 7 using System.Web.Mvc;
 8 using System.Web.Routing;
 9 
10 namespace SportsStore
11 {
12     public class MvcApplication : System.Web.HttpApplication
13     {
14         protected void Application_Start()
15         {
16             AreaRegistration.RegisterAllAreas();
17             RouteConfig.RegisterRoutes(RouteTable.Routes);
18 
19             ModelBinders.Binders.Add(typeof(Cart), new CartModelBinder());
20         }
21     }
22 }

ModelBinders.Binders是ModelBinders的靜態屬性，它是一個繼承自IDictionary類型的對象，它的Add方法提供兩個參數完成模板綁定類型的綁定。第一個參數是返回類型參數，第二個參數實例化一個繼承自IModelBinder類型的對象。
這樣，我現在可以修改CartController控制器的各個Action方法，添加Cart類型參數，並使用模板綁定方式獲得Cart對象參數的值。

 1 using SportsStore.Domain.Abstract;
 2 using SportsStore.Domain.Entities;
 3 using SportsStore.WebUI.Models;
 4 using System.Linq;
 5 using System.Web.Mvc;
 6 
 7 namespace SportsStore.WebUI.Controllers
 8 {
 9     public class CartController : Controller
10     {
11         private IProductRepository repository;
12 
13         public CartController(IProductRepository productRepository)
14         {
15             repository = productRepository;
16         }
17 
18         public ActionResult Index(Cart cart, string returnUrl)
19         {
20             return View(new CartIndexViewModel
21             {
22                 Cart = cart,
23                 ReturnUrl = returnUrl
24             });
25         }
26 
27         public RedirectToRouteResult AddToCart(Cart cart, int productId, string returnUrl)
28         {
29             Product product = repository.Products.FirstOrDefault(p => p.ProductID == productId);
30             if (product != null)
31             {
32                 cart.AddItem(product, 1);
33             }
34             return RedirectToAction("Index", new { returnUrl = returnUrl });
35         }
36 
37         public RedirectToRouteResult RemoveFromCart(Cart cart, int productId, string returnUrl)
38         {
39             Product product = repository.Products.FirstOrDefault(p => p.ProductID == productId);
40             if (product != null)
41             {
42                 cart.RemoveLine(product);
43             }
44             return RedirectToAction("Index", new { returnUrl });
45         }
46 
47         public PartialViewResult Summary(Cart cart)
48         {
49             return PartialView(cart);
50         }
51     }
52 }

控制器方法的參數Cart：cart將從模板綁定類的方法BindModel中，返回cart對象。

跟我學ASP.NET MVC之七：SportsStrore購物車