JQuery - ne se déclenche pas MVC action

Question

Controller Je le code JQuery suivant:

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

Mon contrôleur ressemble à:

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

} 

Je peux attraper un point de rupture dans l'une des 3 fonctions de mise à jour dans les scripts JS mais il ne tombe pas dans le contrôleur du tout. Est-ce que je manque quelque chose?

Answer 1

Je pense que vous manquez la façon dont vos arguments Ajax doivent être structurés. Mais, ceci passe une requête GET, et il y a des chances pour que vous ayez besoin d'un POST.

Vous pouvez le faire avec un appel Ajax de base:

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

Vous pouvez trouver plus de scénarios d'utilisation ici:

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

Answer 2

Votre JS devient, l'action du contrôleur accepte seulement POST