JQuery - does not fire MVC Controller Action

Question

I have the following JQuery code:

// When the document is ready, start firing our AJAX
$(document).ready(function() {
    function showValues() {
        var str = $("form").serialize();
        $("#results").text(str);
    }

    $(":checkbox, :radio").click(showValues);
    $("select").change(showValues);
    //showValues();

    // Bind actions...
    $("#navIndex a").bind("click", function(e) { updateNavIndex($(this).attr('href')); });
    $("#navPrevNext a").bind("click", function(e) { updateNavPrevNext($(this).attr('href')); });
    $("#ItemsPerPage").bind("change", function(e) { updateAll(); });
    $(":checkbox, :radio").bind("change", function(e) { updateAll(); });

    $("#navIndex a").click(function() {
        // switch class type...
        $("#navIndex a").removeClass('selected');
        $("#navIndex span").removeClass('selected');
        $("#navIndex a").addClass('notselected');
        $("#navIndex span").addClass('notselected');
        $(this).removeClass('notselected');
        $(this).addClass('selected');
        $(this).parent().removeClass('notselected');
        $(this).parent().addClass('selected');

        // Get navigation index...
        var navIndex = $(this).attr('href');

        this.blur();
        return true;
    });
    $("#navPrevNext a").click(function() {
        // Get navigation index...
        var navIndex = $(this).attr('href');

        this.blur();
        return true;
    });
});

// Use the getJSON method to call our JsonResult action
var retrieveProductData = function(path, productGroup, productType, itemsPerPage, pageIndex, filter, fnHandleCallback) {
    $.getJSON(path
             , { productGroup: productGroup }
             , { productType: productType }
             , { itemsPerPage: itemsPerPage }
             , { pageIndex: pageIndex }
             , { filter: filter }
             , function(data) { fnHandleCallback(data); });
};

// Use the getJSON method to call our JsonResult action
var retrieveMenuData = function(path, productGroup, productType, itemsPerPage, pageIndex, filter, fnHandleCallback) {
    $.getJSON(path
             , { productGroup: productGroup }
             , { productType: productType }
             , { itemsPerPage: itemsPerPage }
             , { pageIndex: pageIndex }
             , { filter: filter }
             , function(data) { fnHandleCallback(data); });
};

// The path parameter is our JSON controller action
function updateNavIndex(pageIndex) {
    var filters = $("form").serialize();
    var productGroup = $("#valProductGroup").attr('title');
    var productType = $("#valProductType").attr('title');
    var itemsPerPage = $("#ItemsPerPage").val();

    retrieveMenuData("/CatalogAjaxController/UpdateNavigation"
                    , productGroup
                    , productType
                    , itemsPerPage
                    , pageIndex
                    , filters
                    , handleMenuData);
    retrieveProductData("/CatalogAjaxController/UpdateNavigation"
                       , productGroup
                       , productType
                       , itemsPerPage
                       , pageIndex
                       , filters
                       , handleProductData);
}

// The path parameter is our JSON controller action
function updateNavPrevNext(pageIndex) {
    var filters = $("form").serialize();
    var productGroup = $("#valProductGroup").attr('title');
    var productType = $("#valProductType").attr('title');
    var itemsPerPage = $("#ItemsPerPage").val();

    retrieveMenuData("/CatalogAjaxController/UpdateNavigation"
                    , productGroup
                    , productType
                    , itemsPerPage
                    , pageIndex
                    , filters
                    , handleMenuData);
    retrieveProductData("/CatalogAjaxController/UpdateNavigation"
                       , productGroup
                       , productType
                       , itemsPerPage
                       , pageIndex
                       , filters
                       , handleProductData);
}

// The path parameter is our JSON controller action
function updateAll() {
    var filters = $("form").serialize();
    var productGroup = $("#valProductGroup").attr('title');
    var productType = $("#valProductType").attr('title');
    var itemsPerPage = $("#ItemsPerPage").val();

    retrieveMenuData("/CatalogAjaxController/UpdateNavigation"
                    , productGroup
                    , productType
                    , itemsPerPage
                    , pageIndex
                    , filters
                    , handleMenuData);
    retrieveProductData("/CatalogAjaxController/UpdateProducts"
                       , productGroup
                       , productType
                       , itemsPerPage
                       , pageIndex
                       , filters
                       , handleProductData);
}

// Ok, now we have the JSON data, we need to do something with it.  I'm adding it to another dropdown.  
function handleMenuData(data) {
    $("#otherDropDownId > option").remove();
    for (d in data) {
        var item = data[d];
        $("#otherDropDownId").append("<option value=\"" + item.Value + "\">" + item.Text + "</option>");
    }
}

// Ok, now we have the JSON data, we need to do something with it.  I'm adding it to another dropdown.  
function handleProductData(data) {
    $("#otherDropDownId > option").remove();
    for (d in data) {
        var item = data[d];
        $("#otherDropDownId").append("<option value=\"" + item.Value + "\">" + item.Text + "</option>");
    }
}

My Controller looks like:

public class CatalogAjaxController : Controller
{
    [Authorize, AcceptVerbs(HttpVerbs.Post)]
    public JsonResult UpdateNavigation(string productGroup, string productType, int itemsPerPage, string pageIndex, string filters)
    {
        int pIndex = Convert.ToInt32(pageIndex.Remove(0, 1));

        ProductCatalogBrowserModel myModel;
        myModel = new ProductCatalogBrowserModel(productGroup, productType, pIndex, itemsPerPage);

        return new JsonResult() { Data = myModel.ProductDetailMenu.ToArray() };
    }

    [Authorize, AcceptVerbs(HttpVerbs.Post)]
    public JsonResult UpdateProducts(string productGroup, string productType, int itemsPerPage, string pageIndex, string filters)
    {
        int pIndex = Convert.ToInt32(pageIndex.Remove(0, 1));

        ProductCatalogBrowserModel myModel;
        myModel = new ProductCatalogBrowserModel(productGroup, productType, pIndex, itemsPerPage);

        return new JsonResult() { Data = myModel.ProductDetail.ToArray() };
    }

}

I can catch a break point in any of the 3 Update functions in the JS scripts but it does not drop into the Controller at all. Am I missing something?

Answer 1

Your JS is GETting, the controller action only accepts a POST

Answer 2

I think you're missing how your Ajax arguments need to be structured.

$.getJSON(
    url,
    {
        'dataVal1': data1,
        'dataVal2': data2
    },
    myCallBackHandler
);

But, this passes a GET request, and chances are that you'll need a POST.

You can do this with a basic Ajax call:

$.ajax({
    url: thePath,
    type: 'POST',
    data: {
        dataVal1: data1,
        dataVal2: data2
    },
    success: successHandler,
    failure: failureHandler
});

You can find greater usage scenarios here:

http://docs.jquery.com/Ajax/jQuery.ajax#options