jQuery Ajax 调用控制器

jQuery Ajax call to controller

提问by Ronald McDonald

I'm new to Ajax and I'm trying to disable a checkbox if certain items are selected in a dropdown. I need to pass in the mlaId to the GetMlaDeliveryType(int Id) method in the RecipientsController.cs.

我是 Ajax 的新手，如果在下拉列表中选择了某些项目，我正在尝试禁用复选框。我需要将 mlaId 传递给 RecipientsController.cs 中的 GetMlaDeliveryType(int Id) 方法。

I'm not exactly sure how to set up the ajax call in the javascript function checkMlaDeliveryType(mlaId).

我不太确定如何在 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);
    }

EDIT:

编辑：

Here's how the final javascript looked that worked

这是最终的 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);
            }
        }
    });

}

回答by Darin Dimitrov

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

    }
});

then fix your controller action so that it returns an ActionResult, not a string. JSON would be appropriate in your case:

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

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

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

Now your success callback will directly be passed a javascript instance of your model. You don't need to specify any dataTypeparameters:

现在您的成功回调将直接传递给您的模型的 javascript 实例。您不需要指定任何dataType参数：

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

回答by McGarnagle

Set datain the Ajax call so that its key matches the parameter on the controller (that is, Id):

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

data: { Id: mlaId },

Note also that it's a better practice to use @Url.Action(actionName, controllerName)to get an Action URL:

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

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