ASP.NET MVC3书店--第八节 使用Ajax的购物车（第三部分）（转）

http://blog.sina.com.cn/s/blog_6ad539a90100r8gv.html

这个方法的执行结果与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 > 现在我们已经建立了一个购物车页面，允许匿名用户将书籍放入购物车中。在下一节中，我们将允许注册用户完成本次购买的下订单过程。