Can someone explain to me a few thing about this JQuery code I have here from the MVC Music Store tutorial

The thing that confuses me somewhat and it's probably due to the conventions in the jquery ajax() request .post() function is that it does not indicate anywher开发者_开发百科e that if request is successful that it should call the handleUpdate() function which gets the returned json object via "var json = context.get_data();", also why is the whole chunk of code starting with "if (data.ItemCount == 0)" in the handleUpdate() identical to the one in the .post() on success run > function (data) { duplicate code } .

Maybe because function (data) {} is callback function it waits for the entire request/response cycle to finish and that includes "var json = context.get_data();" in handleUpdate() ?

Thanks..

Pasted from the tutorial PDF, no other jscript in this view.

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

---

The handleUpdate() function is a relic from the previous MVC2 version of the tutorial where the Ajax for removing items from the cart was handled by Microsoft's Ajax called via an Ajax.ActionLink helper. (see below)

This was changed to use JQuery Ajax in the MVC3 version of this tutorial but the handleUpdate() code has been left in it seems by mistake during the conversion from MVC2 to MVC3.

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

<script type="text/javascript">
    function handleUpdate(context) {
        // Load and deserialize the returned JSON data
        var json = context.get_data();
        var data = Sys.Serialization.JavaScriptSerializer.deserialize(json);

        // Update the page elements
        $('#row-' + data.DeleteId).fadeOut('slow');
        $('#cart-status').text('Cart (' + data.CartCount + ')');
        $('#update-message').text(data.Message);
        $('#cart-total').text(data.CartTotal);
    }
</script>

...

<%: Ajax.ActionLink("Remove from cart", "RemoveFromCart", 
         new { id = item.RecordId }, 
         new AjaxOptions { OnSuccess = "handleUpdate" })%>

---

There is no way (according to this code) that handleUpdate is being called on success of $.post. Jquery post function has following syntax

$.post(url,data, callback);

and in the code you can see that all three parameters are explicitly specified and callback is an anonymous function with signature

function(data){}

Now, what you can see is that this anonymous function and handleUpdate are doing exactly the same logic. That makes me believe that they belong to the two different scenarios. For example, first scenario is that links are rendered using

Html.ActionLink(LinkText, ActionName, new{@class = "RemoveLink"})

In this case click event is handled by jquery function on the top and all the logic is done in this function (including ajax and callback). Second function might have been used for some

//please confirm all parameters of the function
Ajax.ActionLink(LinkText, ActionName, new AjaxOptions{onSuccess = "handleUpdate"});

and this seems to be connected with microsoftmvc ajax files that that used to exist in ancient times. You can put alert in each function and check what is the case with you.