0

我正在开发一个网站，该网站应该在桌面和移动浏览器上都能很好地显示和响应。因此，我使用 MVC 4 的优秀特性在使用 .mobile.cshtml 扩展名的视图之间切换。由于我熟悉 jQuery，我想将 jQuery Mobile 用于移动视图。

因此，我创建了一个带有标准 html、标题和正文元素的 _Layout.Mobile.cshtml 视图。body 元素包含以下内容：

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

PageNavigation 部分用于放置一个 jQuery Mobile 持久导航栏，其中包含指向两个不同视图的两个项目。

第一个视图如下所示：

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

第二个视图如下所示：

@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>

谷歌地图是由布局页面中的这段代码初始化的：

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

地图初始化很好，我可以添加标记。我可以通过导航栏在页面之间切换 - 尽管有时由于某种原因似乎无法调整地图大小。

但地图根本不响应任何事件——甚至无法缩放或平移。

如您所见，我尝试通过在 ViewBag 中设置 PageId 属性并在布局页面中呈现该 ID 来为页面提供唯一 ID。而且我可以看到每个页面的标记都正确加载——至少看起来是这样。

我还没有弄清楚，是每个视图都应该连接到布局还是只应该是第一个视图。使用 MVC 4 开发 jQuery 移动网站的正确方法是什么？

编辑 在 iPad 上访问该站点时，这些事件似乎可以正常触发 - 但是当我通过带有 iPad 用户代理的桌面浏览器 (Chrome) 访问该站点时 - 没有触发任何事件。我仍然希望您对如何在 MVC4 中为 jQuery Mobile 构建页面提出意见

4

1 回答 1

0

嗯，这很尴尬......原来Chrome开发者工具有一个“模拟触摸事件”选项，默认情况下是禁用的。打开它会使谷歌地图按预期响应。

于 2013-05-29T19:10:41.033 回答