Introduction

Lors du développement d’applications Web en C#, il est courant d’incorporer des ressources, comme des fichiers JavaScript, dans votre assembly. Cependant, lorsque votre JavaScript doit faire référence à des éléments statiques supplémentaires, comme des images, il peut devenir délicat de gérer correctement ces références. Vous vous demandez peut-être comment tokeniser ces références afin qu’elles puissent être utilisées de manière transparente dans votre code JavaScript.

Dans cet article de blog, nous aborderons ce problème en vous montrant comment gérer dynamiquement les références des ressources intégrées de manière structurée.

Le défi

Vous avez des fichiers JavaScript qui sont intégrés dans votre assembly, et vous les ajoutez généralement à vos pages en utilisant ClientScriptManager.GetWebResourceUrl(). Cependant, faire référence à d’autres éléments statiques, comme des images, nécessite une approche plus raffinée.

Par exemple, au lieu d’utiliser directement une URL d’image :

this.drophint = document.createElement('img');
this.drophint.src = '/_layouts/images/dragdrophint.gif';

Vous voulez le convertir dans un format plus évolutif comme :

this.drophint = document.createElement('img');
this.drophint.src = '{resource:assembly.location.dragdrophint.gif}';

Alors, comment y parvenir ? La réponse réside dans l’utilisation d’un tableau associatif JavaScript dynamique pour stocker les URLs des ressources côté serveur et les référencer côté client.

La solution

Étape 1 : Créer un tableau associatif JavaScript dynamique

Pour gérer dynamiquement vos URLs de ressources, vous pouvez créer un tableau associatif qui contient les chemins de vos ressources intégrées. Voici comment vous pouvez faire cela dans votre code côté serveur :

Exemple de code côté serveur

StringBuilder script = new StringBuilder();
script.Append("var imgResources = {};" );
script.AppendFormat("imgResources['{0}'] = '{1}';", 
    "drophint", 
    Page.ClientScript.GetWebResourceUrl(Page.GetType(), "assembly.location.dragdrophint.gif"));
script.AppendFormat("imgResources['{0}'] = '{1}';", 
    "anotherimg", 
    Page.ClientScript.GetWebResourceUrl(Page.GetType(), "assembly.location.anotherimg.gif"));

Page.ClientScript.RegisterClientScriptBlock(
    Page.GetType(),
    "imgResources",
    script.ToString(), 
    true);

Explication

1. StringBuilder : Un objet StringBuilder est utilisé pour construire efficacement le code JavaScript.
2. Tableau associatif : Nous créons une variable nommée imgResources qui contiendra les URLs de nos images.
3. GetWebResourceUrl() : Cette méthode récupère l’URL pour les ressources intégrées que vous avez spécifiées, vous permettant de stocker ces URLs dans le tableau.

Étape 2 : Référencer les ressources dans le code côté client

Avec le tableau dynamique JavaScript en place, vous pouvez facilement référencer vos images dans le code côté client comme ceci :

Exemple de code côté client

this.drophint = document.createElement('img');
this.drophint.src = imgResources['drophint'];
this.anotherimg = document.createElement('img');
this.anotherimg.src = imgResources['anotherimg'];

Avantages

• Évolutivité : Ajoutez facilement plus de ressources sans encombrer vos fichiers JavaScript.
• Gérabilité : Maintenez un point de référence unique pour les URLs, facilitant les mises à jour.
• Chargement dynamique : Assurez-vous que vos ressources se chargent en fonction des ressources intégrées dans l’assembly.

Conclusion

En structurant votre approche pour référencer des ressources intégrées dans vos applications Web C# à l’aide d’un tableau associatif JavaScript dynamique, vous pouvez rationaliser le processus de gestion des URLs des éléments statiques. Cette méthode améliore non seulement la maintenabilité, mais elle augmente également l’évolutivité de votre application.

La mise en œuvre de cette solution vous fait non seulement gagner du temps, mais elle prépare également votre code pour des mises à jour et modifications faciles à l’avenir.

Bon codage !