4

我是 ASP.NET MVC 4 的新手,我想在我的项目的一个页面中添加一个 jquery 控件。

这是我的 _layout.cshtml 文件的结尾部分:

        @Scripts.Render("~/bundles/jquery")
        @RenderSection("scripts", required: false)
    </body>
</html>

1. @Script.Render("~/bundles/jquery") 行到底是什么?

在我希望添加控件的页面内:

@{
    ViewBag.Title = "Test page";
}

@section scripts
{
    @Scripts.Render("~/Scripts/jquery-1.8.2.js") // The control needs jquery.
    @Scripts.Render("~/Scripts/icarousel.min.js") // The control in question.
    @Styles.Render("~/Content/icarousel.css") // A css file needed by the control.
}

<script type="text/javascript">
    $(document).ready(function () {
        $('#icarousel').iCarousel();
    });
</script>

(some html code here, including the #icarousel div ... )

当我运行该页面时,我收到错误:'$' is undefined

这就像 jquery 没有加载或什么的......

2.我缺少什么来完成这项工作?

4

3 回答 3

4

您将 jQueryscript标记放在正文的最底部,但尝试在文件顶部使用它。一切都是从上到下运行的,所以它试图使用尚未加载的东西。

查看呈现的 HTML 源代码,看看它到底长什么样。

您可能应该将您的脚本部分(特别是指向 javascript 文件而不是内联脚本的部分)呈现在内部head,而不是正文中。

于 2013-07-08T21:47:07.447 回答
4

@Script.Render("~/bundles/jquery") 行到底是什么?

App_Start -> BundleConfig。在该文件中,您会看到类似这样的内容

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

捆绑是 ASP.NET 4.5 中的一项新功能,可以轻松地将多个文件组合或捆绑到一个文件中。您可以创建 CSS、JavaScript 和其他包。更少的文件意味着更少的 HTTP 请求,这可以提高首页加载性能

我错过了什么?

您不需要您的页面上的 jquery 声明,因为@Script.Render("~/bundles/jquery")它已经重新定义了对您的 jquery 文件的引用。你应该删除它。

确保在库引用之后放置任何 jquery 代码。

于 2013-07-08T21:49:28.140 回答
2

@Scripts.Render("~/bundles/jquery")是 asp.net mvc 4 的机制,可以捆绑和缩小您的脚本。

尝试将 @Scripts.Render("~/bundles/jquery") 重新定位在 head 标签之间尽可能高的位置。在你的 _Layout.cshtml 上有这样的东西:

<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/modernizr")
        @Scripts.Render("~/bundles/jquery")
    </head>
于 2013-07-08T21:46:06.020 回答