2012-08-12 23 views
17

Właśnie stworzyłem projekt ASP .NET MVC 4 WebAPI.JQuery After Body ASP .NET MVC 4

Patrząc na domyślny _Layout.cshtml, widzę, że skrypt jQuery jest wstawiany po renderowaniu bryły (nie w głowie).

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

To powoduje błąd

$ is not defined 

oczywiście próbuje pisać

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

Przesuwanie

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

w sekcji head koryguje _Layout.cshtml problem i jquery wo rks zgodnie z oczekiwaniami.

Co słychać? Czy robię coś złego i istnieje powód domyślnej lokalizacji Script.Render w _Layout.cshtml?

Odpowiedz

10

Ładowanie skryptu i wykonywanie blokuje renderowanie strony.

Możesz to zobaczyć, dodając alerty w wielu częściach strony. Dlatego zaleca się umieszczenie plików js z tyłu strony.

Możesz również zaradzić swojemu problemowi, dodając na końcu strony sekcję skryptów strony ukrytą za tą, do której dodano jquery.

Edit: Oto artykuł z Scott Guthrie o sekcjach w maszynce: http://weblogs.asp.net/scottgu/archive/2010/12/30/asp-net-mvc-3-layouts-and-sections-with-razor.aspx

+0

Jak określić to w moim pliku cshtml? – Jeff

+0

Edytowałem odpowiedź z linkiem do artykułu wyjaśniającego sekcje w Razor. – linkerro

+0

thx za pomoc mi. Musiałem przesłać wszystkie inne skrypty w widokach częściowych za wykonaniem głównego skryptu jquery. – MUG4N

3

@Scripts.Render("~/bundles/jquery") powoduje problem z MVC 4 i VS 2010. Problem ten staje się coraz bardziej oczywiste, gdy próbujesz utworzyć okna dialogowego jQuery.

Jedynym wyjściem jest, jak stwierdził JeffN825, skomentowanie @Scripts.Render("~/bundles/jquery").

Teraz nieznany jest znany: czym jest rozgałęzienie komentowania @Scripts.Render("~/bundles/jquery")?

Używam następujące biblioteki 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> 

Uwaga: jQuery 1.7.2.min.js nie będzie funkcjonować.

0

Mimo przyjętych linki odpowiedź na szczegółowe informacje na temat więc, bardziej bezpośrednia odpowiedź będzie w następujący sposób:

_Layout.cshtml zawiera linię ...

@RenderSection("scripts", required: false) 

... co wstawi sekcję o nazwie "skrypty" znalezione w widoku - np 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> 
} 
Powiązane problemy