Question

I have a ASP.NET MVC3 application that gets a List of Coordinates from a WCF service. This service returns a List with a few properties (Xcoor and Ycoor).

   public List<Location> GetCoordinate()
        {
            sensor = new Location();

            List<Location> coordinateList = sensor.GetSensorInformation();

            return coordinateList;

        }

In my web Page, I have a JavaScript function that takes 2 parameters and displays coordinates on the page (on a map)

function GetLocation(y, x){
//my code here
}

I want to get the list of coordiates from my controller and pass them in to that JS function for processing.

What is the best way to go about this?

I tries using the following but I dont know how to parse the results

 $.ajax({
            url: '@Url.Action("GetCoordinate")',
            type: 'GET',
             dataType: 'xml',
            success: function(result) {

            },
            error: function (xhr, ajaxOptions, thrownError){
                    alert(xhr.status);
                    alert(thrownError);}
        });

Any ideas?

Answer 1

Change your controller to the following:

public ActionResult GetCoordinate()
{
    sensor = new Location();

    List<Location> coordinateList = sensor.GetSensorInformation();

    return Json(coordinateList, JsonRequestBehavior.AllowGet);

 }

Now your controller action is returning JSON which jQuery can process.

Change your jQuery method to do this:

$.ajax({
    url: '@Url.Action("GetCoordinate")',
    type: 'GET',
    dataType: 'json',
    success: function(data) {
        // process the data coming back
        $.each(data, function(index, item) {
            alert(item);
        });
    },
    error: function (xhr, ajaxOptions, thrownError) {
        alert(xhr.status);
        alert(thrownError);
    }
});

Now your AJAX method knows it is dealing with JSON data. You can use the jQuery each method to do something with the data (I am just doing an alert in this case).