MVC2: Ajax call runs always in error function. Why? Whats wrong?

Question

aspx site:

<script type="text/javascript">
function AjaxTest() {

  var codeVal = "hello world";

  if (codeVal) {
    $.ajax({
             type: "POST",
             url: "CheckAge",    
             data: { code: codeVal },
             contentType: "application/json; charset=utf-8",
             dataType: "json",
             async: true,
             cache: false,
             success: function (result) {
                        alert("in ajax success");
             },
             error: function () {
                        alert("error");
             }

          });
  } 
}

Its double checked that the javascript function is called.

Controller:

[HttpPost]
public JsonResult CheckAge(String code)
{
      return Json("abc");
}

It ended up always in the ajax - error - function. The Controller function isnt called anyway. Why? Why get I always an error? What is wrong?

Answer 1

Check your url that you are posting to. It seems that you are missing the controller part. E.g. it should read /{controller}/{action}.

If that script is directly in the view (i.e. not in an external javascript file) you could have something like:

$.ajax({
    type: "POST",
    url: <%= Url.Action("CheckAge", "ControllerName") %>,    
    data: { code: codeVal },
    contentType: "application/json; charset=utf-8",
    dataType: "json",
    async: true,
    cache: false,
    success: function (result) {
        alert("in ajax success");
    },
    error: function () {
        alert("error");
    }
});

Also, I find it advantageous to use firebug to debug ajax stuff. You can set break points in your javascript and also see all the requests and responses.

HTHs,
Charles

EDIT: Try simplifying things... e.g.

$.post('<%= Url.Action("CheckAge", "ControllerName") %>',
       { code: codeVal },
       function (data) {
           alert("in ajax success");
       },
       "json");