试图理解MVC3中的HttpPost

时间:2012-02-28 16:23:22

标签: c# jquery asp.net asp.net-mvc-3

  

可能重复:
  MVC(3) handleUpdate

我(慢慢)学习如何使用MVC 3,目前我正在浏览asp.net网站上的MvcMusicStore教程应用程序。

现在我正在努力了解HttpPost的工作原理。从我可以收集的内容中,用户在浏览器中执行他们想要的任何操作,然后使用jQuery,将数据发回服务器(使用[HttpPost]属性返回到相应的函数),然后在这种情况下, json结果被发送回处理此问题的浏览器并相应地更新元素。

我理解这很好,但是在我正在查看的特定代码片段中,当看起来没有来自js的调用时,我无法理解'handleUpdate()'函数是如何被命中的。服务器端代码。这里有什么我想念的吗?无论如何这里是前端:

@model MvcMusicStore.ViewModels.ShoppingCartViewModel
@{
    ViewBag.Title = "Shopping Cart";
}
<script src="/Scripts/jquery-1.4.4.min.js" type="text/javascript"></script>
<script type="text/javascript">
    $(function () {
        // Document.ready -> link up remove event handler
        $(".RemoveLink").click(function () {
            // Get the id from the link
            var recordToDelete = $(this).attr("data-id");

            if (recordToDelete != '') {

                // Perform the ajax post
                $.post("/ShoppingCart/RemoveFromCart", { "id": recordToDelete },
                    function (data) {
                        // Successful requests get here
                        // Update the page elements
                        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() {
        // Load and deserialize the returned JSON data
        var json = context.get_data();
        var data = Sys.Serialization.JavaScriptSerializer.deserialize(json);

        // Update the page elements
        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>Review</em> your cart:
</h3>
<p class="button">
    @Html.ActionLink("Checkout >>", "AddressAndPayment", "Checkout")
</p>
<div id="update-message">
</div>
<table>
    <tr>
        <th>
            Album Name
        </th>
        <th>
            Price (each)
        </th>
        <th>
            Quantity
        </th>
        <th></th>
    </tr>
    @foreach (var item in Model.CartItems)
    {
        <tr id="row-@item.RecordId">
            <td>
                @Html.ActionLink(item.Album.Title, "Details", "Store", new { id = item.AlbumId }, null)
            </td>
            <td>
                @item.Album.Price
            </td>
            <td id="item-count-@item.RecordId">
                @item.Count
            </td>
            <td>
                <a href="#" class="RemoveLink" data-id="@item.RecordId">Remove from cart</a>
            </td>
        </tr>
    }
    <tr>
        <td>
            Total
        </td>
        <td>
        </td>
        <td>
        </td>
        <td id="cart-total">
            @Model.CartTotal
        </td>
    </tr>
</table>

这是(相关的)服务器端代码:

//
        // AJAX: /ShoppingCart/RemoveFromCart/5

        [HttpPost]
        public ActionResult RemoveFromCart(int id)
        {
            // Remove the item from the cart
            var cart = ShoppingCart.GetCart(this.HttpContext);

            // Get the name of the album to display confirmation
            string albumName = storeDB.Carts
                .Single(item => item.RecordId == id).Album.Title;

            // Remove from cart
            int itemCount = cart.RemoveFromCart(id);

            // Display the confirmation message
            var results = new ShoppingCartRemoveViewModel
            {
                Message = Server.HtmlEncode(albumName) +
                    " has been removed from your shopping cart.",
                CartTotal = cart.GetTotal(),
                CartCount = cart.GetCount(),
                ItemCount = itemCount,
                DeleteId = id
            };

            return Json(results);
        }

我可以看到handleUpdate()根据返回的JSON操作DOM,但我无法弄清楚它的生命是如何被调用的?是否有一些jQuery魔法正在进行或者我完全误解了这一切是如何工作的?

谢谢!

1 个答案:

答案 0 :(得分:3)

没有被召唤。

客户端上在服务器端调用RemoveFromCart方法的相关代码是:

if (recordToDelete != '') {

    // Perform the ajax post
    $.post("/ShoppingCart/RemoveFromCart", { "id": recordToDelete },
        function (data) {
            // Handle result.
    });
}

请注意,该网址为/ShoppingCart/RemoveFromCart,该网址会映射到RemoveFromCart方法的网址路径。

jQuery post method用于调用控制器上的方法,然后传递一个闭包(由function() { ... }表示),而不是handleUpdate方法。< / p>