2012-08-12 23 views
17

Ho appena creato un progetto WebAPI ASP .NET MVC 4.JQuery After Body ASP .NET MVC 4

Osservando il _Layout.cshtml predefinito, vedo che lo script jquery viene inserito dopo il rendering del corpo (non nella testa).

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

Questo fa sì che l'errore

$ is not defined 

naturalmente, cercando di scrivere

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

Spostando il

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

nella sezione head delle corregge _Layout.cshtml il problema e jquery wo rk come previsto.

Che succede? Sto facendo qualcosa di sbagliato e c'è un motivo per il percorso predefinito di Script.Render all'interno di _Layout.cshtml?

risposta

10

Gli script di caricamento ed esecuzione bloccano il rendering della pagina.

È possibile visualizzare questo aggiungendo avvisi in più parti della pagina. Ecco perché è consigliabile inserire i file js nella parte posteriore della pagina.

È inoltre possibile risolvere il problema avendo una sezione per gli script di pagina dietro quella in cui viene aggiunto jquery, alla fine della pagina.

Edit: Ecco un articolo di Scott Guthrie sulle sezioni in rasoio: http://weblogs.asp.net/scottgu/archive/2010/12/30/asp-net-mvc-3-layouts-and-sections-with-razor.aspx

+0

Come specificare nel file cshtml? – Jeff

+0

Ho modificato la risposta con un collegamento a un articolo che spiega le sezioni in Rasoio. – linkerro

+0

grazie per avermi aiutato. Ho dovuto inserire tutti gli altri script nelle viste parziali dietro l'esecuzione dello script principale di jQuery. – MUG4N

3

@Scripts.Render("~/bundles/jquery") sta causando un problema con MVC 4 e VS 2010. Questo problema diventa più evidente quando si tenta di creare dialogo jQuery.

L'unica via d'uscita è, come dichiarato da JeffN825, per commentare lo @Scripts.Render("~/bundles/jquery").

Ora lo sconosciuto noto è: qual è la ramificazione del commento @Scripts.Render("~/bundles/jquery")?

Sto usando le seguenti librerie 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> 

Nota: jquery-1.7.2.min.js non funzionerebbero.

0

Anche se i collegamenti risposta accettata per i dettagli su come questo modo, una risposta più diretta sarebbe la seguente:

_Layout.cshtml contiene la riga ...

@RenderSection("scripts", required: false) 

... che inserirà una sezione chiamata "script" nella vista - es 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> 
} 
Problemi correlati