JQuery avec MasterPage dans ASP.NET

Question

J'essaie d'utiliser JQuery avec certaines pages asp.net, qui utilisent des pages maîtres, et j'ai des problèmes avec le chargement du fichier javascript JQuery.

Quand j'inclure le fichier dans le balisage de la page principale, il fonctionne très bien sur les pages qui sont dans le même répertoire que la page principale:

<script src="jquery/jquery-1.4.2.min.js" type="text/javascript"></script> 

mais qui casse pour les pages qui ne sont pas dans le même répertoire que la page maître. Les pages maîtres héritent du chemin de la page qui les inclut. Par conséquent, le chemin d'accès relatif au fichier jquery .js est différent pour différentes pages. Et, bien sûr, je ne peux pas avoir des chemins relatifs différents dans le fichier principal, car il n'y en a qu'un seul.

je pourrais utiliser un chemin absolu:

<script src="/jquery/jquery-1.4.2.min.js" type="text/javascript"></script> 

mais qui brise si le site est installé en tant que répertoire virtuel.

Mon prochain essai était d'utiliser le « ~ » pour indiquer la racine du site:.

<script src="~/jquery/jquery-1.4.2.min.js" type="text/javascript"></script> 

Mais la balise de script ne comprend pas le ~ »

J'ai donc essayé de le faire . dans le code-behind de OnInit(), j'ai essayé:

string url = "~/jquery/jquery-1.4.2.min.js"; 
url = this.ResolveUrl(url); 
Page.ClientScript.RegisterClientScriptInclude("jquery_js", url); 

Et cela me donne des erreurs lorsque le javascript JQuery fonctionne j'ai javascript dans le balisage de la page:.

$(document).ready(function() 
{ 
    ... 
} 

et je reçois "$" est indéfini. J'ai ajouté une alerte au début jquery-1.4.2.min.js, et il se charge OK, mais après ce bit de javascript dans le fichier .aspx a été exécuté.

J'ai essayé ScriptManager.RegisterClientScriptInclude(), à la place, avec le même résultat.

Answer 1

Le cœur du problème était que les liens vers les fichiers JavaScript qui étaient injectés dans la page avec RegisterClientScriptInclude étaient placé sur la page ci-dessous le code JavaScript dans le balisage qui en dépendait.

Ce qui est dans $(document).ready() peut ne pas s'exécuter tant que la page n'est pas chargée, mais $() est exécuté immédiatement, car il est lu par le navigateur.

La solution est de déplacer le JavaScript pour qu'il apparaisse plus tard dans le fichier. Ce qui n'est pas toujours aussi simple qu'il n'y paraît, quand il s'agit de pages maîtres et de nombreux contrôles utilisateur.

Pour moi, le moyen le plus simple de le gérer était d'injecter le code JavaScript à partir du code-behind, en utilisant RegisterStartupScript. Les blocs de script injectés avec ceci sont ajoutés à la fin du formulaire. Les instructions exécutables ne s'exécuteront qu'après l'insertion de tous les fichiers JavaScript.

Answer 2

utilisation Page.ResolveUrl() il est donc par rapport à la page, et non la MasterPage (et le répertoire de contrôle, il est dans), comme ceci:

string url = Page.ResolveUrl("~/jquery/jquery-1.4.2.min.js"); 

Answer 3

Vous pouvez soit utiliser:

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

Ou éventuellement construire un contrôle qui fait essentiellement le remappage pour vous:

<my:Script src="~/jquery/jquery-1.4.2.min.js" /> 

Ou même l'enregistrer avec ClientScriptManager, mais il est préférable de le mettre dans la page.

Answer 4

Essayez de faire comme ci-dessous

StringBuilder sb = new StringBuilder(); 
      sb.Append("<script type=\"text/javascript\" src=\""); 
      sb.Append("http://yourwebsitename" + "/" + "directory"); 
      sb.Append("/"); 
      sb.Append("jquery.js"); 
      sb.Append("\"></script>"); 
     Header.Controls.Add(new LiteralControl(sb.toString())); 

Answer 5

Utilisez Google pour servir votre jquery:

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> 

Notez l'absence de http dans l'attribut src, cela résoudra tous les problèmes qui pourraient arrise avec http vs https

Voici pourquoi: http://encosia.com/2008/12/10/3-reasons-why-you-should-let-google-host-jquery-for-you/

Ode To code a un article fantastique sur les pages Maître, vous devriez jeter un oeil à ainsi:

http://odetocode.com/Articles/450.aspx

Answer 6

ResolveUrl est le chemin à parcourir.

<script src="<%= ResolveUrl("~/scripts/jquery-1.4.4.min.js") %>" type="text/javascript"></script> 

Answer 7

l'aide de Google est un bon choix ofcourse mais vous pouvez aussi vous ajouter un lien dans chacune de vos pages que vous avez un problème (thoes qui ne peut pas trouver le chemin du jquery) Par exemple, si vous avez une page appelé "MyPage.aspx" dans l'autre répertoire suffit d'ajouter le script sur le html de la page "MyPage.aspx" relativement de cette façon cette page ne peut pas trouver votre adresse jquery fonctionnera bien avec le nouveau de manière réciproque J'espère que cela fonctionne pour

Answer 8

à ne pas répéter votre auto

faire une fonction d'extension pour vos pages

public static class yourclass 
{ 
    public static string ConvertRelativePathToRootPath(this Page p, string pathfromroot) 
    { 


     string newUrl = ""; 
     Uri originalUri = HttpContext.Current.Request.Url; 
     newUrl = (originalUri.Scheme) + "://" + originalUri.Authority + pathfromroot; 
     return newUrl; 


    } 
} 

ajoutez simplement le code suivant à vos événements de chargement de page

string ss = Page.ConvertRelativePathToRootPath("~/script/jquery-1.4.1.min.js"); 
ScriptManager.RegisterClientScriptInclude(this, this.GetType(), "Jquery", ss); 

vous pouvez également utiliser la au-dessus de la fonction d'extension pour tous les autres besoin d'un chemin absolu comme des balises d'image ou d'ancrage sur votre fichier avec un chemin autre que votre racine de la page maître de l'application :)

Answer 9

Vous pouvez essayer src="<%= Page.ResolveClientUrl("~/jquery.js") %> dans la tête de page maître.

$<script type="text/javascript" src="<% = Page.ResolveClientUrl("~/scripts/jquery-1.4.1.min.js") %>"></script>