これは私には意味がありません。うまくいけば、これを正しく説明できます。
Asp.Net MVC 4 を使用する基本的な jQuery Mobile アプリケーションがあります。アプリケーションにログインした後、左上のアカウント ボタンをクリックすると、ページが読み込まれますが、テーマがありません。次に更新をクリックすると、すべて問題なく表示されます。
結果の HTML を Chrome の F12 ウィンドウで比較しました。2ページ目はもちろん正しいです。最初のページにはすべて同じ HTML が含まれていますが、本文の先頭に追加のdiv が配置されています。この div は、アプリケーションのメイン アプリケーション ページを表示しています。「ページ」のデータ役割を持ち、ビューから隠されています。jQuery Mobile は、最初に見つかったデータロールの「ページ」にのみテーマを適用しているため、正しいページをスキップしているとしか思えません。
アカウントでクリックした場合と更新をクリックした場合で異なるページが表示されるのはなぜですか?
[編集] - 2 人がコードを要求しました。私は Asp と jQuery Mobile に非常に慣れていないため、これは誰かが指摘する単純な pebkac エラーである可能性が高いと考えていました。コードは以下のとおりです。
ここに Index.cshtml があります
@model TimeCard.Models.LoginModel
@{
ViewBag.Title = "Your Account";
}
@section Header {
@Html.ActionLink("Back", "Index", "Home", null, new { data_icon = "arrow-l", data_rel = "back", data_iconpos = "left" })
<h1>@ViewBag.Title</h1>
}
<ul data-role="listview" data-inset="true">
<li>@Html.ActionLink("Log off", "LogOff")</li>
</ul>
共有レイアウトは次のとおりです。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>@ViewBag.Title</title>
<meta name="viewport" content="width=device-width" />
<link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
@Styles.Render("~/Content/mobileCss", "~/Content/css")
@Scripts.Render("~/bundles/modernizr")
</head>
<body>
<div data-role="page" data-theme="b">
<div data-role="header">
@if (IsSectionDefined("Header")) {
@RenderSection("Header")
}
else {
<h1>@ViewBag.Title</h1>
@Html.Partial("_LoginPartial")
}
</div>
<div data-role="content">
@RenderBody()
</div>
</div>
@Scripts.Render("~/bundles/jquery", "~/bundles/jquerymobile")
@RenderSection("scripts", required: false)
</body>
</html>
最後に、正しい出力と正しくない出力、およびレンダリングされた HTML を示す画像を次に示します。両方のコード スニペットで [戻る] ボタンが強調表示されています。