fancy - ¿La forma correcta de usar JQuery cuando se usan MasterPages en ASP.NET?
jquery.fancybox.js download (4)
No tengo problemas cuando uso JQuery en una página aspx sin una página maestra, pero cuando intento usarlo en páginas que tienen una página maestra, no funciona, así que termino poniendo los archivos jquery y otros archivos de script en el página en lugar del maestro. Ahora, si tengo 10 páginas, estoy haciendo esto para las 10, que sé que es incorrecto. En la página maestra de muestra a continuación, ¿dónde pondría mis archivos de script?
<html>
<head runat="server">
<asp:ContentPlaceHolder ID="head" runat="server">
</asp:ContentPlaceHolder>
</head>
<body>
<asp:ContentPlaceHolder ID="ContentPanel" runat="server">
</asp:ContentPlaceHolder>
</body>
</html>
Recientemente utilicé el complemento fancybox y lo que hice fue en lugar de poner el script jquery y los scripts de fancybox en la página principal porque me sentí frustrado al hacerlo funcionar, simplemente lo puse en la página donde quería que se ejecutara el script, específicamente en la parte inferior, justo antes del ASP final: contenido. Por supuesto, ahora que tengo el problema de, si quisiera utilizar el complemento de fancybox en otras páginas, colocaría el script jquery y el script de fancybox en las 5 páginas en lugar de simplemente en la página maestra. Cuando se trata de páginas maestras, ¿a dónde va todo usando mi ejemplo anterior?
De acuerdo, use un marcador de contenido diferente para su script. Debe tener un aspecto como este
<script type="text/javascript" src="myscript.js" />
<asp:ContentPlaceHolder ID="ScriptContent" runat="server">
</asp:ContentPlaceHolder>
Coloque esta etiqueta en la parte inferior de su página maestra, cerca de la etiqueta. Esto le permitirá agregar scripts en la página maestra y también en sus páginas. Asegúrese de que sus scripts se carguen en el orden correcto al ver el origen de la página y asegurarse de que el HTML se represente de la manera correcta. Buena suerte.
Ah, una cosa más, asegúrate de que jQuery y luego FancyBox se carguen antes que cualquier otra cosa que tengas por ahí o de lo contrario no funcionará. Javascript se carga en el orden en que fue llamado, ¡jQuery debe cargar primero!
Yo uso este método
<script type="text/javascript" language="javascript" src=''<%=ResolveUrl("~/scripts/jquery.js") %>'' ></script>
Solo colócalo encima de tu etiqueta ...
<asp:ContentPlaceHolder ID="head" runat="server">
</asp:ContentPlaceHolder>
Usted declararía sus scripts jQuery principales dentro de la página maestra, como lo haría normalmente:
<head runat="server">
<link href="/Content/Interlude.css" rel="Stylesheet" type="text/css" />
<script type="text/javascript" src="/Scripts/jquery-1.3.2.min.js"></script>
<asp:ContentPlaceHolder ID="head" runat="server">
</asp:ContentPlaceHolder>
</head>
Y luego, cualquier archivo JS específico de la página podría cargarse dentro de los controles de Contenido que hacen referencia al HeadPlaceholder.
Sin embargo, una mejor opción sería examinar los controles ScriptManager y ScriptManagerProxy , que pueden proporcionarle mucho más control sobre la forma en que se le envían los archivos JS al cliente.
Así que colocaría un control ScriptManager en su página maestra y agregaría una referencia al código central de jQuery en eso:
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server">
<Scripts>
<asp:ScriptReference Path="/Scripts/jquery-1.3.2.min.js" />
</Scripts>
</asp:ScriptManager>
Luego, en su página que requiere algunos archivos JS personalizados o un complemento jQuery, puede tener:
<asp:Content ID="bodyContent" ContentPlaceholderID="body">
<asp:ScriptManagerProxy ID="ScriptManagerProxy1" runat="server">
<Scripts>
<asp:ScriptReference Path="/Scripts/jquery.fancybox-1.2.1.pack.js" />
</Scripts>
</asp:ScriptManagerProxy>
El ScriptManager le permite hacer cosas como controlar en qué parte de la página se procesan los scripts con LoadScriptsBeforeUI (o mejor aún, después configurándolo en False).
Esto es lo que funcionará dentro de una página maestra:
Para el archivo de script:
<script type="text/javascript" src="<%= ResolveUrl("~/script/scriptFile.min.js") %>"></script>
Para el archivo CSS:
<link rel="stylesheet" href="~/styles/CssFile.min.css" runat="server" />
Notas adicionales:
- Utilice las versiones minificadas lo más posible (FileName.min.js) y (FileName.min.css) para reducir el tiempo de carga y mejorar el SEO.
- Coloque el CSS antes del
</head>y el script antes del</body>para mejorar el rendimiento y mejorar el SEO. - El carácter de mosaico (~) en la ruta se resolverá automáticamente en la raíz de su sitio web.
- No olvides usar
runat="server"para la hoja de estilos. La secuencia de comandos no debe tenerrunat="server"porque ya utiliza los operadores del servidor<%= %>. - Puede usar el http://jscompress.com/ en línea para comprimir su javascript y https://csscompressor.net/ para comprimir sus archivos CSS.