现在的位置: 首页 > 综合 > 正文

ASP.NET MVC3书店–第八节 使用Ajax的购物车(第三部分)(转)

2012年07月17日 ⁄ 综合 ⁄ 共 4932字 ⁄ 字号 评论关闭
http://blog.sina.com.cn/s/blog_6ad539a90100r8gv.html

8.4 购物车控制器

    购物车控制器中主要实现三个处理:将书籍加入购物车,将书籍从购物车中删除,查阅购物车中书籍信息。它主要使用我们刚才创建的三个类:ShoppingCartViewModel类、ShoppingCartRemoveViewModel类与ShoppingCart类。与Store控制器与StoreManager控制器一样,我们需要添加引用一个BookStoreEntities对象。

    追加一个ShoppingCart控制器,保持“为‘创建’、‘更新’、‘删除’和‘详细信息’方案添加操作方法”复选框为非选取状态,如图8-3所示。

ASP.NET <wbr>MVC3书店--第八节 <wbr>使用Ajax的购物车(第三部分)

图8-3 添加ShoppingCart控制器

    完整的ShoppingCart控制器中的代码如代码清单8-6所示。Index方法与Add方法看起来非常相似。RemoveFromCart方法与CartSummary方法中使用了两个特殊的类,我们将在下一节中针对这两个类做一详细介绍。

    代码清单8-6 完整的ShoppingCart控制器中的代码

using System.Linq;

using System.Web.Mvc;

using MvcBookStore.Models;

using MvcBookStore.ViewModels;

 

namespace MvcBookStore.Controllers

{

    public class ShoppingCartController : Controller

    {

        BookStoreEntities storeDB = new BookStoreEntities();

        //

        // GET: /ShoppingCart/

        public ActionResult Index()

        {

            var cart = ShoppingCart.GetCart(this.HttpContext);

 

            //创建我们的视图模型

            var viewModel = new ShoppingCartViewModel

            {

                CartItems = cart.GetCartItems(),

                CartTotal = cart.GetTotal()

            };

            // 返回视图

            return View(viewModel);

        }

        //

        // GET: /Store/AddToCart/5

        public ActionResult AddToCart(int id)

        {

            // 从数据库中获取书籍信息

            var addedBook = storeDB.Books

                .Single(book => book.Id == id);

 

            // 将这本书加入购物车

            var cart = ShoppingCart.GetCart(this.HttpContext);

 

            cart.AddToCart(addedBook);

 

            //返回页面继续购物

            return RedirectToAction("Index");

        }

        //

        // AJAX: /ShoppingCart/RemoveFromCart/5

        [HttpPost]

        public ActionResult RemoveFromCart(int id)

        {

            // 从购物车中删除书籍

            var cart = ShoppingCart.GetCart(this.HttpContext);

 

            // 取得书名以便在确认信息中显示

            string bookName = storeDB.Carts

                .Single(item => item.RecordId == id).Book.Title;

 

            // 从购物车中删除

            int itemCount = cart.RemoveFromCart(id);

 

            // 显示确认信息

            var results = new ShoppingCartRemoveViewModel

            {

                Message = Server.HtmlEncode(bookName) +" 已经从购物车中被删除。",

                CartTotal = cart.GetTotal(),

                CartCount = cart.GetCount(),

                ItemCount = itemCount,

                DeleteId = id

            };

            return Json(results);

        }

        //

        // GET: /ShoppingCart/CartSummary

        [ChildActionOnly]

        public ActionResult CartSummary()

        {

            var cart = ShoppingCart.GetCart(this.HttpContext);

 

            ViewData["CartCount"] = cart.GetCount();

            return PartialView("CartSummary");

        }

    }

}

8.5 使用Ajax.ActionLink处理Ajax更新

    接下来,我们将使用ShoppingCartViewModel视图模型,采取同样的方法创建一个购物车使用的主视图以及一个列表视图,如图8-4所示。

ASP.NET <wbr>MVC3书店--第八节 <wbr>使用Ajax的购物车(第三部分)

 

8-4 创建购物车用主视图

但是,在从购物车中删除书籍的时候,我们不使用Html.ActionLink,而是使用如下所示的Ajax.ActionLink

@Ajax.ActionLink("Remove from cart","RemoveFromCart",new { id = item.RecordId },

new AjaxOptions { OnSuccess = "handleUpdate"})

这个方法的执行结果与Html.ActionLink帮助器的执行结果非常类似,但是它并不提交表单,而是向我们的RemoveFromCart方法执行 一个AJAX回调,返回一个序列化的JSON对象的,该对象将被自动传入到页面中一个可选的OnSuccess参数所指定的方法—本例中为 handleUpdate方法中。在handleUpdate这个JavaScript方法中解析JSON对象,使用Jquery来对视图执行以下四个快 速更新操作。

  1. 从列表中移除被删除的书籍。
  2. 更新购物车中的书籍数量。
  3. 向用户显示更新信息。
  4. 更新购物车中的总金额。

    因为书籍删除操作已经在主页面中使用一个Ajax回调操作被处理过了,所以我们不需要再额外为了RemoveFromCart(删除书籍)方法而添加一个视图了。主页面中的代码如代码清单8-7中所示。

    代码清单8-7 购物车页面中的代码

@model MvcBookStore.ViewModels.ShoppingCartViewModel

@{

    ViewBag.Title = "购物车";

}

<script src="/Scripts/jquery- 1.4.4.min.js" type="text/javascript"></script>

<script type="text/javascript">

    $(function () {

        // 页面打开时在点击链接的时候执行删除操作

        $(".RemoveLink").click(function () {

            //取得链接中的ID

            var recordToDelete = $(this).attr("data-id");

            if (recordToDelete != '') {

                // 执行ajax调用

                $.post("/ShoppingCart/RemoveFromCart", { "id":recordToDelete },

                    function (data) {

                        // 删除成功时执行的代码

                        // 更新页面元素

                        if (data.ItemCount == 0) {

                            $('#row-' + data.DeleteId).fadeOut('slow');

                        } else {

                            $('#item-count-' +data.DeleteId).text(data.ItemCount);

                        }

                        $('#cart-total').text(data.CartTotal);

                        $('#update-message').text(data.Message);

                        $('#cart-status').text('Cart (' + data.CartCount + ')');

                    });

            }

        });

    });

    function handleUpdate() {

        //装载并解析JSON对象

        var json = context.get_data();

        var data = Sys.Serialization.JavaScriptSerializer.deserialize(json);

 

        // 更新页面元素

        if (data.ItemCount == 0) {

            $('#row-' + data.DeleteId).fadeOut('slow');

        } else {

            $('#item-count-' + data.DeleteId).text(data.ItemCount);

        }

        $('#cart-total').text(data.CartTotal);

        $('#update-message').text(data.Message);

        $('#cart-status').text('Cart (' + data.CartCount + ')');

    }

</script>

<h3>

    <em>查阅</em> 购物车

 </h3>

<p>

     @Html.ActionLink("结算", "AddressAndPayment", "Checkout")

</p>

<div id="update-message">

</div>

<table>

    <tr>

        <th>

            书名

        </th>

        <th>

  

【上篇】
【下篇】

抱歉!评论已关闭.