跟我学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, );

             }

             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"))

     {

         <div class="pull-right">

             @Html.HiddenFor(x => x.ProductID)

             @Html.Hidden("returnUrl", Request.Url.PathAndQuery)

             <input type="submit" class="btn btn-success" value="Add to cart" />

         </div>

     }

     <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")

     </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;

 using SportsStore.WebUI.Infrastructure.Binders;

 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());

         }

     }

 }

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, );

             }

             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);

         }

这里，使用方法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;



         public CartController(IProductRepository productRepository, IOrderProcessor productOrderProcessor)

         {

             repository = productRepository;

             orderProcessor = productOrderProcessor;

         }

         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, );

             }

             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()

         {

             return View(new ShippingDetails());

         }

         [HttpPost]

         public ViewResult Checkout(Cart cart, ShippingDetails shippingDetails)

         {

             if (cart.CartLines.Count() == )

             {

                 ModelState.AddModelError("", "Sorry, your cart is empty!");

             }

             if (ModelState.IsValid)

             {

                 orderProcessor.ProcessOrder(cart, shippingDetails);

                 cart.Clear();

                 return View("Completed");

             }

             else

             {

                 return View(shippingDetails);

             }

         }

     }

 }

跟接口属性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;



 namespace SportsStore.Domain.Entities

 {

     public class ShippingDetails

     {

         [Required(ErrorMessage = "Please enter a name")]

         public string Name { get; set; }

         [Required(ErrorMessage = "Please enter the first address line")]

         public string Line1 { get; set; }

         public string Line2 { get; set; }

         public string Line3 { get; set; }

         [Required(ErrorMessage = "Please enter a city name")]

         public string City { get; set; }

         [Required(ErrorMessage = "Please enter a state name")]

         public string State { get; set; }

         public string Zip { get; set; }

         [Required(ErrorMessage = "Please enter a country name")]

         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()

     <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>

运行程序，得到表单验证错误时的运行页面。

这里看到，出错的表单元素显示红色背景色和红色边框。表单上部用刚才定义的样式，显示了定义在实体类属性的特性上的错误提示字符串。

巴特西

跟我学ASP.NET MVC之七：SportsStrore一个完整的购物车

最新文章

热门文章