forma correcta de usar jQuery cuando se utiliza MasterPages en ASP.NET?

StackOverflow https://stackoverflow.com/questions/731407

Pregunta

No tengo problemas cuando se hace uso de jQuery en una página aspx sin masterpage, pero cuando trato de usarlo en las páginas que tienen un masterpage, no funciona, por lo que me acaban de poner los archivos de jQuery y otro script archivos de la página en lugar de la maestra. Ahora bien, si tengo 10 páginas, que estoy haciendo esto para todos 10, que sé que no es correcto. En el ejemplo siguiente masterpage, dónde voy a poner 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 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: Content. Por supuesto, ahora tengo el problema de, si quería usar el plugin FancyBox en otras páginas, me gustaría poner el script de jQuery y el guión FancyBox en los 5 páginas en lugar de sólo la masterpage. Cuando se trata de masterpages, ¿de dónde viene todo vaya usando el ejemplo anterior?

¿Fue útil?

Solución

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íficas de páginas se pudieron cargar dentro de los controles de contenido que hacen referencia a la ContentPlaceHolder cabeza.

Sin embargo, una mejor opción sería la de buscar en el ScriptManager y ScriptManagerProxy controles -. estos se pueden proporcionar con mucho más control sobre la forma en que sus archivos JS se sirven al cliente

Así que le coloque un control ScriptManager a dominar en 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>

A continuación, en su página que requiere algunos archivos JS personalizadas, o un plugin de 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 control donde en los guiones de la página se representa con LoadScriptsBeforeUI (o mejor aún, después de estableciéndolo en falso).

Otros consejos

I utilizar este método. 

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

Sólo tiene que colocar por encima de su etiqueta ... 

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

Está bien usar un contentplaceholder diferente para su guión. 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 secuencias de comandos en el masterpage y también en sus páginas también. Asegúrese de que las secuencias de comandos están cargando en el orden correcto mediante la visualización de la fuente de la página HTML y asegurar la dictada en el camino correcto. Buena suerte.

Ah, una cosa más, asegúrese de jQuery y luego FancyBox cargar hasta antes de cualquier otra js que pueda tener por ahí o de lo contrario no funcionará. cargas de JavaScript en el orden en que fue llamado, jQuery deben cargar primero!

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

Para archivo de secuencia 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" />

Notas adicionales:

  1. Utilice las versiones minified como podría como sea posible (FileName.min.js) y (FileName.min.css) para reducir el tiempo de carga y mejorar SEO.
  2. Poner el CSS antes de la </head> y el guión antes de la </body> a mejorar el rendimiento y SEO.
  3. El carácter baldosa (~) en la ruta resolverá de forma automática a la raíz de su sitio web.
  4. No se olvide de utilizar runat="server" por sólo la hoja de estilo. La secuencia de comandos no debe tener runat="server" porque ya utiliza los operadores de servidores <%= %>.
  5. Puede utilizar la línea http://jscompress.com/ para comprimir sus javascript y https://csscompressor.net/ para comprimir los archivos CSS.
Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top