How to call ASP.NET MVC Action method using Javascript $.get, and then print the return value?

Question

I have an ASP.NET MVC web application consisting of one View page, where a user is asked to type into two textboxes 2 different flavors of ice cream. Then on blur (when the cursor moves away from both text boxes), then the $.get method is invoked. The IsFavoriteIceCreamCombo method returns true if the 2 ice cream flavors that the user entered in the text box are my favorite combo.

[Note that the onblur logic is not shown here for brevity]

Here are a few snippets of the JavaScript code:

var iceCream1 = document.getElementById('#ice-cream-1');
var iceCream2 = document.getElementById('#ice-cream-2');

....

var result = $.get('@Url.Action("IsFavoriteIceCreamCombo", "IceCream")?option1=' + iceCream1.value + ';option2=' + iceCream2.value);

alert(result);

And here is the Action method in the IceCreamController:

[WebMethod]
public bool IsFavoriteIceCreamCombo(string option1, string option2)
{
    if (...)
    {
        return true;
    }
    return false;
}

How can I get alert(result) to alert the bool return value from the function?

Currently what value you are getting in `result` ? Read https://api.jquery.com/jquery.get/ — Chetan, Mar 31 '18 at 02:27
You need to remove `[WebMethod]` because in ASP.NET MVC controllers have actions, not web methods. Web methods are obsolete. — Ali Soltani, Mar 31 '18 at 02:38
`$.get('@Url.Action("IsFavoriteIceCreamCombo", "IceCream")', { option1: iceCream1.value, option2: iceCream2.value, function(response) { alert(response); });` — , Mar 31 '18 at 02:55
@StephenMuecke I believe there is a bracket `}` missing there. I'm trying this answer now! — aBlaze, Mar 31 '18 at 03:39
@StephenMuecke Thank you - that is the answer with an extra `}` here: `iceCream2.value}, function....` If you write this up as an answer, I will accept it — aBlaze, Mar 31 '18 at 03:45
If the action is successfully called (as per other comments) then you'll need to see what the actual error is. Use the full `$.ajax({ ... error: function(jqXHR, textStatus, errorThrown) { } });` to see what the actual error is (or some other error handling mechanism) - a `500` error will *always* have more info available. — freedomn-m, Mar 31 '18 at 04:24
Ihave rolled back your last edit. Please read [Why isn't commenting mandatory on downvotes, and why are ideas suggesting such shot down?](https://meta.stackoverflow.com/questions/357436/why-isnt-commenting-mandatory-on-downvotes-and-why-are-ideas-suggesting-such-s) — , Mar 31 '18 at 04:35
Possible duplicate of [How do I return the response from an asynchronous call?](https://stackoverflow.com/questions/14220321/how-do-i-return-the-response-from-an-asynchronous-call) — freedomn-m, Mar 31 '18 at 04:53

score 2 · Answer 1 · answered Mar 31 '18 at 02:56

2

When you make a call from your browser to the server, you must wait for a response. You do this by passing a callback function to JQuery. JQuery takes your callback function and executes it when it receives a reply passing the reply as the callback function parameter.

Try hardcoding the endpoint for starters.

$.get("/YourEndpoint", function(data) {
  alert("Reply: " + data);
});

answered Mar 31 '18 at 02:56

Mitch Stewart

1,253
10
12

2

Suggesting that OP hard code the url instead of doing it correctly using `@Url.Action()` is awful advice – Mar 31 '18 at 02:59
Thank you for your help, all. I implemented this above, and the Action method was successfully called (I have a breakpoint set in it), however the alert did not show. If I look in the Chrome developer's console, I see the message `Failed to load resource: The server responded with a status 500`. This is very odd, because the method WAS called. Do you have an idea why this is happening? – aBlaze Mar 31 '18 at 03:24

How to call ASP.NET MVC Action method using Javascript $.get, and then print the return value?

1 Answers1