MVC5: Getting JSON via Ajax not correctly passing data to Controller

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 the incoming parameter is NULL.

My Javascript call is as below and I hardcoded id:1245 as the test.

$.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) {    
                }
            });

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:

But it is giving me the following error for the "id" parameter

Exception Details: System.InvalidOperationException: Nullable object must have a value.

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

If I used this URL ( http://localhost:6481/MDT/Detail?id=1245 ) it returns JSON data. But If I used ( http://localhost:6481/MDT/Detail/1245 ), it shows the same error like JQuery AJAX call. So, it must be routing issue?

Answer 1

Replace data: JSON.stringify({ id: 1245 }), with data: { id: 1245 },

More about ajax can be found in it's documentation

Answer 2

var youridvalue = 1254;

$.ajax({
    type: "POST",
    url: '@Url.Content("~/MDT/Detail")?id=' + youridvalue,        
    contentType: "application/json",
    dataType: "JSON",
    success: function(data) {
        console.log(data);
    },
    fail: function(data) {}
});