デスクトップとモバイルの両方のブラウザーで適切に表示および応答する 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 でページを構成する方法についてご意見をお待ちしております