ASP .NET MVC4的Web應用程序與移動視圖不加載移動的CSS

我正在開發一個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文件，這個文件看起來是這樣的：ASP .NET MVC4的Web應用程序與移動視圖不加載移動的CSS

_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模擬器上打開網頁，頁面看起來完全不像一個教程。純文本爲空白。我查看了頁面源代碼，可以看到只有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項目，但由於某些原因，他們沒有加載。我究竟做錯了什麼？

來源

2013-07-26 Karoline Brynildsen

我已經弄清楚了，但解決方案是一個棘手的問題，所以我回答我自己的問題，以防其他人遇到同樣的問題。

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要找的原始版本：我從改變App_Start/BundleMobileConfig.cs 。我認爲這是安裝jquery.mobile.MVC包時的一個錯誤。

來源

2013-07-26 10:59:21

ASP .NET MVC4的Web應用程序與移動視圖不加載移動的CSS

回答

相關問題