0

ASP.NET MVC4 Web アプリケーションを開発しています。モバイル ブラウザーに特化したビューを作成したいと考えています。このチュートリアルhttp://www.asp.net/mvc/tutorials/mvc-4/aspnet-mvc-4-mobile-featuresに従いました。パッケージ jQuery.Mobile.MVC をインストールし、要求された行を Global.asax ファイルに追加しました。インストールにより、_Layout.Mobile.cshtml というファイルが作成されました。このファイルは次のようになります。

_Layout.Mobile.cshtml

    <!DOCTYPE html> 
<html> 
    <head> 
        <meta charset="utf-8" />
        <title>@ViewBag.Title</title> 
        <meta name="viewport" content="width=device-width" />
        @Styles.Render("~/Content/Mobile/css", "~/Content/jquerymobile/css")
        @Scripts.Render("~/bundles/jquery", "~/bundles/jquerymobile")
        <script>
            $(document).ready(function () {
                $.mobile.ajaxEnabled = false; 
            });
        </script>
    </head> 
<body> 

    <div data-role="page" data-theme="a">
        @Html.Partial("_ViewSwitcher")

        <div data-role="header">
            <h1>@ViewBag.Title</h1>
        </div>

        <div data-role="content">
            @RenderSection("featured", false)
            @RenderBody()       
        </div>

    </div>

</body>
</html>

インデックス ビューのモバイル ビューも追加しました。

Index.Mobile.cshtml

@{
    ViewBag.Title = "Home";
}


<ul data-role="listview" data-inset="true">
    <li data-role="list-divider">Navigation</li>
                            <li>@Html.ActionLink("Home", "Index", "Home")</li>
                            <li>@Html.ActionLink("About", "About", "Home")</li>
                            <li>@Html.ActionLink("Contact", "Contact", "Home")</li>
                        </ul>

しかし、iPhone シミュレーターで Web ページを開くと、ページはチュートリアルのものとはまったく異なります。プレーンテキストで空白です。ページのソースを表示したところ、site.Mobile.css ファイルのみが読み込まれていることがわかります。

<head> 
        <meta charset="utf-8" />
        <title>Home</title> 
        <meta name="viewport" content="width=device-width" />
        <link href="/Content/Site.Mobile.css" rel="stylesheet"/>

        <script src="/Scripts/jquery-2.0.3.js"></script>
<script src="/Scripts/jquery.mobile-1.3.1.js"></script>

        <script>
            $(document).ready(function () {
                $.mobile.ajaxEnabled = false; 
            });
        </script>
    </head>

VS2012 で新しい Web アプリケーション プロジェクトを作成しましたが、今回はモバイル アプリケーション テンプレートを選択しました。このプロジェクトを実行してページ ソースを表示すると、さらに多くの css ファイルが表示されます。

<head>
        <meta charset="utf-8" />
        <title>Log in</title>
        <meta name="viewport" content="width=device-width" />
        <link href="/favicon.ico" rel="shortcut icon" type="image/x-icon" />
        <link href="/Content/jquery.mobile-1.2.0.css" rel="stylesheet"/>
<link href="/Content/jquery.mobile.structure-1.2.0.css" rel="stylesheet"/>
<link href="/Content/jquery.mobile.theme-1.2.0.css" rel="stylesheet"/>
<link href="/Content/site.css" rel="stylesheet"/>

        <script src="/Scripts/modernizr-2.6.2.js"></script>

    </head>

これらのファイルがすべて webApp プロジェクトに存在することを確認しましたが、何らかの理由で読み込まれません。私は何を間違っていますか？

4

1 に答える 1

0

私はこれを理解することができましたが、解決策は難しいものだったので、他の人が同じ問題を経験した場合に備えて、自分の質問に答えています. App_Start/BundleMobileConfig.cs を次のように変更しました。

bundles.Add(new StyleBundle("~/Content/jquerymobile/css").Include(
            "~/Content/jquery.mobile-{version}.css"
            ));

に

bundles.Add(new StyleBundle("~/Content/jquerymobile/css").Include(
            "~/Content/jquery.mobile-1.3.1.min.css",
            "~/Content/jquery.mobile.structure-1.3.1.min.css",
            "~/Content/jquery.mobile.theme-1.3.1.min.css"
            ));

stylebundle が元のバージョンを探している間に、jquery モバイル CSS の縮小バージョンしか取得できなかったようです。これは jquery.mobile.MVC パッケージをインストールする際のバグだと思います。

于 2013-07-26T10:59:21.547 に答える