Pass json data from Google Maps to MVC controller with AJAX

Question

I want to store data about addresses and coordinates of markers on map, so I'm creating button in Infowindow which will redirect me to form on another view (also with another controller). I want this form to be already filled with data about coordinates and address. I have function called on button click with AJAX code in it to send JSON data to method in controller. Problem is that after clicking on button controller method isn't called (although function call works properly while debugging). I've been searching a lot for a solution, but I really don't know what did I do wrong.

Call to addMarker :

google.maps.event.addListener(marker, 'click', function (event) {
            if(infowindow) infowindow.close();
            infowindow = new google.maps.InfoWindow({content: data});
            infowindow.open(map, marker);

            var buttonAdd = document.getElementById('addButton');

            buttonAdd.onclick = function() {
                addMarker(event.latLng, address);
            }
        }); 

JS function with AJAX:

   function addMarker(location, fulladdress) {
        var data = JSON.stringify(fulladdress + location) //it's ok, i checked with firebug

        $.ajax({
            type: "POST",
            url: "Incidents/Create",
            dataType: "json",
            contentType: "application/json; charset=utf-8",
            data: data
        })
    }

Controller:

public class IncidentsController : Controller
    {
        //some code
        [HttpPost]
        public ActionResult Create(string JsonStr)
         {
             return View();
         }
         //some code
    }

For now I'm just trying to get to another view without doing anything with recieved data, but it's not working. There's definetely something wrong with ajax or controller. I'm new to MVC, JS and AJAX, so please forgive me if it's something stupid. Thanks in advance.

TL;DR - Clicking on button should result in recieving another view with partially filled (with address and coordinates) form.

Answer 1

Found the problem.

You are using dataType: "json" . If you want to post JSON in MVC then you need to create appropriate model with the same format that you are going to post.

Take a look at below example.

Controller :

 public class JsonPostExampleController : Controller
 {
     [HttpPost]
     public ActionResult JsonPost(JsonModel data)
     {
          return View();
     }
 }

Javascript :

$.ajax({
    type: "POST",
    url: "JsonPostExample/JsonPost",
    dataType: 'json',
    data: { 'name': 'ravi' },
    success: function (data) { }
});

Model :

public class JsonModel
{
    public string name { get; set; }
}

Now as per your requirement, we can not use dataType: "json" as you can't create model according to google's response format for fulladdress and location.

So you need to use dataType: "text" and for that you only need to modify your javascript.

Update your javascript block with below :

function addMarker(location, fulladdress) {
    var data = JSON.stringify(fulladdress) + JSON.stringify(location)

    $.ajax({
        type: "POST",
        url: "Incidents/Create",
        dataType: "text",
        data: { JsonStr : data }
    });
}

and your controller code remains same as :

public class IncidentsController : Controller
{
    //some code
    [HttpPost]
    public ActionResult Create(string JsonStr)
    {
        return View();
    }
    //some code
}

now you should be able to get your data in string format at server side. If you want JSON server side then you can parse the string.