This project has moved. For the latest updates, please go here.

ASP.NET MVC3 and Razor

May 10, 2011 at 1:25 AM

Has anyone got this working under Razor yet? I tried the following:

@Ajax
    .GoogleMap()
    .CssClass("GoogleMap")
    .Render();

but it just renders literally to the screen as:

System.Web.Mvc.AjaxHelper`1[System.Object] .GoogleMap() .CssClass("GoogleMap") .Render();

 

May 10, 2011 at 1:39 AM
Edited May 10, 2011 at 1:40 AM

Ah, I've got it. If you're going to split the expression across multiple lines, you need to surround with curly braces:

@{Ajax
    .GoogleMap()
    .CssClass("GoogleMap")
    .Render();}

Now it works just fine.

May 10, 2011 at 4:12 AM
Edited May 10, 2011 at 4:16 AM

At least, it works until I try to use a DynamicMap. If I manually add a pushpin then it renders properly, no problem. Following the example, I've returned a dataset to the control, but code I've added to the DataLoaded and DisplayData events doesn't get called:

@{Ajax
      .GoogleMap()
      .CssClass("GoogleMap")
      .DynamicMap(
            new { controller = "Home", action = "Contacts" },
            new DynamicMapOptions { DisplayData = "DynamicMap_DiplayData_Google" }
            )
      .AddPushpin(new Pushpin(51.477842,-0.001245)) // Greenwich Observatory
      .Render();}

<p>Pushpin Count: <span id="lblGoogleMapPushpinCount"></span></p>
<script type="text/javascript">
      function DynamicMap_DiplayData_Google(data) {
            alert('Rendering dynamic data');
            this.clearDynamicMapData();
            this.plotPushpins(data.pushpins);
            alert('Dynamic data rendered');
 
            $('#lblGoogleMapPushpinCount').html(data.pushpins.length)
      }
</script>

The alerts aren't firing and the span isn't being updated. I've checked that the controller is sending back results, and it is, so it looks like a problem with the DisplayData event not being triggered. Has anyone got dynamic data working in MVC3/Razor?

May 10, 2011 at 4:41 AM
Edited May 10, 2011 at 5:41 AM

Digging into the JavaScript in Map.js, I've put a breakpoint inside the loadDynamicMapData function, and it gets hit, at least as far as the getDynamicMapViewData call inside the jQuery.post call. However, if I put a breakpoint inside the Ajax callback function, then it never gets hit. So jQuery is preparing the Ajax call, but as far as I can tell, the callback isn't being triggered, but I can see in Fiddler that the controller is returning JSON data.

May 10, 2011 at 7:51 AM

OK, I've found the problem - MvcMaps does not support jQuery 1.4.2. Earlier versions of jQuery did not follow the JSON spec too well, so MvcMaps is currently producing invalid JSON, which is being rejected by the newer version of jQuery. It's a simple one line fix, just follow the link.

May 26, 2011 at 11:03 AM

I have the same issues with MVC3 and Razor.

@{Ajax
    .BingMap()
    .CssClass("BingMap")
    .Render();}

Results in:

Microsoft JScript runtime error: The value of the property '$' is null or undefined, not a Function object

The dynamic html generated looks place the map DIV at the beginning of the HTML casuing the issue:

 

<div id="divB029350" class="BingMap" style="position:relative;"></div><script type='text/javascript' src='/WebResource.axd?d=AGira--WHNr4IWm90QBHQPRpbEjw_4X4ESkjfBLIgfdaZir92gZOEDCeNUolX0S1Eaggy2UZH2yDxMauLrMKzPqMIcYcKsIFvnRNsYVziDEhf-sj0&t=634420015588593343'></script>
<script type='text/javascript' src='http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=6.2'></script>
<script type='text/javascript' src='/WebResource.axd?d=IZbvTa3h5iVHmS7kiuRgcI7xCTuQgyqXslhYLAWZwciOSqKUNcU4jLnPo9hVY8526fHOXtPfG0az1b6JAG6fYDn_I4jlD7B1UTWwD9KPGPZ3LPeb0&t=634420015588593343'></script>
<script type='text/javascript'>
var B029350 = null;$(function(){B029350=new MvcMaps.BingMap('divB029350',{"id":'B029350'});});</script>
<!DOCTYPE html>
<html>
<head>
    <title>View</title>
    <link href="/Content/Site.css" rel="stylesheet" type="text/css" />
    <script src="/Scripts/jquery-1.4.4.min.js" type="text/javascript"></script>
</head>

<body>
    <div class="page">

        <div id="header">
            <div id="title">
                <h1>My MVC Application</h1>
            </div>

            <div id="logindisplay">
                    [ <a href="/Account/LogOn">Log On</a> ]

            </div>

            <div id="menucontainer">

                <ul id="menu">
                    <li><a href="/">Home</a></li>
                </ul>

            </div>
        </div>

        <div id="main">       

<h2>View</h2>

            <div id="footer">
            </div>
        </div>
    </div>
</body>
</html>
Aug 6, 2011 at 2:52 PM

I still can't seem to get DynamicMap working. Anyone got any ideas? I'm using MVC 3 Razor and jQuery 1.5.1

My Razor code is as follows

@{Ajax
    .BingMap()
    .CssClass("BingMap")
    .Center(-27.2271500523225, 153.011671421674)
    .Zoom(16)
    .MapType(MapType.Aerial)
    //.AddPushpin(new Pushpin(-27.2271500523225, 153.011671421674))
    .DynamicMap(new { controller = "Round", action = "ShotsPushpins" })
    .Render();}

And my controller code:

[AcceptVerbs(HttpVerbs.Post)]
public ActionResult ShotsPushpins(double minLat, double maxLat, double minLng, double maxLng)
{
      var shots = from s in db.Shots select s;
      List<MvcMaps.Pushpin> ps = new List<Pushpin>();

      foreach (Shot s in shots)
      {
          Pushpin p = new Pushpin(s.StartLat, s.StartLong);
          ps.Add(p);
      }
      return new MapDataResult()
      {
          Pushpins = ps
      };
}

Aug 8, 2011 at 11:05 AM

drazic19 - I had the same issue but then I moved the @using MvcMaps; statement to the top so that it is the first statement of the page.

chur - chur chur brother.  The directions that CtrlAltDel gave address this problem perfectly.  Go to the JsonObjectBuilder In the Utils directory of the MvcMaps project and replace what you find on line 61 with:

sb.Append(string.Format("\"{0}\":{1}", val.Key, strVal));

Sep 1, 2011 at 10:12 PM

fabze - I am facing the same issue as drazic19 and moving the @using MvcMaps statement to the top of the View page doesn't solve the problem for me. Any idea why it may have worked for you?

drazic19 - did this work for you?

Sep 6, 2011 at 4:29 AM

abhikchowdhury

I've since abandoned MvcMaps and am currently working with the Bing Maps api directly.

It's quite easy to use but there are major differences between versions 6 and 7 so you have to be mindful of that when you are reading through code samples and examples.

With v7, even though it is lightweight, I found it more verbose to add popup boxes to pins and get things to align up the way I wanted them to so I currently am using v6.

Google maps api is also easy to use and the roof top accuracy of the returned location from an address query is amazing.

Sorry I couldn't help you out.