0

我很困惑，我刚开始为我的 ASP.NET MVC4 网站处理 CSS，但我并不完全理解发生了什么。

目前我的移动布局有效，但对其进行任何更改都会导致一种又一种奇怪的效果。（例如，未显示到 ajax-loader.gif 的表单不断被显示。）

我有以下内容.Layout.Mobile.cshtml

   @Styles.Render("~/Content/Mobile/css", "~/Content/jquerymobile/css")  
    <link rel="stylesheet" href="~/Content/Mobile/css/jquery.mobile-1.2.0.min.css" /> 
    <link rel="stylesheet" href="~/Content/Mobile/css/jquery.mobile-1.2.0.css" /> 
    <link rel="stylesheet" href="~/Content/Mobile/css/jquery.mobile.theme-1.2.0.css" /> 


    @Scripts.Render("~/bundles/jquery", "~/bundles/jquerymobile") 
    <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
    <script src="http://code.jquery.com/mobile/latest/jquery.mobile.min.js"></script>

我已将BundleMobileConfig.csApp_start 中的修改如下：

 //       bundles.Add(new StyleBundle("~/Content/Mobile/css")
 //           .Include("~/Content/Site.Mobile.css"));
 //kludge is the above wrong...and the following needed??
         bundles.Add(new StyleBundle("~/Content/Mobile/css")
            .Include("~/Content/Site.Mobile.css",
                     "~/Content/Mobile/css/"));

我不明白为什么这不是这个捆绑包的默认设置？

这是我的问题/问题：

  1. 如果您注意到样式表，我不需要包含三个显式链接，它们应该来自捆绑包。但是，如果删除其中任何一个，站点就会中断。

    • 为什么修改后的包不会~/Content/Mobile/css拉出这些 css 文件？

  2. 对于脚本文件，我查看了 code.jquery.com，但我不明白为什么需要这些。我的本地代码是最新的（即 jquery-1.9.1.js 和 jquery.mobile-1.2.0.js

    • 我希望版本 1.9.1 应该能够毫无问题地替换 1.7.1，但事实并非如此

    • jquery.mobile.min.js 应该只在发布和调试版本之间切换，这不应该导致问题，但确实如此。

我使用 firebug 查看正在加载哪些文件，我发现当我只使用没有显式包含的包的渲染时，我没有得到包含的文件，为什么不呢？我已经阅读了有关捆绑的信息，看来我应该只获取捆绑的文件。

任何人都可以阐明正在发生的事情并指出我的教程，这样我就可以学习如何使用如何调试 CSS 和捆绑包。我已经阅读了几本，我发现萤火虫非常有用，但我不知道下一步该往哪里看。

4

2 回答 2

2

尝试用这个替换你的包代码。

bundles.Add(new StyleBundle("~/Content/Mobile/css")
        .Include("~/Content/Site.Mobile.css",
                 "~/Content/Mobile/jquery.mobile*"));

这应该在没有明确这样做的情况下加载您的文件。

于 2013-03-26T08:32:42.693 回答
0

你的权利这确实有效！谢谢....

奇怪的是，以下内容不起作用：

bundles.Add(new StyleBundle("~/Content/Mobile/css")
    .Include("~/Content/Site.Mobile.css",
             "~/Content/Mobile/css/jquery.mobile-{version}.js",
             "~/Content/Mobile/css/jquery.mobile.theme-{version}.js",
             "~/Content/Mobile/css/jquery.mobile.structure-{version}.js",
             "~/Content/Mobile/css/"));

我明白你的例子为什么有效......但不明白为什么我的不......除非版本标签不像我期望的那样工作......

我还发现 jquery 1.9.1 与 1.7.1 有很大不同，为此我必须执行以下操作：

@Scripts.Render("~/bundles/jquery")  
@Scripts.Render("~/bundles/jquerymobile")  
<script src="~/Scripts/jquery-1.9.1.js"></script>
<script src="~/Scripts/jquery-migrate-1.1.1.js"></script> 
<script src="~/Scripts/jquery.mobile-1.2.0.js"></script>

这有效....使用您的示例，我将找出一个通配符模式来包含它。

于 2013-03-26T11:46:54.337 回答