2008-11-23 8 views
6

Comenzar con jquery y tener problemas para obtener hello world tipo example para asp.net mvc. Obtengo un error de ejecución "objeto esperado" cuando intento cargar una página con este script.¿Dónde debe colocarse un script block con código jquery en una página maestra ASP.NET MVC?

A. ¿Dónde deberían colocarse las etiquetas de scripts en una página maestra? B. ¿Qué podría estar haciendo mal? Definitivamente hay "un" elemento en mi página?

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

      <script src="../Scripts/jquery.corner.js" type="text/javascript"></script> 

      <script type="text/javascript"> 
       $(document).ready(function() { 
        $("a").click(function(event) { 
         alert("Thanks for visiting!"); 
        }); 
       }); 
      </script> 

Respuesta

1

B) he comprobado la secuencia de comandos en línea en la página de prueba rápida y funciona consejos bien, así que el uso de Firefox con FireBug plugin instalado para encontrar el problema:

  • En la pestaña de "guión" de Firebug utilice la ventana Inspección a la derecha para insertar y verificar partes de su secuencia de comandos y ver qué devuelven.
  • me gustaría empezar con poner $ en ventana de inspección y comprobación de si es reconocido como function(): quizá jQuery no está vinculada propertly
  • a continuación, poner $("a") en ventana de inspección y comprobar si el conjunto que vuelve tiene el número correcto de elementos correspondientes a "a" de selección en un conjunto
  • guardar partes de script en ejecución hasta que encuentres algo mal
11

Hmmm ...

para responder a su primera pregunta: ¿Deben ser puestos en el elemento <head>.

Además, generalmente utilizo el 'bind' method al hundir eventos en el DOM (como parece que está intentando hacer).

Por lo tanto, el código se vería así:

$(document).ready(function() 
{ 
    // Bind each link to a handler: 
    $("a").bind('click dblclick', function(event) 
    { 
     alert('click'); 
    }) 
}); 

Además, algunos consejos de diseño (ya que se trabaja con algo cercano a mi corazón (ASP.NET MVC con jQuery):

Agregar un 'ContentPlaceHolder' adicional en la parte inferior del elemento <head> de su página maestra. Esto le permitirá ejecutar javascript específico de la página en su ubicación correcta: en la sección 'cabeza' de la página, y le permitirá hacer páginas- Javascript específico incluye.

I t'll ser algo como esto:

<asp:ContentPlaceHolder ID="HeadContent" runat="server" /> 
</head> 

Por qué esto es útil? Te diré: el plugin jQuery de esquinas redondeadas que estás utilizando solo se puede usar en algunas páginas, ¿por qué incluirlo en todas las páginas?

2

Estoy de acuerdo con Dan en agregar el marcador de posición de contenido para vincular los scripts. Sin embargo, el jefe generalmente no es el mejor lugar para poner su JavaScript en términos de rendimiento. El mejor lugar está en la parte inferior de la página. Por lo tanto, su HTML puede cargarse antes que su JavaScript. Ver Yahoo's YSlow tip. Sin embargo, su código aún debería funcionar en la sección principal.

Me gusta poner la mayor parte del JavaScript de mi sitio en un archivo y vincularlo a todas las páginas. Si se pone muy grande, puede separarlo en varios archivos. Esto aprovecha el almacenamiento en caché del navegador.

En cuanto a qué pasa con el código jQuery. No estoy seguro. Se ve bastante correcto. Lo único que me pregunto es el parámetro del evento. Trata de eliminarlo por completo. Sé que a la función se le permite un parámetro, pero generalmente uso "this". Además, intente cambiar el nombre del parámetro.

+0

Buena llamada en la punta YSlow . No me había dado cuenta de que los scripts bloquean la descarga paralela. –

1

La página maestra normalmente se almacena en /Views/Shared/Site.Master mientras scripts se encuentran en/Scripts por lo estos:

<script src="../Scripts/jquery-1.2.6.min.js" type="text/javascript"></script>    
<script src="../Scripts/jquery.corner.js" type="text/javascript"></script> 

debería ser

<script src="../../Scripts/jquery-1.2.6.min.js" type="text/javascript"></script> 
<script src="../../Scripts/jquery.corner.js" type="text/javascript"></script> 

pero se recomienda usar un ayudante:

public static class Helper 
    { 
     private static string ScriptsRoot = "~/scripts/"; 

     public static string ScriptUrl (string scriptFile) 
     { 
      return VirtualPathUtility.ToAbsolute (ScriptsRoot + scriptFile); 
     } 
    } 

Y entonces incluir su secuencia de comandos de la siguiente manera:

<script type="text/javascript" src="<%= Helper.ScriptUrl("jquery-1.2.6.min.js") %>"></script> 
<script type="text/javascript" src="<%= Helper.ScriptUrl("jquery.corner.js") %>"></script> 
Cuestiones relacionadas