'$' 未定义。如何在空的 ASP.NET MVC 4 项目中使用 jQuery 2.0.1？答案

【问题标题】：'$' is undefined. How to use jQuery 2.0.1 in empty ASP.NET MVC 4 project?'$' 未定义。如何在空的 ASP.NET MVC 4 项目中使用 jQuery 2.0.1？
【发布时间】：2013-05-27 14:11:27
【问题描述】：

我已经看过了：'$' is undefined，但是没有解决我的问题；这就是我打开另一个线程的原因。

这就是我所做的......

我使用 Visual Studio 2012 创建了一个新解决方案并添加了一个空的 ASP.NET MVC 4 项目。我添加了一个控制器类，定义了一个默认的 Index 操作方法，并让 Resharper 为其创建视图。项目结构如下：

root/
    Controllers/
        SampleController.cs
    Models/
    Views/
        Sample/
            Index.cshtml
        Shared/
            Layout.cshtml
    Scripts/
        jquery-2.0.1.js
        jquery-2-0.1.min.js
        jquery-2.0.1-min.map

jQuery 已通过 Nuget 添加；所以我手动向 App_Start 文件夹添加了一个 BundleConfig.cs 文件，并添加了代码来定义 jQuery 脚本包（RegisterBundles 将由 global.asax 调用）。

public static void RegisterBundles(BundleCollection bundles)
{
    bundles.Add(new ScriptBundle("~/bundles/jquery")
        .Include("~/Scripts/jquery-2.0.*"));

}

我还定义了一个布局页面，内容如下...

<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width" />
        <title>@this.ViewBag.Title</title>
    </head>
    <body>
        <div>
            @this.RenderBody()
        </div>
        @this.RenderSection("Scripts", required: false)
    </body>
</html>

我的索引视图有以下内容...

@using System.Web.Optimization
@model dynamic

@{
    this.Layout = "~/Views/Shared/Layout.cshtml";
}

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

    <script type="text/javascript">
        $(document).ready(function() {

        });
    </script>
}

以下标记被渲染到输出流...

<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width" />
    </head>
    <body>
        <div>

        </div>

    <script src="/root/Scripts/jquery-2.0.1.js"></script>
    <script src="/root/Scripts/jquery-2.0.1.min.map"></script>

    <script type="text/javascript">
        $(document).ready(function() {

        });
    </script>

    </body>
</html>

当我调试应用程序时，它会给我错误消息“$”未定义。我没有在本地 IIS 中托管应用程序，而是尝试通过 Visual Studio 的 Web 开发服务器运行它，这给了我另一个提示：语法错误（min.map 文件中的意外标记 ';'）。可能是 jQuery 未初始化的原因……但是我应该如何解决这个问题？

【问题讨论】：

这通常有助于查看实际呈现给浏览器的内容：1) @Scripts.Render() 是否输出了任何内容？ 2) 如果是这样，脚本src 是否指向服务于jQuery 的URL？
是的，@Scripts.Render 输出所有的 jQuery 脚本文件。
它是否可能会渲染多个 jQuery 副本（因为您的路径中有 *）？
不；只是我放入列表中的文件。我还尝试直接添加脚本标签（而不是使用 BundleConfig）。
你能发布一份呈现的 HTML 的精确副本吗？

标签： jquery asp.net asp.net-mvc asp.net-mvc-4 razor

【解决方案1】：

实际问题与我的本地 IIS 有关，其中静态内容功能不可用。这具有以 OK 200 回答的对 java 脚本和 css 文件的请求的效果，但内容长度为零。有关如何修复 IIS 安装的信息，请参阅：https://serverfault.com/questions/115099/iis-content-length-0-for-css-javascript-and-images。

以下代码现在按预期工作。唯一改变的是脚本包定义...

BundleConfig.cs

namespace MvcApplication1
{
    using System.Web.Optimization;

    public class BundleConfig
    {
        public const string BundlesJquery = "~/bundles/jquery";

        public static void RegisterBundles(BundleCollection bundles)
        {
            bundles.Add(new ScriptBundle(BundlesJquery)
                .Include("~/Scripts/jquery-{version}.js"));
        }
    }
}

索引.cshtml

@using System.Web.Optimization
@using MvcApplication1
@model dynamic

@{
    this.ViewBag.Title = "title";
    this.Layout = "~/Views/Shared/Layout.cshtml";
}

@section Scripts
{
    @Scripts.Render(BundleConfig.BundlesJquery)
    <script type="text/javascript">
        $(document).ready(function() {
            alert("Hello World.");
        })
    </script>    
}

Layout.cshtml

@using System.Web.Optimization
@using MvcApplication1
<!DOCTYPE html>

<html>
    <head>
        <meta name="viewport" content="width=device-width" />
        <title>@this.ViewBag.Title</title>
    </head>
    <body>
        <div>
            @this.RenderBody()
        </div>
        @this.RenderSection("Scripts", false)
    </body>
</html>

【讨论】：

【解决方案2】：

为什么不直接在 HTML 中添加脚本？

RootProject/
  Pages/
    MyPage.aspx
  JS/
    jquery-2-0.1.min.js

MyPage.aspx 的代码

<!DOCTYPE html>
<html>
    <head>
        <script type="text/javascript" src="../JS/jquery-2-0.1.min.js"></script>
    </head>
    <body>
        <div>
            @this.RenderBody()
        </div>
        @this.RenderSection("Scripts", required: false)
    </body>
</html>

最好将所有脚本添加到母版页。（请注意，您必须在文件夹中升级（这次升级1级）然后找到文件的路径）

【讨论】：

有效，但捆绑是有原因的……它将所有文件合二为一，支持不同的配置选项，并支持版本控制。
“为什么不直接在 HTML 中添加脚本？”，因为他们正在尝试使用捆绑系统。
视图和布局文件在同一层级。我不想将 jquery 内容添加到布局根目录，因为任何视图都不需要它。

【解决方案3】：

"Why Source Maps are useful?"

“好吧，假设您在生产站点上使用文件的压缩版本，包括 jQuery 的压缩版本。您收到一个重要客户遇到问题的报告。那么您如何调试它？您如果您有未压缩的源代码，调试起来会容易得多，但不能在高流量的生产站点上使用它。"

如果你只渲染版本“jquery 2.0”，你可以把它称为jquery：

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

更多信息请参见this。

【讨论】：

【解决方案4】：

使用 IE 11 和本地网络上的开发/QA 服务器，这也可能是兼容性视图设置的问题。

单击 IE 11 右上角的工具图标（或按 Alt-X），然后单击“兼容性视图设置”。

确保服务器名称不在要使用兼容性视图设置的服务器列表中，并且未选中“在兼容性视图中显示 Intranet 站点”。

【讨论】：