CODEWITHSUNDEEP
javascriptajaxasp.net-core.net-core-3.0
Mahbub
Mahbub

Reputation: 339

Javascript object is passing to the controller as null object "Uncaught ReferenceError: data is not defined"

I am working on openstreetmap with asp.net core 3.0. I am trying to get the latitude, longitude other details from the map as javascript object and sendng it to the controller. For that, I have implemented a AJAX request to pass the javascript object to the controller. But the controller receives the value of the object as null. I am wondering where am I doing the mistake. Or is it a version problem? Here is my code below,

My Model Class

public class LocationModel
{
    public int LocationId { get; set; }
    public string LocationName { get; set; }
    public string Note { get; set; }
    public double Latitude { get; set; }
    public double Longitude { get; set; }
}

My Controller-Action method

[HttpPost]
    public JsonResult Save(LocationModel details)
    {
        return Json(new { result = "OK"});
    }

My client-side code

map.on('click', function (e) {
        var name = window.prompt("Add Location Name:", "Text");
        var note = window.prompt("Add Note:", "Text");
        var latitude = e.latlng.lat;
        var longitude = e.latlng.lng;

        var locationdetails = { "LocationName": name, "Note": note, "Latitude": latitude, "Longitude": longitude };
        console.log(locationdetails);

        $.ajax({
            type: "POST",
            url: '/Home/Save',
            contentType: "application/json",
            dataType: "json",
            data: JSON.stringify({details: locationdetails}),
            success: function (response) {
                alert(data);
            },
            error: function (xhr) {
                console.log(xhr.responseText);
                alert("Error has occurred..");
            }
        });
    });

Here, locationdetails variable contains all the details which I need to pass to the controller. From the AJAX call, it is not working. If someone can show my mistake, that would be nice. Thanks in advance!

Upvotes: 1

Views: 109

Answers (3)

Fei Han
Fei Han

Reputation: 27803

the controller receives the value of the object as null.

To get the expected data, you can modify the code like below.

jQuery AJAX code

$.ajax({

    //...
    //other options
    //...

    data: JSON.stringify(locationdetails),
    success: function (response) {
        alert(response.result);
    },

    //...
});

Controller action

[HttpPost]
public JsonResult Save([FromBody]LocationModel details)
{
    return Json(new { result = "OK" });
}

Test result

enter image description here

Upvotes: 2

Pytth
Pytth

Reputation: 4176

You are using alert on data when your argument is response in your success function – below is broken:

            success: function (response) {
                alert(data);
            }

(EDIT FOR CLARITY)

Below should be working:

            success: function (response) {
                alert(response);
            }

Upvotes: 0

ssbarbee
ssbarbee

Reputation: 1712

Well C# model is with upper case for the keys. The javascript object

var locationdetails = { "name": name, "note": note, "latitude": latitude, "longitude": longitude };

has the keys in lowercase. The C# middleware mapper cannot map and it is resolved to null. Try the following 

var locationdetails = { "Name": name, "Note": note, "Latitude": latitude, "Longitude": longitude };

You might be missing locationId as I don't see it anywhere.

Upvotes: 0

Related Questions