2012-08-12 22 views
17

Acabo de crear un proyecto ASP .NET MVC 4 WebAPI.JQuery After Body ASP .NET MVC 4

Al mirar el _Layout.cshtml predeterminado, veo que el script jquery se está insertando después de que se haya procesado el cuerpo (no en el encabezado).

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

Esto hace que el error

$ is not defined 

por supuesto, tratar de escribir

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

Moviendo el

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

en la sección head de las corrige _Layout.cshtml el problema y jquery wo como se esperaba

¿Qué pasa? ¿Estoy haciendo algo mal y hay una razón para la ubicación predeterminada del Script. Render dentro de _Layout.cshtml?

Respuesta

10

La carga de script y la ejecución bloquean el procesamiento de la página.

Puede ver esto agregando alertas en varias partes de su página. Es por eso que se recomienda poner los archivos js en la parte posterior de la página.

También puede solucionar su problema teniendo una sección para los scripts de página detrás de la que se agrega jquery, al final de la página.

Editar: He aquí un artículo de Scott Guthrie acerca de las secciones de la maquinilla de afeitar: http://weblogs.asp.net/scottgu/archive/2010/12/30/asp-net-mvc-3-layouts-and-sections-with-razor.aspx

+0

¿Cómo especifico esto en mi archivo cshtml? – Jeff

+0

Edité la respuesta con un enlace a un artículo explicando secciones en Razor. – linkerro

+0

thx por ayudarme. Tuve que empujar todos los demás scripts en vistas parciales detrás de la ejecución del script principal de jquery. – MUG4N

3

@Scripts.Render("~/bundles/jquery") está causando un problema con MVC 4 y VS 2010. Este problema se hace más evidente cuando se intenta crear diálogo jQuery.

La única salida es, como dijo JeffN825, comentar el @Scripts.Render("~/bundles/jquery").

Ahora lo desconocido que se conoce es: ¿cuál es la ramificación de comentar @Scripts.Render("~/bundles/jquery")?

estoy usando las siguientes bibliotecas de 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 no funcionarían.

0

Aunque los enlaces respuesta aceptada a detalles sobre cómo lo que este, una respuesta más directa sería de la siguiente manera:

_Layout.cshtml contiene la línea ...

@RenderSection("scripts", required: false) 

... lo cual insertará una sección llamada "scripts" que se encuentra en la vista - por ejemplo 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> 
} 
Cuestiones relacionadas