跟我學ASP.NET MVC之七：SportsStrore一個完整的購物車

摘要：

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

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

定義Cart實體類

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

using System.Collections.Generic;
using System.Linq;

namespace SportsStore.Domain.Entities
{
    public class Cart
    {
        private List<CartLine> lineCollection = new List<CartLine>();
        public void AddItem(Product product, int quantity)
        {
            CartLine line = lineCollection.Where(p => p.Product.ProductID == product.ProductID).FirstOrDefault();
            if (line == null)
            {
                lineCollection.Add(new CartLine
                {
                    Product = product,
                    Quantity = quantity
                });
            }
            else {
                line.Quantity += quantity;
            }
        }

        public void RemoveLine(Product product)
        {
            lineCollection.RemoveAll(l => l.Product.ProductID == product.ProductID);
        }

        public decimal ComputeTotalValue()
        {
            return lineCollection.Sum(e => e.Product.Price * e.Quantity);
        }

        public void Clear()
        {
            lineCollection.Clear();
        }

        public IEnumerable<CartLine> CartLines
        {
            get { return lineCollection; }
        }
    }

    public class CartLine
    {
        public Product Product { get; set; }
        public int Quantity { get; set; }
    }
}

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

定義視圖模型類

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

using SportsStore.Domain.Entities;

namespace SportsStore.WebUI.Models
{
    public class CartIndexViewModel
    {
        public Cart Cart { get; set; }
        public string ReturnUrl { get; set; }
    }
}

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

添加購物車控制器CartController

using SportsStore.Domain.Abstract;
using SportsStore.Domain.Entities;
using SportsStore.WebUI.Models;
using System.Linq;
using System.Web.Mvc;

namespace SportsStore.WebUI.Controllers
{
    public class CartController : Controller
    {
        private IProductRepository repository;

        public CartController(IProductRepository productRepository)
        {
            repository = productRepository;
        }

        public ActionResult Index(string returnUrl)
        {
            return View(new CartIndexViewModel
            {
                Cart = GetCart(),
                ReturnUrl = returnUrl
            });
        }

        public RedirectToRouteResult AddToCart(int productId, string returnUrl)
        {
            Product product = repository.Products.FirstOrDefault(p => p.ProductID == productId);
            if (product != null)
            {
                GetCart().AddItem(product, 1);
            }
            return RedirectToAction("Index", new { returnUrl = returnUrl });
        }

        public RedirectToRouteResult RemoveFromCart(int productId, string returnUrl)
        {
            Product product = repository.Products.FirstOrDefault(p => p.ProductID == productId);
            if (product != null)
            {
                GetCart().RemoveLine(product);
            }
            return RedirectToAction("Index", new { returnUrl });
        }

        private Cart GetCart()
        {
            Cart cart = (Cart)Session["Cart"];
            if (cart == null)
            {
                cart = new Cart();
                Session["Cart"] = cart;
            }
            
           return cart;
        }
    }
}

該控制器的一些解釋：

• 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按鈕。

@model SportsStore.Domain.Entities.Product

<div class="well">
    <h3>
        <strong>@Model.Name</strong>
        <span class="pull-right label label-primary">@Model.Price.ToString("c")</span>
    </h3>
 @using (Html.BeginForm("AddToCart", "Cart"))  9  { 10         <div class="pull-right">
 @Html.HiddenFor(x => x.ProductID) 12  @Html.Hidden("returnUrl", Request.Url.PathAndQuery) 13             <input type="submit" class="btn btn-success" value="Add to cart" />
        </div>
 } 16     <span class="lead"> @Model.Description</span>
</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。

@model SportsStore.WebUI.Models.CartIndexViewModel

@{
    ViewBag.Title = "Sports Store: Your Cart";
}
<style>
    #cartTable td {
        vertical-align: middle;
    }
</style>
<h2>Your cart</h2>
<table id="cartTable" class="table">
    <thead>
        <tr>
            <th>Quantity</th>
            <th>Item</th>
            <th class="text-right">Price</th>
            <th class="text-right">Subtotal</th>
        </tr>
    </thead>
    <tbody>
        @foreach (var line in Model.Cart.CartLines)
        {
            <tr>
                <td class="text-center">@line.Quantity</td>
                <td class="text-left">@line.Product.Name</td>
                <td class="text-right">
                    @line.Product.Price.ToString("c")
                </td>
                <td class="text-right">
                    @((line.Quantity * line.Product.Price).ToString("c"))
                </td>
                <td>
                    @using (Html.BeginForm("RemoveFromCart", "Cart"))
                    {
                        @Html.Hidden("ProductId", line.Product.ProductID)
                        @Html.HiddenFor(x => x.ReturnUrl)
                        <input class="btn btn-sm btn-warning" type="submit" value="Remove" />
                    }
                </td>
            </tr>
        }
    </tbody>
    <tfoot>
        <tr>
            <td colspan="3" class="text-right">Total:</td>
            <td class="text-right">
                @Model.Cart.ComputeTotalValue().ToString("c")
            </td>
        </tr>
    </tfoot>
</table>
<div class="text-center">
    <a class="btn btn-primary" href="@Model.ReturnUrl">Continue shopping</a>
</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方法。

        public PartialViewResult Summary()
        {
            return PartialView(GetCart());
        }

然后，添加Summary視圖。

@model SportsStore.Domain.Entities.Cart

<div class="navbar-right">
    @Html.ActionLink("My Cart", "Index", "Cart", new { returnUrl = Request.Url.PathAndQuery }, new { @class = "btn btn-default navbar-btn" })
</div>
<div class="navbar-text navbar-right">
    <b>Your cart:</b>
    @Model.CartLines.Sum(x => x.Quantity) item(s),
    @Model.ComputeTotalValue().ToString("c")
</div>

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

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="~/Content/bootstrap.css" rel="stylesheet" />
    <link href="~/Content/bootstrap-theme.css" rel="stylesheet" />
    <title>@ViewBag.Title</title>
    <style>
        .navbar-right {
            float: right !important;
            margin-right: 15px;
            margin-left: 15px;
        }
    </style>
</head>
<body>
    <div class="navbar navbar-inverse" role="navigation">
        <a class="navbar-brand" href="#">SPORTS STORE</a>
 @Html.Action("Summary", "Cart") 21     </div>
    <div class="row panel">
        <div id="categories" class="col-xs-3">
            @Html.Action("Menu", "Nav")
        </div>
        <div class="col-xs-8">
            @RenderBody()
        </div>
    </div>
</body>
</html>

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

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

 

 使用模板綁定

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

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

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

using SportsStore.Domain.Entities;
using System.Web.Mvc;

namespace SportsStore.WebUI.Infrastructure.Binders
{
    public class CartModelBinder : IModelBinder
    {
        private const string sessionKey = "Cart";

        public object BindModel(ControllerContext controllerContext, ModelBindingContext bindingContext)
        {
            // get the Cart from the session
            Cart cart = null;
            if (controllerContext.HttpContext.Session != null)
            {
                cart = (Cart)controllerContext.HttpContext.Session[sessionKey];
            }
            // create the Cart if there wasn't one in the session data
            if (cart == null)
            {
                cart = new Cart();
                if (controllerContext.HttpContext.Session != null)
                {
                    controllerContext.HttpContext.Session[sessionKey] = cart;
                }
            }
            // return the cart
            return cart;
        }
    }
}

• 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代碼。

using SportsStore.Domain.Entities;  2 using SportsStore.WebUI.Infrastructure.Binders;  3 using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using System.Web.Routing;

namespace SportsStore
{
    public class MvcApplication : System.Web.HttpApplication
    {
        protected void Application_Start()
        {
            AreaRegistration.RegisterAllAreas();
            RouteConfig.RegisterRoutes(RouteTable.Routes);

            ModelBinders.Binders.Add(typeof(Cart), new CartModelBinder()); 20         }
    }
}

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

using SportsStore.Domain.Abstract;
using SportsStore.Domain.Entities;
using SportsStore.WebUI.Models;
using System.Linq;
using System.Web.Mvc;

namespace SportsStore.WebUI.Controllers
{
    public class CartController : Controller
    {
        private IProductRepository repository;

        public CartController(IProductRepository productRepository)
        {
            repository = productRepository;
        }

        public ActionResult Index(Cart cart, string returnUrl)
        {
            return View(new CartIndexViewModel
            {
                Cart = cart,
                ReturnUrl = returnUrl
            });
        }

        public RedirectToRouteResult AddToCart(Cart cart, int productId, string returnUrl)
        {
            Product product = repository.Products.FirstOrDefault(p => p.ProductID == productId);
            if (product != null)
            {
                cart.AddItem(product, 1);
            }
            return RedirectToAction("Index", new { returnUrl = returnUrl });
        }

        public RedirectToRouteResult RemoveFromCart(Cart cart, int productId, string returnUrl)
        {
            Product product = repository.Products.FirstOrDefault(p => p.ProductID == productId);
            if (product != null)
            {
                cart.RemoveLine(product);
            }
            return RedirectToAction("Index", new { returnUrl });
        }

        public PartialViewResult Summary(Cart cart)
        {
            return PartialView(cart);
        }
    }
}

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

 提交訂單

在SportsStore.Domain工程里的Entities文件夾內，創建代碼文件ShippingDetails，表示物流表單信息。

namespace SportsStore.Domain.Entities
{
    public class ShippingDetails
    {
        public string Name { get; set; }
        public string Line1 { get; set; }
        public string Line2 { get; set; }
        public string Line3 { get; set; }
        public string City { get; set; }
        public string State { get; set; }
        public string Zip { get; set; }
        public string Country { get; set; }
        public bool GiftWrap { get; set; }
    }
}

創建提交訂單的接口IOrderProcessor。

using SportsStore.Domain.Entities;

namespace SportsStore.Domain.Abstract
{
    public interface IOrderProcessor
    {
        void ProcessOrder(Cart cart, ShippingDetails shippingDetails);
    }
}

該接口只有一個方法ProcessOrder，接受Cart類型參數和ShippingDefails參數，處理訂單。

創建訂單處理類EmailOrderProcessor，實現接口IOrderProcessor。

using SportsStore.Domain.Abstract;
using SportsStore.Domain.Entities;
using System.Net;
using System.Net.Mail;
using System.Text;

namespace SportsStore.Domain.Concrete
{
    public class EmailSettings
    {
        public string MailToAddress = "your email address to receive Email";
        public string MailFromAddress = "your email address to send Email";
        public bool UseSsl = true;
        public string Username = "user name of email account to send Email";
        public string Password = "password of email account to send Email";
        public string ServerName = "smtp server address";
        public int ServerPort = smtp port;
        public bool WriteAsFile = false;
        public string FileLocation = @"c:\sports_store_emails";
    }

    public class EmailOrderProcessor : IOrderProcessor
    {
        private EmailSettings emailSettings;

        public EmailOrderProcessor(EmailSettings settings)
        {
            emailSettings = settings;
        }

        public void ProcessOrder(Cart cart, ShippingDetails shippingInfo)
        {
            using (var smtpClient = new SmtpClient())
            {
                smtpClient.EnableSsl = emailSettings.UseSsl;
                smtpClient.Host = emailSettings.ServerName;
                //smtpClient.Port = emailSettings.ServerPort;
                smtpClient.UseDefaultCredentials = true;
                smtpClient.Credentials = new NetworkCredential(emailSettings.Username, emailSettings.Password);
                if (emailSettings.WriteAsFile)
                {
                    //smtpClient.DeliveryMethod = SmtpDeliveryMethod.SpecifiedPickupDirectory;
                    //smtpClient.PickupDirectoryLocation = emailSettings.FileLocation;
                    //smtpClient.EnableSsl = false;
                }
                else
                {
                    smtpClient.DeliveryMethod = smtpClient.DeliveryMethod;
                }
                StringBuilder body = new StringBuilder()
                    .AppendLine("A new order has been submitted")
                    .AppendLine("---")
                    .AppendLine("Items:");
                foreach (var line in cart.CartLines)
                {
                    var subtotal = line.Product.Price * line.Quantity;
                    body.AppendFormat("{0} x {1} (subtotal: {2:c}) ",
                    line.Quantity,
                    line.Product.Name,
                    subtotal);
                    body.AppendLine();
                }
                body.AppendFormat("Total order value: {0:c}", cart.ComputeTotalValue())
                .AppendLine()
                .AppendLine("---")
                .AppendLine()
                .AppendLine("Ship to:")
                .AppendLine(shippingInfo.Name)
                .AppendLine(shippingInfo.Line1)
                .AppendLine(shippingInfo.Line2 ?? "")
                .AppendLine(shippingInfo.Line3 ?? "")
                .AppendLine(shippingInfo.City)
                .AppendLine(shippingInfo.State ?? "")
                .AppendLine(shippingInfo.Country)
                .AppendLine(shippingInfo.Zip)
                .AppendLine("---")
                .AppendFormat("Gift wrap: {0}",
                shippingInfo.GiftWrap ? "Yes" : "No");
                MailMessage mailMessage = new MailMessage(emailSettings.MailFromAddress, emailSettings.MailToAddress, "New order submitted!", body.ToString());
                if (emailSettings.WriteAsFile)
                {
                    mailMessage.BodyEncoding = Encoding.ASCII;
                }
                try
                {
                    smtpClient.Send(mailMessage);
                }
                catch (System.Exception e)
                {

                }
            }
        }
    }
}

這里使用SmtpClient對象發送郵件。

• EmailOrderProcessor類對象里包含了EmailSettings對象，EmailSettings對象保存了用於接收和發送郵件的配置信息。
• EmailOrderProcessor類對象使用構造函數方式，實例化EmailSettings對象。

在Infrastructure文件夾內找到代碼文件NinjectDependencyResolver.cs，在AddBindings方法內，添加Ninject注冊對接口IOrderProcessor和類EmailOrderProcessor的綁定。

        private void AddBindings()
        {
            kernel.Bind<IProductRepository>().To<EFProductRepository>();

            EmailSettings emailSettings = new EmailSettings
            {
                WriteAsFile = bool.Parse(System.Configuration.ConfigurationManager.AppSettings["Email.WriteAsFile"] ?? "false")
            };
            kernel.Bind<IOrderProcessor>().To<EmailOrderProcessor>().WithConstructorArgument("settings", emailSettings); 10         }

這里，使用方法WithConstructorArgument("settings", emailSettings)，將對象emailSettings，通過構造函數方式注入到EmailOrderProcessor對象內的emailSettings屬性。

現在我們可以修改CartController控制器，添加提交訂單的業務邏輯代碼了。

using SportsStore.Domain.Abstract;
using SportsStore.Domain.Entities;
using SportsStore.WebUI.Models;
using System.Linq;
using System.Web.Mvc;

namespace SportsStore.WebUI.Controllers
{
    public class CartController : Controller
    {
        private IProductRepository repository;
        private IOrderProcessor orderProcessor; 13 
        public CartController(IProductRepository productRepository, IOrderProcessor productOrderProcessor)
        {
            repository = productRepository;
            orderProcessor = productOrderProcessor; 18         }

        public ActionResult Index(Cart cart, string returnUrl)
        {
            return View(new CartIndexViewModel
            {
                Cart = cart,
                ReturnUrl = returnUrl
            });
        }

        public RedirectToRouteResult AddToCart(Cart cart, int productId, string returnUrl)
        {
            Product product = repository.Products.FirstOrDefault(p => p.ProductID == productId);
            if (product != null)
            {
                cart.AddItem(product, 1);
            }
            return RedirectToAction("Index", new { returnUrl = returnUrl });
        }

        public RedirectToRouteResult RemoveFromCart(Cart cart, int productId, string returnUrl)
        {
            Product product = repository.Products.FirstOrDefault(p => p.ProductID == productId);
            if (product != null)
            {
                cart.RemoveLine(product);
            }
            return RedirectToAction("Index", new { returnUrl });
        }

        public PartialViewResult Summary(Cart cart)
        {
            return PartialView(cart);
        }

        public ViewResult Checkout() 55  { 56             return View(new ShippingDetails()); 57  } 58 
 [HttpPost] 60         public ViewResult Checkout(Cart cart, ShippingDetails shippingDetails) 61  { 62             if (cart.CartLines.Count() == 0) 63  { 64                 ModelState.AddModelError("", "Sorry, your cart is empty!"); 65  } 66             if (ModelState.IsValid) 67  { 68  orderProcessor.ProcessOrder(cart, shippingDetails); 69  cart.Clear(); 70                 return View("Completed"); 71  } 72             else
 { 74                 return View(shippingDetails); 75  } 76  } 77  } 78 }

• 跟接口屬性epository屬性一樣，通過構造函數注入接口屬性orderProcessor屬性值。
• 兩個Action方法名稱都是Checkout，MVC通過方法特性識別它們。第一個Checkout沒有添加任何方法特性，在HTTP GET請求的時候調用它。第二個Checkout有[HttpPost]特性修飾，在HTTP POST請求的時候調用它。
• 第一個Checkout方法，返回ShippingDetails類型對象作為視圖模型的視圖，用於填寫物流表單。
• 第二個Checkout方法，第一個參數類型是Cart，通過模板方法返回參數值。第二個參數類型是ShippingDetails，通過獲取視圖的表單元素值獲取該對象。
• 如果購物車內為空，則通過調用ModelState.AddModelError方法，向視圖添加錯誤消息。添加錯誤消息后，ModelState的IsValid屬性將為false。
• 如果ModelState.IsValid屬性為true，則處理該訂單，這里是發送郵件。清空購物車，並返回Complete視圖給客戶。
• 如果ModelState.IsValid屬性為false，還是發送HTTP GET請求的Checkout視圖，將剛才填寫的shippingDetails對象返回至Checkout視圖。這樣，客戶可以看到和修改剛才填寫的信息。

最后是修改視圖。

訂單詳情視圖Index.cshtml上添加Checkout按鈕。

@model SportsStore.WebUI.Models.CartIndexViewModel

@{
    ViewBag.Title = "Sports Store: Your Cart";
}
<style>
    #cartTable td {
        vertical-align: middle;
    }
</style>
<h2>Your cart</h2>
<table id="cartTable" class="table">
    <thead>
        <tr>
            <th>Quantity</th>
            <th>Item</th>
            <th class="text-right">Price</th>
            <th class="text-right">Subtotal</th>
        </tr>
    </thead>
    <tbody>
        @foreach (var line in Model.Cart.CartLines)
        {
            <tr>
                <td class="text-center">@line.Quantity</td>
                <td class="text-left">@line.Product.Name</td>
                <td class="text-right">
                    @line.Product.Price.ToString("c")
                </td>
                <td class="text-right">
                    @((line.Quantity * line.Product.Price).ToString("c"))
                </td>
                <td>
                    @using (Html.BeginForm("RemoveFromCart", "Cart"))
                    {
                        @Html.Hidden("ProductId", line.Product.ProductID)
                        @Html.HiddenFor(x => x.ReturnUrl)
                        <input class="btn btn-sm btn-warning" type="submit" value="Remove" />
                    }
                </td>
            </tr>
        }
    </tbody>
    <tfoot>
        <tr>
            <td colspan="3" class="text-right">Total:</td>
            <td class="text-right">
                @Model.Cart.ComputeTotalValue().ToString("c")
            </td>
        </tr>
    </tfoot>
</table>
<div class="text-center">
    <a class="btn btn-primary" href="@Model.ReturnUrl">Continue shopping</a>
 @Html.ActionLink("Checkout now", "Checkout", null, new { @class = "btn btn-primary" })  
</div>

Checkout視圖：

@model SportsStore.Domain.Entities.ShippingDetails

@{
    ViewBag.Title = "SportStore: Checkout";
}
<h2>Check out now</h2>
<p>Please enter your details, and we'll ship your goods right away!</p>
@using (Html.BeginForm())
{
    <h3>Ship to</h3>
    <div class="form-group">
        <label>Name:</label>
        @Html.TextBoxFor(x => x.Name, new { @class = "form-control" })
    </div>
    <h3>Address</h3>
    <div class="form-group">
        <label>Line 1:</label>
        @Html.TextBoxFor(x => x.Line1, new { @class = "form-control" })
    </div>
    <div class="form-group">
        <label>Line 2:</label>
        @Html.TextBoxFor(x => x.Line2, new { @class = "form-control" })
    </div>
    <div class="form-group">
        <label>Line 3:</label>
        @Html.TextBoxFor(x => x.Line3, new { @class = "form-control" })
    </div>
    <div class="form-group">
        <label>City:</label>
        @Html.TextBoxFor(x => x.City, new { @class = "form-control" })
    </div>
    <div class="form-group">
        <label>State:</label>
        @Html.TextBoxFor(x => x.State, new { @class = "form-control" })
    </div>
    <div class="form-group">
        <label>Zip:</label>
        @Html.TextBoxFor(x => x.Zip, new { @class = "form-control" })
    </div>
    <div class="form-group">
        <label>Country:</label>
        @Html.TextBoxFor(x => x.Country, new { @class = "form-control" })
    </div>
        <h3>Options</h3>
        <div class="checkbox">
            <label>
                @Html.EditorFor(x => x.GiftWrap)
                Gift wrap these items
            </label>
        </div>
        <div class="text-center">
            <input class="btn btn-primary" type="submit" value="Complete order" />
        </div>
}

注意這里，我都是使用的Html.TextBoxFor方法和Html.EditorFor方法，通過傳入一個lamda表達式的形式，創建表單元素。這樣創建的表單元素能夠對應Action的參數ShippingDetails類型的屬性名稱，自動創建對象並傳給方法參數。

Completed視圖：

@{
    ViewBag.Title = "SportsStore: Order Submitted";
}
<h2>Thanks!</h2>
Thanks for placing your order. We'll ship your goods as soon as possible.

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

Checkout視圖：

點擊Complete order按鈕，返回Complete視圖。

添加表單驗證

剛才的表單，如果不填寫任何內容，也能提交成功。這種操作是非法的，現在我們需要給表單添加客戶端驗證。

一般的客戶端開發，都是將驗證的JavaScript代碼直接寫在頁面上。但是MVC框架提供了從實體類到客戶端的驗證方式，那就是給實體類屬性添加ValidationAttribute。

修改ShippingDetails內，給屬性添加ValidationAttribute特性。

using System.ComponentModel.DataAnnotations;  2 
namespace SportsStore.Domain.Entities
{
    public class ShippingDetails
    {
        [Required(ErrorMessage = "Please enter a name")]  8         public string Name { get; set; }
        [Required(ErrorMessage = "Please enter the first address line")] 10         public string Line1 { get; set; }
        public string Line2 { get; set; }
        public string Line3 { get; set; }
        [Required(ErrorMessage = "Please enter a city name")] 14         public string City { get; set; }
        [Required(ErrorMessage = "Please enter a state name")] 16         public string State { get; set; }
        public string Zip { get; set; }
        [Required(ErrorMessage = "Please enter a country name")] 19         public string Country { get; set; }
        public bool GiftWrap { get; set; }
    }
}

這里，為幾個必填字段添加了Required特性，提供的參數是個字符串，如果實體綁定失敗的時候（ModelState.IsValid為false），用於在客戶端顯示該字符串。

修改Checkout視圖，添加@Html.ValidationSummary()，用於在一個頁面區域顯示完整的表單錯誤消息。

@model SportsStore.Domain.Entities.ShippingDetails

@{
    ViewBag.Title = "SportStore: Checkout";
}
<h2>Check out now</h2>
<p>Please enter your details, and we'll ship your goods right away!</p>
@using (Html.BeginForm())
{
 @Html.ValidationSummary() 11     <h3>Ship to</h3>
    <div class="form-group">
        <label>Name:</label>
        @Html.TextBoxFor(x => x.Name, new { @class = "form-control" })
    </div>
    <h3>Address</h3>
    <div class="form-group">
        <label>Line 1:</label>
        @Html.TextBoxFor(x => x.Line1, new { @class = "form-control" })
    </div>
    <div class="form-group">
        <label>Line 2:</label>
        @Html.TextBoxFor(x => x.Line2, new { @class = "form-control" })
    </div>
    <div class="form-group">
        <label>Line 3:</label>
        @Html.TextBoxFor(x => x.Line3, new { @class = "form-control" })
    </div>
    <div class="form-group">
        <label>City:</label>
        @Html.TextBoxFor(x => x.City, new { @class = "form-control" })
    </div>
    <div class="form-group">
        <label>State:</label>
        @Html.TextBoxFor(x => x.State, new { @class = "form-control" })
    </div>
    <div class="form-group">
        <label>Zip:</label>
        @Html.TextBoxFor(x => x.Zip, new { @class = "form-control" })
    </div>
    <div class="form-group">
        <label>Country:</label>
        @Html.TextBoxFor(x => x.Country, new { @class = "form-control" })
    </div>
        <h3>Options</h3>
        <div class="checkbox">
            <label>
                @Html.EditorFor(x => x.GiftWrap)
                Gift wrap these items
            </label>
        </div>
        <div class="text-center">
            <input class="btn btn-primary" type="submit" value="Complete order" />
        </div>
}

為了更美觀，我再Content文件夾內添加樣式表文件ErrorStyles.css，並在_Layout.cshtml引用它。

.field-validation-error {color: #f00;}
.field-validation-valid { display: none;}
.input-validation-error { border: 1px solid #f00; background-color:#fee; }
.validation-summary-errors { font-weight: bold; color: #f00;}
.validation-summary-valid { display: none;}

實體對象驗證失敗后，新生成的視圖表單元素，將包含這些css的class屬性，在統一的ErrorStyles.css樣式表內定義這些樣式。

新的_Layout.cshtml文件

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="~/Content/bootstrap.css" rel="stylesheet" />
    <link href="~/Content/bootstrap-theme.css" rel="stylesheet" />
    <link href="~/Content/ErrorStyles.css" rel="stylesheet" />
    <title>@ViewBag.Title</title>
    <style>
        .navbar-right {
            float: right !important;
            margin-right: 15px;
            margin-left: 15px;
        }
    </style>
</head>
<body>
    <div class="navbar navbar-inverse" role="navigation">
        <a class="navbar-brand" href="#">SPORTS STORE</a>
        @Html.Action("Summary", "Cart")
    </div>
    <div class="row panel">
        <div id="categories" class="col-xs-3">
            @Html.Action("Menu", "Nav")
        </div>
        <div class="col-xs-8">
            @RenderBody()
        </div>
    </div>
</body>
</html>

運行程序，得到表單驗證錯誤時的運行頁面。

這里看到，出錯的表單元素顯示紅色背景色和紅色邊框。表單上部用剛才定義的樣式，顯示了定義在實體類屬性的特性上的錯誤提示字符串。