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>

我还为索引视图添加了一个移动视图。

索引.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 模拟器中打开网页时，页面看起来与教程中的页面完全不同。它是纯文本的空白。我查看了页面源，可以看到只加载了 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应用项目，但是这次我选择了Mobile Application模板。当我运行这个项目并查看页面源代码时，会显示更多的 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"
            ));

看起来我只得到了 jquery mobile css 的缩小版本，而 stylebundle 正在寻找原始版本。我认为这是安装 jquery.mobile.MVC 包时的错误。

于 2013-07-26T10:59:21.547 回答