appel Javascript from code behind

**mirtouf** · 24/02/2010, 16h39

Bonjour ,

j'ai un petit problème sur le site que je suis en train de faire concernant le javascript :

Une de mes page fille contenant une carte(OpenStreetMap) générée via javascript.
Sur cette carte je devrais pouvoir afficher des marqueurs selon une liste de latitude longitudes que je récupère via ma base de données.

J'ai codé un petite fonction qui m'affiche un marqueur selon les coordonnées que je lui passe , et pour la tester j'avais placé un div dans ma MasterPage comme ceci et cela fonctionnait tres bien.

Code :

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

1
2
 
<div style="background-color:green" onclick="addMarker(4.333,50.833)"> click to add a marker to the map</div>

Le probleme c'est que j'aimerais que les différents marqueurs s'affichent lors de l'arrivée sur la page (donc sans cliquer sur un bouton ou autre ) mais je ne vois pas comment faire et a quelle étape du chargement de la page appeller la fonction javascript.

Si vous pouviez m'aider ce serait sympa.
Merci.

**Nicolas Esprit** · 24/02/2010, 18h36

Bonjour mirtouf,

Si j'ai bien compris, tu souhaites au chargement de la page afficher les marqueurs déjà enregistrés en base ?

Pourquoi ne pas utiliser l'évènement onLoad javascript pour appeler ta méthode addMarker ?
Ou bien dans la méthode Page_Load (code-behind) de ta page : appeler ta base de données pour obtenir les marqueurs puis utiliser RegisterStartupScript ? (http://msdn.microsoft.com/en-us/libr...tupscript.aspx)

En espérant t'avoir aidé.

**mirtouf** · 25/02/2010, 09h03

Oui c'est ce que je pensais faire mais je ne comprends pas comment utiliser ce
ClientScript.RegisterStartupScript .
C'est surtout un des parametres que je ne comprends pas :

Code :

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

1
2
 
ClientScript.RegisterStartupScript(Type type, string key, string script).

Visual studio me dit que le premier parametre (Type type) doit etre :

Type of the startup script to register

Je me doute bien que c'est du javascript mais par quel ligne de commande lui faire comprendre ca ?

**Nicolas Esprit** · 25/02/2010, 09h15

Hello,

Je viens de donner un exemple sur un autre post : http://www.developpez.net/forums/d88...e-code-behind/

tu peux donc utiliser this.GetType() qui te renverra...le type Page bien entendu

**mirtouf** · 25/02/2010, 10h10

Bon j'ai essayer et ca ne marche toujours pas donc je vais essayer d'être plus complet dans mes explications :

Premier chargement de la page :
**************************
Sur ma page master j'ai un script qui contient une fonction InitMap qui est lancé via

Code :

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

<body class="body" onload="initmap()">

Dans cette fonction initmap je voudrais utiliser ma fonction addmarker en lui passant toutes les coordonnées GPS a afficher mais je ne sais pas comment je peut lui passer ces valeurs .
Est-ce que je dois aller chercher les valeurs GPS (plus d'une centaine ) dans le script lui-même via un champ caché ou je ne sais quoi ou dois-je lui passer en paramètres et lancer cette fonction addmarker via le code behind?

Une fois que la page est chargée :
**************************
Toujours sur ma page master ,l 'utilisateur peut cliquer sur un treeview ce qui a pour effet de charger une autre liste de coordonnées GPS .
Mais lorsque je crée une méthode pour l'évènement click du treeview et que j'utilise la ligne de commande suivante la carte est effacée :

Code :

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

 this.ClientScript.RegisterStartupScript(this.GetType() , "cle_test", "addMarker();", true);

Je pris un screenshot du site pour que ce soit plus clair :

NB : le treeview ainsi que la listbox se trouve sur la masterpage , le contentplaceholder ne contient que la map.

**Nicolas Esprit** · 25/02/2010, 11h02

mirtouf,

Déjà, tu te compliques la vie à gérer les fonctions JavaScript qui manipulent ta map dans la MasterPage, alors que ta map ne se trouve pas sur celle-ci mais sur une Page fille.

Autant mettre cette partie sur la Page fille :

Code :

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

<body class="body" onload="initmap()">

Evidément tu devras peut être transformer cela en :

Code :

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

1
2
3
4
5
6
7
8
9
<asp:Content ID="Content1" ContentPlaceHolderID="c1" runat="server">
 
    <script type="text/javascript">
        function InitLoad() {
            .... Ce que tu veux...
        }
 
        window.onload = InitLoad;
     </script>

Ensuite, pour aller chercher des données GPS, peut être qu'il vaudrait mieux appeller un WebService ou une WebMethode disponible dans le codebehind de ta Page directement via Javascript. Tu as un petit exemple ici avec du code à télécharger : http://amolwable.com/index.php/2009/...in-aspx-pages/ . Il y a évidement plusieurs manières de faire.

Ensuite, concernant le chargement des coordonnées suite à un click sur le TreeView, tu peux tout à fait éviter un PostBack et te servir du JavaScript pour appeler ta WebMethod.

En espérant t'avoir aidé.

**mirtouf** · 26/02/2010, 08h53

Merci bcp pour vos conseils ils m'ont bcp aidé .

Finalement je passe les coordonnées gps au javascipt via un champ caché c'est bcp plus simple pour moi.
Par contre il faut encore que je règle le problème de la carte qui disparait lorsque je clique sur le treeview.

Sinon il y'a un truc qui me laisse assez perplexe , sur ma master page j'ai un script qui contient une fonction que je lance via la commande window.onload=mafonction() et sur ma une autre page fille j'ai aussi un script
contenant une fonction lancée de la même façon.
Et lorsque dans la page fille je tape window.onload=mafonction sans les parenthèses la fonction se lance ainsi que celle de la page maitre et si je met les parenthèses la fonction de la page fille ne se lance pas .
J'ai vérifier partout et je ne lance nul par ailleurs ces deux fonctions .

**mirtouf** · 26/02/2010, 14h13

Bon le problème de la carte qui s'efface est résolu c'est parce qu'elle était dans un update panel dont j'ai du désactiver les trigger pour la page contenant la map.

Ce que j'aimerais bien faire maintenant c'est afficher les sites sur la map quand le user clique sur le treeview et virer les sites précédents de la map mais je n'arrive pas a lancer ma fonction javascript sur l'évcenement onselectedindexchanged du treeview , de il y a déjà une méthode assignée a cet évènement.

J'ai essayer avec la méthode :

Code :

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

Page.ClientScript.RegisterClientScriptBlock(this.GetType(), "key", "mafunction();", true);

mais cela ne fonctionne pas ( ma fonction javascript ne contient qu'une alert pour faire simple pour commencer )

**Nicolas Esprit** · 27/02/2010, 11h13

Bonjour mirtouf,

Si c'est bien compris ton problème, tu as déjà une fonction rattachée à l'évènement OnSelectedIndexChanged de ton TreeView et tu souhaites en ajouter une deuxième ?

Pourquoi ne pas faire simplement ceci :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
        function function1() {
           .....
        }
 
        function mafunction() {
            ....
        }
 
        function SelectedIndexChanged () {
            function1();
            mafunction();
        }

Après, tu peux toujours déclarer dynamiquement tes fonctions : MaFunction et function1 dans le code-behind via Page.ClientScript.RegisterClientScriptBlock

En espérant t'avoir aidé.

**mirtouf** · 27/02/2010, 21h28

Oui mais ma fonction attachée au treeview est en fait une methode c# et j'aimerais en rattacher une autre mais en javascript.
J'arrive a lier cette fonction au click d'un bouton via la commande :

Code :

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

1
2
 
bouton.attributes.add("onclick",mafonction()); [Je ne sais pas si c'est la bonne syntaxe je l'écris de tete)

mais pas au treeview.

**Nicolas Esprit** · 28/02/2010, 09h58

Ok je comprends mieux ce que tu veux : capturer à la fois l'évènement côté serveur et côté client.

Pour le TreeView, il me semble que tu peux faire ceci :

Code :

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

MyTree.Attributes.Add("onselectedindexchange", "myFunction();");

Désolé je n'ai pas Visual Studio sous la main ce weekend pour tester le code.

**mirtouf** · 01/03/2010, 09h30

En fait je suis obligé d'utiliser le onClick dans la commande suivant :

Code :

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

MonTreeview.attributes.add("onClick",mafonctionjavascript)

l'évènement "onselectednodechanged" n'est pas détecté.
Et le problème de cela ( Mais qui n'est pas encore trop dérangeant je peut faire avec ) c'est que dés que l'on clique dans la zone du treeview ,que ce soit sur un nœud ou pas, la fonction est appelée.

**mirtouf** · 01/03/2010, 16h18

Pff j'y comprends plus rien ,

j'ai déplacé mon script dans ma masterpage parce que sinon quand je lie mon treeview a la fonction javascript via

Code :

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

 TVW_arbre1.Attributes.Add("onClick", "LoadSites();");

la fonction javascript ne s'exécute pas.

Et maintenant que j'ai fait cela la page ne s'éxécute pas , je recois le message d'erreur :

The Controls collection cannot be modified because the control contains code blocks (i.e. <% ... %>).

Qui vient surement de la ligne suivante :

Code :

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

var Latitude = '<%= LB_longitude.Text %>';

Donc j'ai remplacé cette ligne de code par :

Code :

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

var Latitude = document.getElementById('ctl00_LB_latitude').text;

Mais maintenant le problème c'est que lorsque je clique sur le treeview il devrait charger les coordonnées GPS dans le label (LB_latitude) grâce à la méthode que j'ai créé dans mon code behind sur l'évent onselectnodechanged du treeview et puis lancer ma fonction javascript mais il fait l'inverse, donc quand je clique il me charge les données GPS du clic précédent.

Pourtant le code behind est exécuté avant le javascript non ?

**Nicolas Esprit** · 01/03/2010, 21h29

mirtouf

Il est un peu difficile de te répondre car tu parles de plusieurs problèmes à la fois. Au passage, lorsque tu identifies un nouveau problème, je te conseille de créer un post dédié à celui-ci afin de garantir des réponses plus ciblées.

Concernant ta dernière remarque :

Mais maintenant le problème c'est que lorsque je clique sur le treeview il devrait charger les coordonnées GPS dans le label (LB_latitude) grâce à la méthode que j'ai créé dans mon code behind sur l'évent onselectnodechanged du treeview et puis lancer ma fonction javascript mais il fait l'inverse, donc quand je clique il me charge les données GPS du clic précédent.
Pourtant le code behind est exécuté avant le javascript non ?

Non, c'est l'inverse. Exemple simple, j'ai un bouton ASP.Net pour lequel j'attache une méthode javascript sur l'evènement OnClientClick et une méthode c# sur l'évenèment OnClick. La fonction javascript sera d'abord executée, et seulement après le postback de la page aura lieu pour déclencher l'execution de ta fonction c#.

En espérant t'avoir aidé.

**mirtouf** · 02/03/2010, 08h42

Envoyé par Nicolas Esprit

Concernant ta dernière remarque :
Non, c'est l'inverse. Exemple simple, j'ai un bouton ASP.Net pour lequel j'attache une méthode javascript sur l'evènement OnClientClick et une méthode c# sur l'évenèment OnClick. La fonction javascript sera d'abord executée, et seulement après le postback de la page aura lieu pour déclencher l'execution de ta fonction c#.

En espérant t'avoir aidé.

Comment faire alors pour que les données GPS soient enregistrées via le code behind et puis traitées sous javascript ?

**Nicolas Esprit** · 02/03/2010, 10h56

Ce que tu peux simplement faire, c'est associer uniquement une méthode à ton évènement OnClick. Dans celle-ci (dans le code-behind donc), tu déclares ta fonction JavaScript dynamiquement pour que celle-ci soit exécutée au prochain chargement de la page (via la méthode ClientScript.RegisterStartupScript).

En espérant t'avoir aidé.

**mirtouf** · 02/03/2010, 14h47

Cette solution fonctionne mais elle m'oblige a recharger la page ce que je ne veux pas (j'utilise des updtae panel sur les autres pages ce serait dommage de devoir recharger cette page map a chaque click).

Désolé si je suis énervant mais je vois vraiment plus quoi faire.

**Nicolas Esprit** · 02/03/2010, 15h29

Soit je ne comprends pas ce que tu cherches à expliquer. Soit tu as de sérieuses lacunes en ASP.Net ou bien tu débutes.

Ces deux passages :

Mais maintenant le problème c'est que lorsque je clique sur le treeview il devrait charger les coordonnées GPS dans le label (LB_latitude) grâce à la méthode que j'ai créé dans mon code behind sur l'évent onselectnodechanged du treeview...

Cette solution fonctionne mais elle m'oblige a recharger la page ce que je ne veux pas (j'utilise des updtae panel sur les autres pages ce serait dommage de devoir recharger cette page map a chaque click).

Sont contradictoires (ou révélateurs selon ma supposition du dessus).

UpdatePanel ou pas, il y a bien un PostBack lors d'une nouvelle sélection dans le TreeView et un chargement de la page côté serveur (même si seul le contenu du UpdatePanel est envoyé en html et non toute la page). Donc, dans ta méthode code-behind où tu charges tes coordonnées GPS, tu peux très bien créer dynamiquement le script avec RegisterStartupScript non ?

Si je n'ai pas bien compris ton problème, dans ce cas il faut être plus explicite ou fournir plus de code pour détailler tes explications.

**mirtouf** · 03/03/2010, 08h43

Ok , ca devrait aller j'ai enfin compris comment fonctionnait le scriptmanager , Ca marche piel poil comme je voulais maintenant.

Par contre sous cette bouse intégrale qu'est internet explorer j'ai un probleme de javascript que je dois encore régler .

Code :

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

1
2
3
4
5
6
7
8
Microsoft JScript runtime error: Object doesn't support this property or method
 
map = new OpenLayers.Map( 'map',{ controls: [new OpenLayers.Control.Navigation(),
                                             new OpenLayers.Control.PanZoomBar(),
                                             new OpenLayers.Control.LayerSwitcher({'ascending':false}),
                                             new OpenLayers.Control.ScaleLine(),
                                             new OpenLayers.Control.OverviewMap(),
                                             new OpenLayers.Control.KeyboardDefaults()] } );

*EDIT : C'est bon le probleme est résolu , il fallait rajouter : var map=null avant mon fonction initmap();

En tout cas merci de ton aide et de ta patience ca m'a permit d'éclairer quelques zones sombres dans ma compréhension de l'asp.net et javascript.

appel Javascript from code behind

ASP.NET

Discussions similaires

Partager

Partager