如何在 MVC4 视图中使用 Jquery 脚本

Question

我正在使用 ASP.NET MVC4...开箱即用的 _Layout.cshtml 有

@Scripts.Render("~/bundles/jquery")

在里面。我也有股票 BundleConfig.cs 有一个

bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
                    "~/Scripts/jquery-{version}.js"));

在里面。我的 Index.cshtml 中有一个这样的脚本块，它只是一个普通视图。

<script src="@Url.Content("~/Scripts/ProductsIndex.js")" type="text/javascript"></script>

但是该脚本中的 JQuery 没有运行...但是，如果我将以下行放在我的 Index.cshtml 中（紧邻 ProductsIndex.js 脚本参考），那么 JQuery 运行良好。

<script src="@Url.Content("~/Scripts/jquery-1.8.2.min.js")" type="text/javascript">         </script>

我知道这很简单，但是鉴于 _Layout.cshtml 已经引用了 JQuery 库，我是否应该能够使用 JQuery 而无需将它再次显式添加到我的 Index.cshtml 中？

Answer 1

为我解决问题的方法是将 @Scripts.Render("~/bundles/jquery") 语句从 _Layout.cshtml 的底部移动到顶部。默认情况下，Microsoft 将此渲染语句放在页脚下方。我将它与@Scripts.Render("~/bundles/modernizr") 一起移到该部分，然后我的 index.cshtml 中的脚本开始工作。

显然问题在于，当我在 index.cshtml 中的脚本尝试执行时，JQuery 尚未加载，因为它位于页面底部。

Answer 2

您可以简单地将实际文件名放在包配置中进行查询并删除标记化版本：

bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
                "~/Scripts/jquery-1.8.2.min.js"));

如果您不是在发布模式下构建应用程序（或在您的 web.config 中有 <compilation debug="true" />），那么现有的包配置可能找不到您的缩小 (.min.js) 版本的 jQuery。

了解捆绑功能以及它如何根据构建配置here 在未缩小版和缩小版脚本之间自动切换。