web-dev-qa-db-ja.com

なぜAsp.Net MVC 5は_Layout.cshtmlの下部に@ Scripts.Render（ "〜/ bundles / jquery"）を配置するのですか？

JQueryを使用する_<script>_ブロックを、テンプレートを使用する1つ（および1つだけ）のcshtmlファイルの本文に配置すると、jQueryがまだロードされていないためエラーが発生します。

_Layout.cshtmlファイルの下部に@Scripts.Render("~/bundles/jquery")を配置するポイントは何ですか？

__Layout.cshtml_の下部。

_    @RenderBody()
    <hr />
    <footer>
    </footer>
</div>

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

以下は、cshtmlファイルの生成されたソースを示しています。

_<script>
    $(document).ready(function () { /// $ not defined.
        // .....
    });
</script>

    <hr />
    <footer>
    </footer>
</div>

<script src="/Scripts/jquery-1.10.2.js"></script>
<script src="/Scripts/bootstrap.js"></script>
_
jqueryasp.netasp.net-mvcasp.net-mvc-5
20
ca9163d9

セクションを使用できます：

あなたのレイアウトで：

...
<script src="/Scripts/jquery-1.10.2.js"></script>
<script src="/Scripts/bootstrap.js"></script>
@RenderSection("scripts", required: false)
...

あなたのcshtmlで：

@section scripts {
    <script>
        $(document).ready(function () { /// $ not defined.
            // .....
        });
    </script>
}
31
Pascalz

示されているように、.cshtmlページのsection scripts内にそれを囲むだけです。

@section scripts{
  <script>
  $(document).ready(function () { 
    // .....
  });
  </script>
}
9
Kartikeya Khosla

スクリプトがページの上部にあり、問題がある場合、ページの停止/ロードに時間がかかる可能性があります。それらを下部に配置すると、スクリプトが機能する前にページを完全にレンダリングできます。

1
TSK007

考えられるすべてのHTML要素の後にjavascriptファイルをロードすることをお勧めします。

これを知っているので、すべてのライブラリをロードした後、ドキュメント準備ハンドラーを配置します。

 <hr />
    <footer>
    </footer>
</div>

<script src="/Scripts/jquery-1.10.2.js"></script>
<script src="/Scripts/bootstrap.js"></script>
<script>
    $(document).ready(function () { /// $ not defined.
        // .....
    });
</script>
1
sergserg