ASP MVC variable to javascript?

Question

I am trying to get the locations of devices per project. I have a page which shows a google map and a list of all devices that belong to a project. My actions are:

public ActionResult GoogleMaps(int id)
  {
      return View(Project.Find(id).DeviceLocations);
  }

  public ActionResult Map(int id)
  {
      var map = Project.Find(id).DeviceLocations;
      Locations l = new Locations();
      l.locations = map;
      return Json(l, JsonRequestBehavior.AllowGet);
  }

The Jquery to get the Json:

jQuery().ready(function () {
    $.getJSON("/Project/Map/68", loadMap);

});

Listing the devices that belong to a project works like this, but the json obviously fails because the id is null. In the jquery where you see 68, it should be the id of the project that is being viewed.

How can I achieve this?

Answer 1

Pass id value to view and

$(function () {
    $.getJSON("/Project/Map/<%:Model.Id%>", loadMap);

});

Answer 2

If you have a route like

routes.MapRoute(
              "default",
              "{controller}/{action}/{id}",
              new { action = "Index", id = "" }
            );    

in your global.asax file then 68 from your link /Project/Map/68 will automatically be assigned to id parameter by default route handler. However if your question is how to get projectID to view there are several options. The most straightforward one is to assign it to ViewData in your ActionResult.

public ActionResult GoogleMaps(int id)
{
    ViewData["ProjectID"] = Project.GetCurrentProjectID(id);
    return View(Project.Find(id).DeviceLocations);
}

in your View you can write

jQuery().ready(function () {
    $.getJSON("/Project/Map/<%=ViewData["ProjectID"]%>", loadMap);

});