Pass data from ASp.NET MVC Controller to JavaScript function

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).

Answer 2

well there a bunch of things here.

Define a function on your controller define a method

public JsonResult GetCoodinates() { }

consume your WCF server in the method and convert the results to a JsonResult.

In your javascript

$.ajax({ url: '/controller/GetCoordinates', type: GET, dataType: 'json', success: function(data) { $.each(data, function (key, value) { //do whatever call you are doing in here to place the coordinates on the map } });