使用jQuery Ajax调用控制器

Question

我是Ajax的新手，正在尝试在下拉菜单中选择某些项目时禁用复选框。 我需要将mlaId传递给RecipientsController.cs中的GetMlaDeliveryType（int Id）方法。

我不确定如何在javascript函数checkMlaDeliveryType（mlaId）中设置ajax调用。

        //  MLA Add  disable express checkbox if delivery type is electronic
        $('.AddSelectedMla').change(function () {

            var deliveryType = checkMlaDeliveryType($('.AddSelectedMla').val());


            // disable express option if delivery type is Electronic
            if (deliveryType == "Mail") {
                $(".mlaExpressIndicator").removeAttr("disabled");
            }else{
                $(".mlaExpressIndicator").attr('checked', false).attr("disabled", true);
            }

        })

        // ajax call to get delivery type - "Mail" or "Electronic"
        function checkMlaDeliveryType(mlaId)
        {
            $.ajax({
                type: "GET",
                url: "/Recipients/GetMlaDeliveryType/" ,
                data: mlaId,
                dataType: ,
                success: 
            });

        }

RecipientsController.cs

    public string GetMlaDeliveryType(int Id) 
    {
        var recipientOrchestrator = new RecipientsOrchestrator();

        // Returns string "Electronic" or "Mail"
        return recipientOrchestrator.GetMlaDeliveryTypeById(Id);
    }

编辑:

下面是最终可行的JavaScript代码：

//  MLA Add  disable express checkbox if delivery type is electronic
$('.AddSelectedMla').change(function () {

    checkMlaDeliveryType($('.AddSelectedMla').val());
})

// ajax call to get delivery type - "Mail" or "Electronic"
function checkMlaDeliveryType(mlaId)
{
    $.ajax({
        type: 'GET',
        url: '@Url.Action("GetMlaDeliveryType", "Recipients")',
        data: { id: mlaId },
        cache: false,
        success: function (result) {
            // disable express option if delivery type is Electronic
            if (result == "Mail") {
                $(".mlaExpressIndicator").removeAttr("disabled");
            } else {
                $(".mlaExpressIndicator").attr('checked', false).attr("disabled", true);
            }
        }
    });

}

- Ronald McDonald

---

感谢您的编辑，我能够根据它使我的工作正常了。 - B. Clay Shannon-B. Crow Raven

Answer 1

$.ajax({
    type: 'GET',
    url: '/Recipients/GetMlaDeliveryType',
    data: { id: mlaId },
    cache: false,
    success: function(result) {

    }
});

那么请修复您的控制器操作，使其返回一个ActionResult而不是字符串。在您的情况下，JSON是合适的：

public string GetMlaDeliveryType(int Id) 
{
    var recipientOrchestrator = new RecipientsOrchestrator();

    // Returns string "Electronic" or "Mail"
    return Json(
        recipientOrchestrator.GetMlaDeliveryTypeById(Id), 
        JsonRequestBehavior.AllowGet
    );
}

现在你的成功回调函数将直接传递一个JavaScript模型实例。您不需要指定任何dataType参数:

success: function(result) {
    // TODO: use the result here to do whatever you need to do
}

- Darin Dimitrov

---

谢谢，我还有一个问题。如何返回结果？我想让 checkMlaDeliveryType 返回结果。在 success 函数中，只需要返回 result 吗？ - Ronald McDonald

不，你不能返回任何结果。AJAX是异步的，这意味着你应该只在success回调函数中操作结果。你也可以从成功的回调函数中调用其他函数，该函数将对结果执行必要的操作。 - Darin Dimitrov

Answer 2

在Ajax调用中设置data，使其键与控制器上的参数（即Id）匹配：

data: { Id: mlaId },

注意，更好的做法是使用@Url.Action(actionName, controllerName)获取操作URL：

url: '@Url.Action("GetMlaDeliveryType", "Recipients")'

- McGarnagle