CODEWITHSUNDEEP
javascriptjqueryajaxasp.net-mvc
Ravindra
Ravindra

Reputation: 43

$.ajax method not calling the controller action method

I am calling javascript function on @Html.ActionLink clicked event. The Javascript function calls the jquery function in which I have written the $.ajax method for calling the json controller method. But it is not calling the controller method.......

Here is my code:

View

@Html.ActionLink("Submit", "AdminEvaluate", "Application", new { onclick = "Show('" + Model.applicationList.ApplicationId + "','statusList')" })|

Here, ApplicationId is coming from database and statusList is Radio Button group name from where I need to find the selected radio button.

Javascipt and jQuery code

function Show(appId, appStatus) {
    $.fn.gotof(appId,appStatus);
}

Getting parameter from view and passing to jQuery function

jQuery function

$(document).ready(function () {
    $.fn.gotof = function (appId, appStatus) {
        var selectedItem = $("input[name='" + appStatus + "']:checked").val();  
        $.ajax({
            url: '/Application/UpdateApplicantStatus',
            data: { id: appId , status: selectedItem},
            traditional: true,
            dataType: "json",
            contentType: "application/json",
            success: function (data) {
                alert(data);
            }
        });
    });

Controller Method

public JsonResult UpdateApplicantStatus(int id, string status){
    return Json("Correct", JsonRequestBehavior.AllowGet);
}

I have put break point on controller method but it is not coming at a break point.

Thanks in Advance.

Upvotes: 4

Views: 33680

Answers (5)

Rachel Cohen
Rachel Cohen

Reputation: 1

sat on this for hours:

When using ajax - json in a js.script file:

the url is written with its real path e.g. -  url: '/contoller/Action',


                                $.ajax({
                                   url: '/NextPage/GetSpDropDown',                                      
                                   data: {'segInputVal': segInputVal}, 
                                    cache: false, 
                                    type: "GET",
                                    dataType: "json",
                                    success: function (result) {
                                     if (result.Success) {
                                     var resultArray = result.Result;.....

If the script is written in your HTML page then you must use 

@(Url.Action(Action,controller))

                                   $.ajax({
                       url: "@(Url.Action("GetSpDropDown", "NextPage"))",
                                    data: { 'segInputVal': segInputVal },
                                    cache: false,
                                    type: "GET",
                                    dataType: "json",
                                    success: function (result) {
                                     if (result.Success) {
                                     var resultArray = result.Result;....

And dont forget not to include the word controller in your controller name.

I have had SO MUCH help from stackoverflow- hope to pay a little back

Upvotes: 0

super cool
super cool

Reputation: 6045

May be this sample help you :) let me know

ajax call with type :

 $.ajax({
            type: "GET",
            url: '@Url.Action("UpdateApplicantStatus", "Application")',
            contentType: "application/json; charset=utf-8",
            data: { id: appId , status: selectedItem },
            dataType: "json",
            success: function() { alert('Success'); }

            });

controller :

public ActionResult UpdateApplicantStatus(int id, string status){
    return Json(// blah blah blah ...
}

This should work else let me know

Upvotes: 4

azhar_SE_nextbridge
azhar_SE_nextbridge

Reputation: 304

Do that way actually 3 mistakes 1 was notify by @Mr Code the type is missing 2nd your parameters not match as your function takes one you send the data in wrong format..

$(document).ready(function () {
    $.fn.gotof = function (appId, appStatus) {
        var selectedItem = $("input[name='" + appStatus + "']:checked").val();  
        $.ajax({
            url: '/ApplicationController/UpdateApplicantStatus',
data:"{'id':'" + appId + "', 'appStatus': '" + selectedItem+ "'}",//here you format is wrong i correct it
            traditional: true,
            dataType: "json",
            contentType: "application/json",
            success: function (data) {
                alert(data);
            }
        });
    });

Upvotes: 0

AlexB
AlexB

Reputation: 7416

Your ajax call is wrong.

If your controller method signature is

public JsonResult UpdateApplicantStatus(int id, string appStatus)

Then you MUST have parameter names matching with your parameters of your ajax call.
So, instead of

data: { id: appId , status: selectedItem}

Just write

data: { id: appId , appStatus: selectedItem}

If you have any other problem, just post the error(s) you should have in your browser's console.

Upvotes: 1

sivakumarrd
sivakumarrd

Reputation: 15

Maybe parameter names of controller function and ajax calling function should match.

you can try this

data: { id: appId , appStatus: selectedItem},

Upvotes: 0

Related Questions