9

我想运行一个非常简单的模态对话框。因此，按照教程，我最终得到了以下代码：

捆绑配置：

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

bundles.Add(new ScriptBundle("~/bundles/jqueryui").Include(
                    "~/Scripts/jquery-ui-1.8.24.js"));

_布局：

<head>
    <meta charset="utf-8" />
    <title>@ViewBag.Title - My ASP.NET MVC Application</title>
    <link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
    <meta name="viewport" content="width=device-width" />
    @Styles.Render("~/Content/css")
    @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/jqueryui")

</head>
<body>
   <div id="body">
        @RenderSection("featured", required: false)
        <section class="content-wrapper main-content clear-fix">
            @RenderBody()
        </section>
    </div>
    <footer>
        <div class="content-wrapper">
            <div class="float-left">
                <p>&copy; @DateTime.Now.Year - My ASP.NET MVC Application</p>
            </div>
        </div>
    </footer>


    @RenderSection("scripts", required: false)
</body>

和索引：

@section featured {
<section class="featured">
    <div class="content-wrapper">
        <hgroup class="title">
            <h1>@ViewBag.Title.</h1>
            <h2>@ViewBag.Message</h2>
        </hgroup>
        <script type="text/javascript">
            $( "#dialog-form" ).dialog({
                autoOpen: false,
                height: 300,
                width: 350,
                modal: true,
                buttons: {

                    Cancel: function() {
                        $( this ).dialog( "close" );
                    }
                },
                close: function() {
                    allFields.val( "" ).removeClass( "ui-state-error" );
                }
            });

            $( "#create-user" )
              .button()
              .click(function() {
                  $( "#dialog-form" ).dialog( "open" );
              });

        </script>

        <div style="float: left; width: 250px;">
            <button id="create-user">Create new user</button>
        </div>

    </div>
</section>
}

但是，当我运行它时，我最终得到 0x800a1391 - JavaScript 运行时错误：'jQuery' 未定义，在 jquery-ui 库中。如果我只是将代码放在 html 页面中，它会按预期工作。所以问题来自MVC项目。我在 Windows 8 上使用 Visual Studio 2012。有什么想法吗？

4

5 回答 5

10

我遇到此错误时遇到的问题是由于以下语句不在<head>文档中，而是在</body>文档末尾的标记之前。

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

一旦我将它们移动到<head>我的 .cshtml 文件中，一切正常。

于 2013-11-18T21:35:08.723 回答
10

默认情况下，MVC 捆绑器会忽略文件名中带有.min的文件。

使用未缩小版本的 jQuery 来解决问题（或只是重命名文件） - 部署时，捆绑器无论如何都会缩小 jQuery 文件。

更新

IgnoreList您可以通过清除方法中的来更改此行为RegisterBundles（但我建议坚持使用默认值并简单地重命名文件）：

// Clear all items from the ignore list to allow minified CSS and JavaScript 
// files in debug mode
bundles.IgnoreList.Clear();    

// Add back the default ignore list rules sans the ones which affect minified 
// files and debug mode
bundles.IgnoreList.Ignore("*.intellisense.js");
bundles.IgnoreList.Ignore("*-vsdoc.js");
bundles.IgnoreList.Ignore("*.debug.js", OptimizationMode.WhenEnabled);

在Telerik 文档中查看更多信息。

于 2013-07-16T09:26:57.667 回答
5

只需像这样在脚本周围使用@section 脚本

@section scripts
  {
   <script>
    $(function () {



        });

    });

  </script>
}
于 2014-05-19T20:47:35.573 回答
2

我为此苦苦挣扎了大约一个小时，几乎所有的解决方案都归结为您调用脚本的顺序和方法。我发现捆绑器引起了问题（对我来说是 ui 捆绑器）

这是对我有用的订单。

    <script src="/Scripts/modernizr-2.5.3.js"></script>
    <script src="/Scripts/jquery-1.7.1.js"></script>
    <script src="/bundles/jquery-ui"></script>
    <script src="/Scripts/jquery.unobtrusive-ajax.js"></script>
    <script src="/Scripts/jquery.validate.js"></script>
    <script src="/Scripts/jquery.validate.unobtrusive.js"></script>
于 2014-03-19T23:17:22.200 回答
1

除了 Edge、Chrome 和 Firefox，IE 在 javascript 中还有其他语法检查。当在我的 MVC 应用程序中打开 BundleOptimization 时，我的代码中出现了同样的错误。我使用 AngularJS 作为框架，一行搞砸了整个包，并产生了级联效果：

$http.post('/controller/action', { dto })

删除大括号 {} - 解决了我的“缺少 JQuery 问题”。但是我首先在 IE 中调试时发现（在调试模式下按 F8）：在此处输入图像描述 JQuery 错误消息具有误导性，但语法错误指的是正确的行，因此我可以修复错误。

于 2017-08-03T09:07:49.890 回答