Почему Asp.Net MVC 5 помещает @Scripts.Render( "~/bundles/jquery" ) внизу в _Layout.cshtml?

Я помещаю блоки <script>, которые используют jQuery в теле одного (и только одного) файла cshtml, который использует шаблон, и вызывает ошибку, поскольку jQuery еще не загружен.

Какой смысл помещать @Scripts.Render("~/bundles/jquery") в конец файла _Layout.cshtml?

Нижняя часть _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>

Ответ 1

Вы можете использовать разделы:

в вашем макете:

...
<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>
}

Ответ 2

Просто разместите его внутри section scripts на .cshtml странице, как показано.

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

Ответ 3

Лучше всего загружать файлы javascript после каждого возможного HTML-элемента.

Зная это, я поместил бы ваш обработчик документа после загрузки всех библиотек.

 <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>

Ответ 4

Если script находится в верхней части страницы, и возникают проблемы, это может привести к тому, что страница будет остановлена /займет длительную загрузку. Поместите их внизу, чтобы страница полностью отображалась до того, как ваш скрипт начнет работать.