Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

jQuery Ajax call to controller

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.

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

        //  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

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

}
like image 294
Ronald McDonald Avatar asked Sep 24 '12 05:09

Ronald McDonald


People also ask

How can we call a controller method from jQuery Ajax in MVC?

The View consists of an HTML TextBox element and a Button. The Button has been assigned a jQuery click event handler and when the Button is clicked a jQuery AJAX called is made to the Controller's action method. The URL for the jQuery AJAX call is set to the Controller's action method i.e. /Home/AjaxMethod.

How pass JSON data to Ajax to controller?

Create target "JSON object Mapper" object class file according to the business requirements. Create a "Controllers\HomeController. cs" file with default Index method and GetData(...) method with string type input query parameters for Ajax call with following lines of code i.e.


1 Answers

$.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:

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 dataType parameters:

success: function(result) {
    // TODO: use the result here to do whatever you need to do
}
like image 69
Darin Dimitrov Avatar answered Oct 04 '22 23:10

Darin Dimitrov