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

}

我可以在 JS 脚本的 3 个更新函数中的任何一个中捕获断点，但它根本不会放入控制器中。我错过了什么吗？

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 是 GETting，控制器动作只接受一个 POST