4

ASP.NET MVC 4 は初めてで、プロジェクトのページの 1 つに 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

@Script.Render("~/bundles/jquery") 行は正確には何ですか?

に進みApp_Start -> BundleConfigます。そのファイル内には、次のようなものが表示されます

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

バンドルは ASP.NET 4.5 の新機能で、複数のファイルを 1 つのファイルに簡単に結合またはバンドルできます。CSS、JavaScript、その他のバンドルを作成できます。ファイルが少ないということは、HTTP リクエストが少なくなることを意味し、最初のページの読み込みパフォーマンスを向上させることができます

何が欠けていますか？

@Script.Render("~/bundles/jquery")jquery ファイルへの参照を既に再読み込みしているため、ページで jquery 宣言を行う必要はありません。それを削除する必要があります。

ライブラリ参照の後にjquery コードを必ず配置してください。

于 2013-07-08T21:49:28.140 に答える
4

You're putting the jQuery script tag at the very bottom of the body, but trying to use it at the top of your file. Everything runs top-to-bottom, so it's trying to use something that hasn't loaded yet.

Check out the rendered HTML source to see exactly what it looks like.

You should probably render your scripts section (specifically the ones that point to javascript files rather than inline script) inside the head, rather than the body.

于 2013-07-08T21:47:07.447 に答える
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 に答える