AJAX Jquery MVC5 404错误

Question

I am very new to MVC and I have got a question about MVC / AJAX Calls.

I am trying to get the data back from MVC Controller but it keeps saying 404 Error

"NetworkError: 404 Not Found - http://localhost:6481/MDT/Detail?id=4935"

My Javascript call is as below and I hardcoded id:1245 as the test. I tried to switch POST and GET, but still no luck

 $.ajax({
    type: "GET",
    url: 'MDT/Detail',
    data: JSON.stringify({
        id: 1245
    }),
    contentType: "application/json",
    dataType: "JSON",
    success: function(data) {
        console.log(data);
    },
    fail: function(data) {}
 }); 

I have tried it without JSON.stringify and the error is still the same (404)

$.ajax({
    type: "GET",
    url: 'MDT/Detail',
    data: {
        id: 1245
    },
    contentType: "application/json",
    dataType: "JSON",
    success: function(data) {
        console.log(data);
    },
    fail: function(data) {}
}); 

The following is the code in the Controller..

    [Route("MDT/Detail/{id}")]
    public JsonResult Detail(int? id)
    {
        ITS.Models.ComputerDetail cp = GetDataFromDatabase(id.Value);

        return Json(cp, JsonRequestBehavior.AllowGet);
    }

I have checked in Firebug and the parameters are passed correctly as following:

I couldn't figure out what I have done wrong. Could you please help me with this error?

If I used (http://localhost:6481/MDT/Detail/1245), it works fine and returns the JSON object but I couldn't call this MVC method from JQuery AJAX.

Answer 1

Answer is just not to use

JSON.stringify({ id: 1245 })

just pass

data:{ id: 1245 }

with

Also POST request working after adding [HttpPOST] Attribute to Controller Action.

And MVC default routing is {Controller}/{Action}/{id} as per your ajax call Route is http://localhost:6481/MDT/Detail?id=4935 and id is taken as Query String Parameter so for that you need to use Route as http://localhost:6481/MDT/493.

Answer 2

You must send id not like param but like part of url. Change your code to this:

$.ajax({
    type: "GET",
    url: 'MDT/Detail/1245',
    contentType: "application/json",
    dataType: "JSON",
    success: function(data) {
        console.log(data);
    },
    fail: function(data) {}
});