Question

我是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 ... )

当我运行该页面时，我收到错误：'$'未定义。

就像没有加载jquery或其他东西......

2。我缺少什么让这项工作？

Answer 1

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

查看呈现的HTML源代码，看看它的确切含义。

您应该在head内部而不是正文中呈现您的脚本部分（特别是指向javascript文件而非内联脚本的部分）。

Answer 2

@ Script.Render（“〜/ bundles / jquery”）到底是什么行？

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

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

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

我错过了什么？

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

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

Answer 3

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

尝试在头标记之间尽可能高地重新定位@ Scripts.Render（“〜/ bundles / jquery”）。你的_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>

在ASP.NET MVC4项目中包含jquery的正确方法

3 个答案: