JQuery After Body ASP.NET MVC 4

Я только что создал проект ASP.NET MVC 4 WebAPI.

При взгляде на файл _Layout.cshtml по умолчанию я вижу, что jquery script вставляется после визуализации тела (не в голове).

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>@ViewBag.Title</title>
    @Styles.Render("~/Content/themes/base/css", "~/Content/css")
    @Scripts.Render("~/bundles/modernizr")
</head>
<body>
    @RenderBody()

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

Это вызывает ошибку

$ is not defined

конечно, пытаясь написать

$(document).ready(function() {...}).

Перемещение

@Scripts.Render("~/bundles/jquery")

в головной раздел _Layout.cshtml исправляет проблему, а jquery работает как ожидалось.

Что? Я что-то делаю неправильно, и есть причина для размещения по умолчанию Script.Render внутри _Layout.cshtml?

Ответы

Ответ 1

Script загрузка и выполнение блока рендеринга страницы.

Это можно увидеть, добавив оповещения в несколько частей вашей страницы. Поэтому рекомендуется поместить файлы js в конец страницы.

Вы также можете исправить свою проблему, указав раздел для сценариев страниц за тем, где добавлен jquery, в конце страницы.

Изменить: Здесь статья Скотта Гатри о разделах в бритве: http://weblogs.asp.net/scottgu/archive/2010/12/30/asp-net-mvc-3-layouts-and-sections-with-razor.aspx

Ответ 2

@Scripts.Render("~/bundles/jquery") вызывает проблему с MVC 4 и VS 2010. Эта проблема становится более очевидной при попытке создать диалог jQuery.

Единственный выход, как заявил JeffN825, - прокомментировать @Scripts.Render("~/bundles/jquery").

Теперь неизвестное известно: что такое разветвление комментариев @Scripts.Render("~/bundles/jquery")?

Я использую следующие библиотеки jquery:

<script src="../../Scripts/jquery-1.7.2.min.js" type="text/javascript"></script>
<script src="../../Scripts/jquery-ui-1.8.23.min.js" type="text/javascript"></script>

Примечание: jquery-1.7.2.min.js не будет функционировать.

Ответ 3

Хотя принятый ответ ссылается на подробности о том, как это сделать, более прямой ответ будет следующим:

_Layout.cshtml содержит строку...

@RenderSection("scripts", required: false)

... который будет вставлять раздел с именем "скрипты", найденный в представлении - например. Index.cshtml:

<p>This is Index.cshtml</p>
@section scripts {
   <script>
      $(document).ready(function() {
         alert("This script is inserted by RenderSection after jQuery script is inserted.")
      })
   </script>
}