Question

Possible Duplicate:
MVC(3) handleUpdate

I’m (slowly) learning how to use MVC 3 and at the moment I’m having a looking at the MvcMusicStore tutorial app on the asp.net website.

Right now I’m trying to understand how HttpPost works. From what I can gather, the user performs whatever actions they want in their browser and then with the use of jQuery, the data is posted back to the server (to the corresponding function with [HttpPost] attribute) and then in this case, a json result is sent back to the browser which handles this and updates elements accordingly.

I understand this fine, but in the particular snippet of code I’m looking at, I can’t understand how the ‘handleUpdate()’ function is being hit when there appear to be no calls made from either the js or the server-side code. Is there something I’m missing here? Anyway here is the front-end:

@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="[e-mail]">
            <td>
                @Html.ActionLink(item.Album.Title, "Details", "Store", new { id = item.AlbumId }, null)
            </td>
            <td>
                @item.Album.Price
            </td>
            <td id="[e-mail]">
                @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>

and here is the (relevant) server-side code:

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

I can see that the handleUpdate() manipulates the DOM based on the returned JSON, but I can’t figure out for the life of me how it’s being called? Is there some jQuery magic going on or have I completely misunderstood how this all works?

Thanks!

Answer 1

It’s not being called.

The relevant code on the client side that calls the RemoveFromCart method on the server side is this:

if (recordToDelete != '') {

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

Note the URL is /ShoppingCart/RemoveFromCart, which maps to the URL route for the RemoveFromCart method.

The jQuery post method is being used to make the call to the method on the controller, and then a closure (indicated by the function() { ... }) is passed, not the handleUpdate method.