Problem with asp.net mvc and google maps

Question

I'm just getting into asp.net mvc and jquery so this might be a "stupid" question.

I'm developing an mvc application which contains a Google Map.

I've used this blog post as an inspiration

http://mikehadlow.blogspot.com/2008/10/using-google-maps-with-mvc-framework.html

and it's working as expected.

The problem occurs when I want to filter the map data.

The use case is the following:

1. I have a view with a list of element.
2. For each element I have a "Trace" link.
3. The link point to a controller actions and has the element id as parameter.
4. The controller action returns a view.
5. The view has some javascript that calls another controller actions
6. The controller action returns my map data as JSON
7. The script initializes a Google map and displays the JSON data on the map.

I run into problems at 4. The core of the problem is getting the id of the original element to the action that returns the JSON data.

This is what I have tried.

I've created a parameter class which has a public int id property. The map view is using this class as "View data class"

In the view I have added a hidden input field that get filled with the id value from the data class.

<input type="hidden" id="_lblId" value="<%=Model.Id%>"/>

After that I include the javascript files that should load the Map a get map data from the controller.

This is where I run into problems.

jQuery:

$(function() {
var id = parseInt($("#_lblId").val());
$.ajaxSetup({ cache: false });
if (google.maps.BrowserIsCompatible()) {            
    $.getJSON("/Maptest/Element/Tracemap", {id: id},  initialise);
}
});

Controller Action:

public ActionResult Tracemap(int id)
    {

        var map = new Map();

        var tracedata = _dataRep.ListSkanningerPaaKomponent(Convert.ToInt32(id));
        map.Name = "trace for element - " +id;
        map.Zoom = 2;
        map.LatLng = new LatLng { Latitude = 0.0, Longitude = 0.0 };
        var cnt = 0;
        foreach (var t in tracedata)
        {
            cnt++;

            var trace = new Trace
                            {
                                Name = "Trace " + cnt,
                                LatLng = new LatLng {Latitude = (double) t.Lat,                  Longitude = (double) t.Long},
                                Dato = (DateTime) t.Dato,
                                Tid = (DateTime) t.Tid,
                                Person = t.PersonId
            };
            map.Add(trace);
        }

        return Json(map);

    }

If I set a breakpoint in the controller action it never gets called. If I debug the javascript the id value is correct.

Using firebug I get this error: 500 Internal Server Error. And the link it tries to call is this : http://localhost:63246/Maptest/Element/Tracemap?%5F=1254848265779&id=18

If I change the action parameter to a string. The break point gets hit, but then id is empty.

Any ideas how to solve this? Or other ways to get the element Id to the JSON controller action?

Answer 1

I believe what you might be experiencing is a url routing problem. To get the id parameter in your controller, you'll need to make it part of your url: "/Maptest/Element/Tracemap/18".

in your jQuery call, I would simply do this:

var url = "/Maptest/Element/Tracemap/" + id; $.getJSON(url, null, initialise);

I'm not positive if you'll need the "null" for the data parameter. Try with and without it.