39 votes

Manière d'utiliser JQuery lors de l'utilisation de MasterPages dans ASP.NET?

Je n'ai pas de questions quand on fait de l'utilisation de JQuery dans une page aspx, sans une masterpage, mais quand j'essaie de l'utiliser dans des pages qui ont un masterpage, il ne fonctionne pas, donc je finis de mettre les fichiers jquery et d'autres fichiers de script dans la page à la place du maître. Maintenant, si j'ai 10 pages, je suis en train de faire ce pour tous 10, qui je sais, c'est incorrect. Dans l'exemple de masterpage ci-dessous, où dois-je mettre 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 au lieu de mettre le script jquery et scripts fancybox dans la masterpage parce que je suis frustré à la faire fonctionner, je viens de le mettre dans la page où je voulais le script à exécuter, plus précisément au bas, à droite avant la clôture de l'asp:Content. Bien sûr, maintenant j'ai le problème, si je voulais utiliser le plugin fancybox dans d'autres pages, je voudrais mettre le script jquery et fancybox script sur toutes les 5 pages au lieu de simplement la masterpage. Lorsque vous traitez avec les masterpages, d'où vient tout de go à l'aide de mon exemple ci-dessus?

54voto

Zhaph - Ben Duguid Points 18573

Vous pouvez déclarer vos principales de scripts jQuery dans la page maître, comme vous le feriez normalement:

<head runat="server">
  <link href="http://stackoverflow.com/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 ensuite une page spécifique JS fichiers peuvent être chargés dans les contrôles de Contenu de référence de la Tête ContentPlaceholder.

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

Si vous placez un contrôle ScriptManager dans vous page maître, et d'ajouter une référence à la base jQuery code 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>

Puis, dans votre page qui exige la coutume, JS fichiers, 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ù sur la page des scripts sont rendus avec LoadScriptsBeforeUI (ou mieux encore, après en paramètre à False).

8voto

Kieran Points 4268

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>
 

2voto

Al Katawazi Points 2077

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 dans le bas de votre masterpage, à proximité de la balise. Cela vous permettra d'ajouter des scripts sur la masterpage et aussi sur vos pages. Assurez-vous que vos scripts de chargement dans le bon ordre par l'affichage de la source de la page et d'assurer le rendu au format HTML dans le droit chemin. Bonne chance.

Oh encore une chose, assurez-vous que jQuery et puis FancyBox charge avant autre chose js vous pouvez avoir là sinon ça ne fonctionne pas. Javascript charges dans l'ordre qu'il a été appelé, jQuery doit se charger en premier!

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X