0

デスクトップとモバイルの両方のブラウザーで適切に表示および応答する Web サイトを開発しています。したがって、MVC 4 の優れた機能を使用して、.mobile.cshtml 拡張機能を使用してビューを切り替えています。私は jQuery に精通しているので、モバイル ビューには jQuery Mobile を使用したいと考えています。

そこで、標準の html、header、および body 要素を含む _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 セクションは、2 つの異なるビューを指す 2 つの項目を含む 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)

2 番目のビューは次のようになります。

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

Google マップは、レイアウト ページで次のコードによって初期化されます。

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

マップは正常に初期化され、マーカーを追加できます。ナビゲーション バーを使用してページを切り替えることができますが、何らかの理由でマップのサイズ変更に失敗することがあります。

しかし、マップはどのイベントにもまったく応答しません。ズームやパンもできません。

ご覧のとおり、ViewBag で PageId 属性を設定してページに一意の ID を付与し、その ID をレイアウト ページにレンダリングしようとしました。そして、各ページのマークアップが正しく読み込まれていることがわかります。

すべてのビューをレイアウトに接続する必要があるのか​​、最初のビューのみを接続する必要があるのか​​ を判断できませんでした。MVC 4 で jQuery モバイル サイトを開発するための正しいアプローチは何ですか?

編集 iPadでサイトにアクセスするとイベントが正常に発生するようですが、iPadユーザーエージェントを使用してデスクトップブラウザー(Chrome)からサイトにアクセスすると、イベントは発生しません。jQuery Mobile 用に MVC4 でページを構成する方法についてご意見をお待ちしております

4

1 に答える 1

0

これは非常に恥ずかしいことです... Chrome 開発者ツールには、デフォルトで無効になっている「タッチ イベントをエミュレートする」オプションがあることが判明しました。オンにすると、Google マップが期待どおりに応答しました。

于 2013-05-29T19:10:41.033 に答える