如何在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

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

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

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

阅读关于捆绑功能以及它如何基于构建配置脚本unminified和精缩版本之间的自动切换这里 。