Discussion :

[telynette]

Bonjour,

J'ai un petit probleme de liens

Mon site presente l'arborésence suivante :

Default.aspx
masterpage.master
Boutique/Default.aspx
Boutique/Compte.aspx
etc


J'aimerai utiliser une seule masterpage (ce qui est surrement possible) mais j'ai un soucis avec mes liens

En effet quand je fais

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

 <li><a href="~/Boutique/Commandes.aspx">Mes commandes</a></li>

Si je clique sur ce lien depuis la boutique j'arrive sur http://localhost:1480/ClaireFontaine...Commandes.aspx

Hors je pensais que le ~ me placais a la racine de mon site, visiblement je me trompais.

j'ai voulu essayer

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

 <li><a href='<% resolveUrl(..)' %>>Mes commandes</a></li>

mais pas moyen de mettre la main sur une syntaxe qui fonctionne...

Une idée svp ?
Merci

[Mehdi Feki]

Utilise plutôt un controle serveur : HyperLink

[mlebreton]

En ASP.NET, l'utilisation du ~/ est une fonctionalité serveur, faisant donc appel à un traitement sur le serveur.

La problématique

En effet, seul le serveur est en mesure de connaitre la racine de l'application Web. Cette affirmation peut sembler étonnante mais pour comprendre imaginons un domaine comme www.masociete.com. Ce domaine peut héberger autant d'application web qu'on le souhaite (qui peuvent d'ailleurs ne pas être toutes en ASP.NET). Nous pouvons donc avoir :
http://www.masociete.com : Portail de présentation de l'entreprise
http://www.masociete.com/Gestion : Portail de l'application de gestion
http://www.masociete.com/B2B : Portail de travail collaboratif
...

Vue du navigateur, qu'est-ce donc que la racine d'une application ? Comment doit-il interpréter une URL de la forme /Image/Monimage.gifou ../MonDossier/Monfichier.htm ?

Au yeux du navigateur, ce sont des URLs relatives ! Elles sont relatives à l'URL saisie dans la barre d'adresse du navigateur.

L'opérateur racine

ASP.NET introduit l'opérateur racine (~) pour la raison expliquée ci-dessus. L'utilisation de cet opérateur dans une URL fait de cette URL une URL virtuelle. Puisqu'elle est virtuelle, il faudra lui appliquer un traitement pour la transfomer en une URL réelle. Ce traitement s'effectue sur le serveur. Pour preuve, si l'on reprend votre code :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<li><a href="~/Boutique/Commandes.aspx">Mes commandes</a></li>

Affichez votre page dans votre navigateur puis visualisez le code source, vous obtenez :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<li><a href="~/Boutique/Commandes.aspx">Mes commandes</a></li>

Et oui, le (~) est arrivé sur le navigateur pour qui il ne signifie absolument rien ! L'URL virtuelle n'a subie aucune transformation. Il faut a tout pris que le (~) soit traité par le serveur.

Solutions

Comme le suggère le post précédent, il est possible WebControl HyperLink en lien et place de la balise HTML <a></a>. Le WebControl HyperLink étant un contrôle serveur Web, l'URL virtuelle sera correctement transformée.

Mais il est aussi possible de transformer la balise HTML <a></a> (qui est traité par ASP.NET comme du text litéral) en ce qu'on appel un HtmlControl, qui lui sera traité coté serveur. Il suffit de lui ajouter l'attribut runat="server" comme dans le code suivant :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<li><a href="~/Boutique/Commandes.aspx" runat="server">Mes commandes</a></li>

Testez la différence dans votre navigateur, vous verrez dans la source HTML que l'URL virtuelle a belle et bien étée transformée. Le serveur a fait son travail.

Limitations

Qu'il s'agisse de WebControl ou d'HtmlControl, l'utilisation de l'opérateur (~) n'est pas la panacée. Par exemple le code suivant ne fonctionnera pas :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<div style="background-image:url(~/Image/Monimage.jpg);" runat="serve"></div>

En effet, seules les propriétés marquées comme étant des urls bénéficient du mécanisme lié à l'utilisation de l'opérateur (~). Et là, pour resoudre le problème, il faut passer par une abstraction supplémentaire, mais c'est une autre histoire...


Michaël LEBRETON
Développeur / Formateur indépendant

[Mehdi Feki]

pour les détails Michaël.

Il serait interessant de l'integrer dans la

[telynette]

Superbe réponse, merci beaucoup !

[bon4000]

Merci bien, topic super intéressant et j'ai résolu mon problème grâce à toi !!!!


Merciiiii

[nico_4802]

Merci pour ce tuto qui m'a vraiment bien aidé !!!

néanmoins j'aurais quand-même une petite interrogation...
En effet, il semble que cette ligne de code ne fonctionne pas :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<script type="text/javascript" src="~/JavaScript/jquery.js" runat="server"></script>

est-ce parce qu'elle est située dans le head ?
Avez-vous une solution ?

Merci d'avance.

[dieuzorro]

Réponse pour nico_4802

Pour référencer correctement nos fichiers, il faut explicitement demander la construction du chemin relatif correct. Pour cela, il faut utiliser la méthode ResolveClientUrl de la classe Control.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<script src="<%= ResolveClientUrl("~/Scripts/jquery-1.3.2.js")%>" type="text/javascript"></script>