JQuery的 - 不火MVC控制器動作

Question

我有以下的jQuery代碼：

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

我的控制器看起來像：

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

} 

我可以在任何的3個更新功能，抓住一個機會點在JS腳本中，但它根本不會掉入Controller中。我錯過了什麼嗎？

Answer 1

我認爲你缺少你的Ajax參數需要怎樣的結構。

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

但是，這通過了一個GET請求，很可能你需要一個POST。

您可以用基本的Ajax調用做到這一點：

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

你可以在這裏找到更多的使用場景：

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

Answer 2

你的JS不饒人，控制器動作只接受POST