ASP.NET Ajax returning null

Question

Tried reading other similar questions but can't quite detect what's wrong with mine. I'm attempting to build an ajax call as follows:

$.ajax({
    type: "POST",
    url: '@Url.Action("Search", "Map")', // Map Controller, Search Action
    data: JSON.stringify({ "Location": x }),
    contentType: "application/json; charset=utf-8",
    dataType: "json",
    success: function (data) {
        var table = "<table class='table'>";
        $.each(data, function (index, value) { // For each element in data:
            table += "<tr><td>" + value.title + "</td></tr>"; // add it to the table list
            var latlng = new google.maps.LatLng(value.latitude, value.longitude);
            var marker = new google.maps.Marker({
                position: latlng,
                map: map
            });

            gmarkers.push(marker);
        });
        table += "</table>";
        $("#myData").html(table);
    }
});

It's supposed to send the text acquired from:

$("#txtSearch").keyup(function () {
    var x = $("#txtSearch").val();

Now the text is acquired correctly, therefore 'x' does have a value when it's submitted. But once the ajax request above is processed the method being called which is the Search Action under the MapController is called with a null parameter:

[HttpPost]
public ActionResult Search (string title)
{
    Entities mapEntity = new Entities();
    string userId = User.Identity.GetUserId();
    var result = mapEntity.Markers.Where(x => x.title.StartsWith(title) && x.UserId == userId).ToList();
    return Json(result, JsonRequestBehavior.AllowGet);
}

As long as the title remains null I can't really do anything with it... Appreciate any help on resolving this issue.

Answer 1

You are looking for the "Location" parameter not for "title" in search method.

data: JSON.stringify({ "Location": x })

please change the parameter name from "title" to "Location" then check.

Answer 2

Try replacing those 2 parameters of your AJAX request:

data: JSON.stringify({ "Location": x }),
contentType: "application/json; charset=utf-8",

with this simple expression:

data: { title: x },

Notice that your action parameter is called title so that's what you should be sending.

---

UPDATE:

To resolve the 500 Internal Server error that you are getting, stop passing your domain entities to the views because they might contain circular references that cannot be JSON serialized. As always, use a view model to project your domain entities and include only the relevant information for the view:

var viewModel = result
    .Select(x => new 
    { 
        Prop1 = x.SimpleProp1, 
        Prop2 = x.SimpleProp2,
        Prop3 = x.NestedProp.Prop3,
    })
    .ToList();

return Json(viewModel, JsonRequestBehavior.AllowGet);

Btw, if you had inspected the AJAX request in the network tab of your browser, you would have seen that the response from your server is an YSOD in which the precise cause for the error is written.

Check it out so that you know how to debug those kind of problems next time (I have highlighted the important parts you should be looking at):