ASP.NET MVC 5 calling controller method from Javascript Error

Question

I am attempting to call a controller method from javascript and I seem to be having trouble getting this to execute correctly. I have very little experience with javascript and have followed other examples of how to do this from stackoverflow but I am still having some issues- if anyone can help that'd be fantastic.

Basically what I am trying to do is set a .data tag on a javascript object to the string returned by a method on the controller (this method calls a webservice that runs a SQL Server function). The method needs to be passed one parameter which is used in the function.

The code is below:

Javascript Code

for (var i = 0; i < stats.length; i++)
{ 
    var stat = stats[i].data('id');
    var color = CallService(stat);
    this.node.fill = color;
}

JQuery Method

    function CallService(id) {
    $.ajax({
        url: '@Url.Action("CallService", "NodeController")',
        type: 'GET',
        dataType: 'json',
        cache: false,
        data: { 'id': id },
        success: function (color) {
            return color;
        },
        error: function () {
            alert('Error occured');
        }
    });
}

Controller Method

    [HttpGet]
    public JsonResult CallService(string id)
    {
        var idNum = Convert.ToInt32(id);
        var StationService = new getStationStatus.Service1SoapClient("Service1Soap");
        string color = StationService.getStationStatus(idNum);
        return Json(color, JsonRequestBehavior.AllowGet);
    }

the controller is called the NodeController- which is what I am referring to in url: call of ajax.

Basically what is happening is when i run the page, I first get an error saying it cannot set this.node.fill to a null value THEN I get the alert that an error occurred- like I said I am pretty inexperienced with javascript so I am honestly not even sure if it is calling the method in the correct order if i get an error on this.node.fill before I receive the error message from JQuery.

Any/all help or suggestions is greatly appreciated!!!

Basic async coding error: You cannot return a value from the middle of a callback function (like success:) as that happens long after your function has exited. @Igor has some correct suggestions below. — iCollect.it Ltd
– iCollect.it Ltd, Commented Jan 5, 2015 at 17:49

Igor · Accepted Answer · 2015-01-05 17:54:41Z

5

If your controller class is NodeController, use only "Node" for the controller name in Url.Action:
```
url: '@Url.Action("CallService", "Node")',
```
You cannot synchronously return a value from an asynchronous function. Either pass a callback to CallService to be called on success or use jquery promise - http://api.jquery.com/promise/
We don't know what this.node.fill is or where it is defined. Likely, this.node is not defined at the time the assignment is executed.

edited Jan 5, 2015 at 17:54

answered Jan 5, 2015 at 17:42

Igor

15.9k1 gold badge29 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

jhinx Over a year ago

Thanks! I needed to use all of your tips, as well as switch the type from a get to a post

Tushar Gupta · Accepted Answer · 2015-01-05 17:43:09Z

2

You need not to write controller with controller's name

@Url.Action("CallService", "Node")

answered Jan 5, 2015 at 17:43

Tushar Gupta

16k1 gold badge33 silver badges53 bronze badges

2 Comments

jhinx Over a year ago

I tried that and it did not fix the problem- i am still seeing the same errors in the same order

iCollect.it Ltd Over a year ago

You missed the whole "returning a value from the middle of an async function" problem :)

Collectives™ on Stack Overflow

ASP.NET MVC 5 calling controller method from Javascript Error

2 Answers 2

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related