ASP.NET MVC4 and jQuery Mobile with Google Maps page structure

Question

I'm developing a website that should display and respond nicely on both desktop and mobile browsers. Hence, I'm using the nice features of MVC 4 to switch between views using the .mobile.cshtml extensions. Since I'm familiar with jQuery I would like to use jQuery Mobile for the mobile views.

So, I've created a _Layout.Mobile.cshtml view with standard html, header and body elements. The body element contains the following:

<body>
    <div data-role="page" id="@ViewBag.PageId">
        <div data-role="header" data-position="fixed">
            <h1>@ViewBag.Title</h1>
            @Html.ActionLink("Indstillinger", "Manage", "Account", null, new { @class= "ui-btn-right", data_icon = "gear"})
            <div data-role="navbar">
                @RenderSection("PageNavigation", required: false)
            </div>
        </div>  
        <div data-role="content" class="map-content">   
            @RenderBody()       
        </div>
    </div><!-- /page -->
</body>

The PageNavigation section is used to place a jQuery Mobile persistent navbar that contains two items pointing to two different views.

The first view looks like this:

@model MyModel
@{
    ViewBag.Title = "Some title";
    ViewBag.PageId = "pageuniquename";
  Layout = "~/Views/Shared/_Layout.Mobile.cshtml";
}
@section PageNavigation
{
<ul>    
    <li>@Html.ActionLink("List display", "Index", "Controller",new { @class= "ui-btn-active ui-state-persist"})</li>
    <li>@Html.ActionLink("Map display", "Map", "Controller")</li>
</ul>
}
@Html.Partial("~/Views/Shared/Mobile/_TestPartial.cshtml", Model)

The second view looks like this:

@model MyModel
@{
    ViewBag.Title = "Map display";
    ViewBag.PageId = "mappage";
    Layout = "~/Views/Shared/_Layout.Mobile.cshtml";
}
@section PageNavigation
{
<ul>    
    <li>@Html.ActionLink("List display", "Index", "Controller")</li>
    <li>@Html.ActionLink("Map display", "Map", "Controller",new { @class= "ui-btn-active ui-state-persist"})</li>
</ul>
}
<div id="mapCanvas"></div>

The Google map is initialized by this code in the layout page:

$(document).on("pageshow", "#mappage", initializeMap);

The map initializes fine and I'm able to add markers. I can switch between the pages through the navbar - although it sometimes seem to fail to resize the map for some reason.

But the map does not respond to any events at all - it is not even possible to zoom or pan.

As you can see I've tried to give the pages unique IDs by setting the PageId attribute in the ViewBag and render that ID in the layout page. And I can see the markup loading correctly for each page - or so it seems to.

I have not been able to find out, whether every view should be connected to the layout or only the first view should be. What is the right approach to develop a jQuery mobile site with MVC 4?

EDIT The events seem to fire fine when accessing the site on an iPad - but when I access the site through a desktop browser (Chrome) with iPad user agent - no events fire. I would still like your opinion on how to structure pages in MVC4 for jQuery Mobile

Sorry, it's for business purposes and I cannot publish it here. Please let me know if you need to see specific code blocks. No JavaScript errors occur (no errors in browser console window) — user1632306
– user1632306, Commented Mar 29, 2013 at 16:56
I would like to see the generated code if possible, and JS function used. — Omar
– Omar, Commented Mar 29, 2013 at 17:00
Sorry for my late answer. I have moved on to other parts of the project and since the problem only occurs when I modify a desktop browser user agent, I will not use a lot of time on solving it now. But I would appreciate, if someone could tell what the right approach in MVC 4 regarding using layout and partial views. — user1632306
– user1632306, Commented Apr 16, 2013 at 6:08

user1632306 · Accepted Answer · 2013-05-29 19:10:41Z

0

Well, this is quite embarrassing... It turned out that the Chrome developer tools has an "emulate touch events" option that was disabled by default. Turning it on made the Google map respond as expected.

answered May 29, 2013 at 19:10

user1632306

1672 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

ASP.NET MVC4 and jQuery Mobile with Google Maps page structure

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related