Comment utiliser JQuery correctement lors de l'utilisation de MasterPages dans ASP.NET?

Je n'ai aucun problème en utilisant JQuery dans une page aspx sans page maître, mais quand j'essaie de l'utiliser dans des pages qui ont une page maître, ça ne marche pas, donc je finis par mettre les fichiers jquery et autres fichiers script dans la page au lieu du maître. Maintenant, si j'ai 10 pages, je le fais pour tous les 10, ce que je sais est incorrect. Dans l'exemple de masterpage ci-dessous, où devrais-je mettre mes fichiers de script.Comment utiliser JQuery correctement lors de l'utilisation de MasterPages dans 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>

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 le script à exécuter, en particulier en bas, juste avant la fermeture asp: Contenu. Bien sûr, maintenant j'ai le problème de, si je voulais utiliser le plugin fancybox dans d'autres pages, je mettrais le script jquery et le script fancybox sur les 5 pages au lieu de la page master. Lorsque je traite des pages maîtres, où tout se passe-t-il en utilisant mon exemple ci-dessus?

Source

2009-04-08 Xaisoft

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 peut être chargée dans les contrôles de contenu qui font référence à la tête ContentPlaceHolder. Cependant, une meilleure option consisterait à se pencher sur les contrôles ScriptManager et ScriptManagerProxy - 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 jQuery plugin, 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).

Source

2009-04-08 19:44:22

D'accord, utilisez un autre conteneur de contenu différent 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 page maître et également sur vos pages. Assurez-vous que vos scripts se chargent dans le bon ordre en affichant la source de la page et en vous assurant que le rendu HTML est correct. Bonne chance. Oh, encore une chose, assurez-vous que jQuery puis FancyBox charger avant tout autre js que vous pourriez avoir là-bas, sinon cela ne fonctionnera pas. Javascript charge dans l'ordre où il a été appelé, jQuery doit charger en premier!

Source

2009-04-08 19:19:10

Est-ce que javascript charge avant le balisage html? – Xaisoft

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

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

Source

2010-02-11 01:40:25 Kieran

+1 mais j'ai reçu un avertissement quand inclure l'attribut de langue disant attribut invalide –

Je préfère celui-ci puisqu'il ne nécessite pas de ScriptManager ou de composant supplémentaire. –

C'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 fichier CSS:

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

Non supplémentaires es:

Utilisez les versions minified que pourraient possible (FileName.min.js) et (FileName.min.css) pour réduire le temps de chargement et d'améliorer le référencement.
Mettez le CSS avant le </head> et le script avant le </body> au améliore les performances et améliore le référencement.
Le caractère de tuile (~) dans le chemin se résoudra automatiquement à la racine de votre site Web. N'oubliez pas d'utiliser runat="server" pour la feuille de style seulement. Le script ne doit pas avoir runat="server" car il utilise déjà les opérateurs de serveur <%= %>.
Vous pouvez utiliser le http://jscompress.com/ en ligne pour compresser votre javascript et https://csscompressor.net/ pour compresser vos fichiers CSS.

Source

2015-05-12 01:12:52

Comment utiliser JQuery correctement lors de l'utilisation de MasterPages dans ASP.NET?

Répondre

Questions connexes