Johnane Umslana Johnane Umslana - 3 months ago 13
Ajax Question

Reverse Geocoding using Json from Controller Fail

I'm trying to return all the events onto Google maps but for some reason nothing is returned, I'm making use of ajax as well:
Here is the Controller:

public ActionResult LocateEvent()
{
DataModel1 db = new DataModel1();
ViewBag.Title = "Locate Event";
return View(db.Events.ToList());
}

[HttpPost]
public ActionResult Search(string Location)
{
DataModel1 GE = new DataModel1();
var result = GE.Events.ToList();
return Json(result, JsonRequestBehavior.AllowGet);
}


Here is the View where I'm trying to display all the events using their lat and long using ajax:

<script src="~/Scripts/jquery-1.10.2.js"></script>
<script src="~/Scripts/jquery.unobtrusive-ajax.js"></script>

@*<script src="http://maps.googleapis.com/maps/api/js?key=AIzaSyDY0kkJiTPVd2U7aTOAwhc9ySH6oHxOIYM&sensor=false"></script>*@

<script src="http://maps.google.com/maps/api/js?sensor=true" type="text/javascript"></script>


<script type="text/javascript">
$(document).ready(function () {

var gmarkers = [];
var map;

function initialize() {

var mapProp = {
center: new google.maps.LatLng(-33.875233, 25.4443775), //P.E Lat and Lon
zoom: 10,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("googleMap"), mapProp);
}

google.maps.event.addDomListener(window, 'load', initialize);

for (i = 0; i < gmarkers.length; i++) {
gmarkers[i].setMap(null);
}

$.ajax({
type: "POST",
url: '@Url.Action("Search", "Events")', //"../Map/Search"
contentType: "application/json; charset=utf-8",
//data: JSON.stringify({ "Location": x }),
dataType: "json",
success: function (data) {
var table = "<table class='table'>";
$.each(data, function (index, value) {

table += "<tr><td>" + value.EventName + "</td></tr>";
var latlng = new google.maps.LatLng(value.EventLat, value.EventLong);
var marker = new google.maps.Marker({
position: latlng,
icon: "../pinkball.png",
map: map
});

gmarkers.push(marker);

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

if (x == "") {
for (j = 0; j < gmarkers.length; j++) {
gmarkers[j].setMap(null);
}
}
}
});
});

Answer

I've managed to solve the problem. The error was that the object passed through the JSON call contained all the properties instead of only passing those fields that I wanted to use. E.g I created this class to only pass those field i want to use in the JQuery:

    public class ShortEvent
    {
         public string EventName { get; set; }
         public double? EventLat { get; set; }
         public double? EventLong { get; set; }
    }

Then I updated the controller like this:

    [HttpPost]
    public ActionResult Search(string Location)
    {
        DataModel1 GE = new DataModel1();          

        var result = GE.Events.Where(x => x.EventName.StartsWith(Location)).Select(e=> new ShortEvent {EventName = e.EventName, EventLat= e.EventLat, EventLong= e.EventLong).ToList();
        try
        {
            var test = JsonConvert.SerializeObject(result[0]);
        }
        catch ()
        {

        }
        return Json(result, JsonRequestBehavior.AllowGet);
    }

And that's how I managed to solve the problem. Thanks for the help Mr. Muecke, much appreciated.

Comments