web-dev-qa-db-fra.com

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

Je n'ai aucun problème lors de l'utilisation de JQuery dans une page aspx sans page maître, mais lorsque j'essaie de l'utiliser dans des pages qui ont une page maître, cela ne fonctionne pas, donc je finis par mettre les fichiers jquery et autres fichiers de script dans le page au lieu du maître. Maintenant, si j'ai 10 pages, je le fais pour les 10, ce que je sais est incorrect. Dans l'exemple de page maître ci-dessous, où dois-je placer 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 j'ai fait a été de ne pas mettre le script jquery et les scripts fancybox dans la page principale parce que j'étais frustré de le faire fonctionner, je l'ai simplement mis dans la page où je voulais que le script s'exécute, en particulier sur en bas, juste avant l'asp de fermeture: Contenu. Bien sûr, j'ai maintenant 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 simplement la page principale. Lorsque vous traitez des pages maîtres, où va tout en utilisant mon exemple ci-dessus?

asp.netjquerymaster-pagesfancybox
39
Xaisoft

Vous déclareriez vos principaux scripts jQuery dans la page maître, 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 à une page peuvent être chargés dans les contrôles de contenu qui font référence au Head ContentPlaceholder.

Cependant, une meilleure option serait d'examiner 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 .

Vous placez donc un contrôle ScriptManager dans votre page maître et ajoutez une référence au code de base jQuery en cela:

<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 contrôler où les scripts sur la page sont rendus avec LoadScriptsBeforeUI (ou mieux encore, après en le définissant sur False).

54
Zhaph - Ben Duguid

J'utilise cette méthode.

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

Il suffit de le placer au-dessus de votre tag ...

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

Utilisez bien un espace de contenu différent pour votre script. ça devrait ressembler à ça

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

</asp:ContentPlaceHolder>

Placez cette balise au bas de votre page maître, près de </body> tag. Cela vous permettra d'ajouter des scripts sur la page principale 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 garantissant le HTML rendu de la bonne manière. Bonne chance.

Oh encore une chose, assurez-vous que jQuery puis FancyBox se chargent avant tout autre js que vous pourriez avoir, sinon cela ne fonctionnera pas. Javascript se charge dans l'ordre où il a été appelé, jQuery doit d'abord être chargé!

2
Al Katawazi

C'est ce qui fonctionnera à l'intérieur d'une page maître:

Pour le fichier de 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 supplémentaires:

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