How do I call a controller method from JQuery?

Question

I have ajax code for asp.net (non-mvc) to call to a webMethod to get additional data from the server for a request. But I can't seem to figure out the url to give my JQuery in MVC.

<script type="text/javascript" language="javascript">
function SubmitAjax(url, message, successFunc, errorFunc) {
    $.ajax({
        type:"POST",
        url:url,
        data:message,
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success:successFunc,
        error:errorFunc
        });

};

I don't want to pass the entire list of related data to a select list to every person that arrives at the page, as not all will need this functionality. So I'd like to call a controller or webmethod via JQuery, but can't seem to find out how to address the URL in MVC.

I noticed this post: http://stackoverflow.com/questions/1005122/jquery-ajax-call-gets-resolved-to-the-current-controller-folder-instead-of-root

is $.getJson an mvc method? is this a good solution for my use case? I only need to return a string url, or an empty string if what i'm looking for is not found. Do I need to include a for the $.getJSon method? is that part of MVC or part of JQuery? Is the leading slash going to point to Application root or server root?

Answer 1

Try this post: http://stackoverflow.com/questions/764965/basic-ajax-example-with-asp-net-mvc/765974#765974

or this one: http://stackoverflow.com/questions/746815/how-to-get-the-json-object-for-drop-down/748446#748446

They should give you some pointers.

In essence, $.getJson is a jQuery method, not an MVC one, but use want to use that in combination with your MVC controller returning a Json result.

Answer 2

You can use $.getJSON(url,[data],[callback(data)]) where data is your returned json data object.

Alternatively you can use $.post(url,[data],[callback(data)]) where data is you returened string / data object.

url : it is the relative url to your controller/action/script which returns json/data back.

The above are jquery methods and you shoul be able to use if you have included jquery js file.

Answer 3

Well, my guess is that you are having trouble with how url's are constructed. If you don't have a slash before the url it will be relative to your current url. So if the current url is: /Home/Index and you have a link like this: <a href="Ticket/CheckForInstaller">Text</a> then that link will point to the following url: /Home/Index/Ticket/CheckForInstaller. This is always the behavior in the browser. The same thing happens if you have a page in a folder in a webforms application. There is nothing different with a asp.net mvc url then with any other web framework. The url you want is probably this one: /Ticket/CheckForInstaller.

The asp.net mvc framework does, however, supply you with helpers so that you don't have to hard code any url. You can do that like this:

<%=Url.Action("Ticket", "CheckForInstaller")%>

But the only thing this will do is find the appropriate url that points to that action ("/Ticket/CheckForInstaller", depending on your routes) and write it out.

Answer 4

The problem was the webMethod Tag on the controller, that was needed or helpful in asp.net, but not in asp.net mvc

Answer 5

This is what I've been doing lately, and it's been working fine.

1. Get the root path and store it in a hidden input (replace [ with <)

   [input id="urlBase" type="hidden" value="<%= Url.Content("~") %>" />

2. Get the value of that input and store it in js (using jquery in this case)

   _urlBase = $("#urlBase").val();

3. Use that variable to call controllers

   $.ajax({ type: "GET", url: _urlBase + "Controller/Action", dataType: "json" });