Une bonne façon d'utiliser JQuery lors de l'utilisation MasterPages dans ASP.NET?

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

Question

Je n'ai pas des problèmes lorsque vous faites en utilisant JQuery dans une page ASPX sans masterpage, mais lorsque je tente de l'utiliser dans les pages qui ont un masterpage, il ne fonctionne pas, alors je finis par mettre les fichiers jquery et d'autres scripts fichiers dans la page au lieu du maître. Maintenant, si j'ai 10 pages, que je fais cela pour tous 10, que je sais est incorrect. Dans l'exemple ci-dessous masterpage, où je mettrais mes fichiers 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>

J'ai récemment utilisé le plugin fancybox et ce que je l'ai été au lieu de mettre le script jquery et scripts FancyBox dans le masterpage parce que je suis frustré de la faire fonctionner, je l'ai mis dans la page où je voulais que le script à exécuter , en particulier au fond, juste avant la fermeture de asp: Content. Bien sûr, maintenant j'ai la question, si je voulais utiliser le plugin fancybox dans d'autres pages, je mettrais le script jquery et script fancybox sur les 5 pages au lieu de simplement le masterpage. Lorsque vous traitez avec MasterPages, où tout ne va utiliser mon exemple ci-dessus?

Était-ce utile?

La solution

Vous devrez déclarer vos principaux scripts jQuery dans la page principale, comme vous le feriez normalement: 

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

Et puis tous les fichiers JS spécifiques de page peuvent être chargés dans les contrôles de contenu qui font référence à la tête ContentPlaceHolder.

Cependant, une meilleure option serait de se pencher sur la ScriptManager et ScriptManagerProxy contrôles -. ceux-ci peuvent vous fournir beaucoup plus de contrôle sur la façon dont vos fichiers JS sont servis au client

Donc, vous placez un contrôle ScriptManager en vous maîtrisez la page, et ajouter une référence au code de base jQuery en ce 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>

Ensuite, dans votre page qui nécessite des fichiers JS personnalisés, ou un plugin jQuery, vous pouvez avoir: 

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

Le ScriptManager vous permet de faire des choses comme le contrôle où les scripts de page sont rendus avec LoadScriptsBeforeUI (ou mieux encore, après en la mettant sur False).

Autres conseils

J'utilise cette méthode. 

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

Il suffit de placer au-dessus de votre balise ... 

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

Bien utiliser un autre ContentPlaceHolder pour votre script. Il devrait ressembler à ceci 

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

</asp:ContentPlaceHolder>

Placez cette balise au bas de votre masterpage, à proximité de la balise </body>. Cela vous permettra d'ajouter des scripts sur la masterpage et aussi sur vos pages ainsi. Assurez-vous que vos scripts chargent dans l'ordre en regardant la source de la page et d'assurer le rendu HTML dans le droit chemin. Bonne chance.

Oh une chose, assurez-vous que jQuery puis FancyBox charger avant toute autre js que vous pourriez avoir là-bas, ou bien il ne fonctionnera pas. charges Javascript dans l'ordre, il a été appelé, jQuery doit charger d'abord!

est ce qui va travailler à l'intérieur d'une page principale:

pour le fichier script: 

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

pour le fichier CSS: 

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

Notes complémentaires:

  1. Utilisez les versions minified que pourrait possible (FileName.min.js) et (FileName.min.css) pour réduire le temps de chargement et d'améliorer le référencement.
  2. Placez le CSS avant la </head> et le script avant que le </body> à améliorer les performances et d'améliorer le référencement.
  3. Le caractère de tuiles (~) dans le chemin résoudra automatiquement à la racine de votre site Web.
  4. Ne pas oublier d'utiliser runat="server" pour la feuille de style uniquement. Le script ne doit pas avoir runat="server" parce qu'il utilise déjà les opérateurs de serveur <%= %>.
  5. Vous pouvez utiliser le http://jscompress.com/ pour compresser votre javascript et https://csscompressor.net/ pour compresser vos fichiers CSS.
Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top