¿Manera correcta de utilizar JQuery cuando se usan páginas maestras en ASP.NET?

No tengo problemas al usar 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 la 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?¿Manera correcta de utilizar JQuery cuando se usan páginas maestras en ASP.NET?

<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 he usado el plugin FancyBox y lo que hice fue en lugar de poner el guión y FancyBox guiones jquery en el masterpage porque me frustraba en conseguir que funcione, acabo de poner en la página donde quería la secuencia de comandos para ejecutar, específicamente en la parte inferior, justo antes del cierre asp: 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?

Fuente

2009-04-08 Xaisoft

Se podría declarar sus principales secuencias de comandos de jQuery dentro de la página principal, 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 a continuación, los archivos JS específicos página podría estar cargado dentro de los controles de contenido que hacen referencia a la ContentPlaceHolder cabeza.

Sin embargo, una mejor opción sería observar los controles ScriptManager y ScriptManagerProxy, que pueden proporcionarle un mayor control sobre la forma en que se le entregan los archivos JS al cliente.

Así que le coloque un control ScriptManager en dominar la página, y añadir una referencia al código del núcleo de jQuery en la que:

<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 una jQuery plugin, 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 control donde en los guiones de la página se representa con LoadScriptsBeforeUI (o mejor aún, después de estableciéndolo en falso).

Fuente

2009-04-08 19:44:22

Muy bien use un lugar diferente para su secuencia de comandos. Se debe tener este aspecto

<script type="text/javascript" src="myscript.js" /> 
<asp:ContentPlaceHolder ID="ScriptContent" runat="server"> 

</asp:ContentPlaceHolder>

Coloque esta etiqueta en la parte inferior de su masterpage, cerca de la etiqueta </body>. 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.

Una cosa más, asegúrese de que jQuery y luego FancyBox se carguen antes que cualquier otro js que pueda tener por ahí o de lo contrario no funcionará. Javascript se carga en el orden en que fue llamado, ¡jQuery debe cargar primero!

Fuente

2009-04-08 19:19:10

¿Javascript carga antes del marcado html? – Xaisoft

Uso este método.

<script type="text/javascript" language="javascript" src='<%=ResolveUrl("~/scripts/jquery.js") %>' ></script>

Simplemente colóquelo encima de su etiqueta ...

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

Fuente

2010-02-11 01:40:25 Kieran

+1 pero recibí una advertencia cuando incluyo el atributo de idioma que dice el atributo inválido –

Prefiero este ya que no requiere ScriptManager o componente adicional. –

Esto es lo que va a trabajar dentro de una página principal:

Para archivo de secuencias de comandos:

<script type="text/javascript" src="<%= ResolveUrl("~/script/scriptFile.min.js") %>"></script>

Para archivo CSS:

<link rel="stylesheet" href="~/styles/CssFile.min.css" runat="server" />

adicional No ES:

utilizar las versiones minified como podrían posible (FileName.min.js) y (FileName.min.css) para reducir el tiempo de carga y mejorar SEO.
Coloque el CSS antes del </head> y el script antes del </body> al mejore el rendimiento y mejore 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" solo para la hoja de estilos. La secuencia de comandos no debe tener runat="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.

Fuente

2015-05-12 01:12:52

¿Manera correcta de utilizar JQuery cuando se usan páginas maestras en ASP.NET?

Respuesta

Cuestiones relacionadas