2014-05-20 3 views
9

Quando si genera un'app MVC5, _Layout.cshtml ha lo @Scripts.Render alla fine del file dopo lo @RenderBody(). Se aggiungo un file .js nel mio index.cshtml che utilizza jquery, ottengo il temuto errore "$ non definito".MVC5 Perché @ Scripts.Render sotto @RenderBody in standard _Layout.cshtml

L'unico modo che so per risolvere questo problema è spostare lo @Scripts.Render nella sezione <head>.

Qual è l'approccio corretto?

Grazie in anticipo!

risposta

12

@Scripts.Render deve essere al in basso della pagina. In caso contrario, si avranno dei rischi di accedere agli elementi della pagina che non sono stati caricati al momento dell'esecuzione degli script.

EDIT:

Se si desidera includere i file script personalizzati, ci sono due modi per farlo:

. Nei BundleConfig.cs, aggiungere un nuovo bundle per gli script

*bundles.Add(new ScriptBundle("~/bundles/UserScripts").Include("~/Scripts/MyScripts.js"));* 

Avanti, nella _Layout.cshtml, rendono il fascio script dopo jQuery bundle:

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

    @* Render the custom bundles *@ 
    @Scripts.Render("~/bundles/UserScripts") 

2. Oppure aggiungi una nuova sezione di script al tuo Index.cshtml file:

@section scripts { 

    <script src="~/Scripts/MyScripts.js"></script>** 

} 
+0

Giusto, ero abbastanza sicuro che fosse così. Ma il javascript che ho messo nella parte inferiore del mio index.cshtml: Poiché questo deve venire prima del file jquery js, come avviene se il file js che sto aggiungendo è prima di jquery include? –

+0

@MikeWitt Si prega di consultare la mia versione modificata –

+0

Grazie a @ToanNguyen, la risposta funziona perfettamente. –