appeler fonction javascript a partir d'un code c#

Version imprimable

Bonjour, j'ai un boutton search dans ma page asp.net :

Code:

1
2
<asp:Button ID="btnsearch" Text="Search" runat="server" CssClass = "button" 
                     onclick="btnsearch_Click"/>

mon code behind c# est le suivant :

Code:

1
2
3
4
protected void btnsearch_Click(object sender, EventArgs e)
    {
        this.ClientScript.RegisterStartupScript(this.GetType(), "findAdress", "findAddress();", true);
    } //findAdress c'est une chaine que j'ai mise pour identification

Mon code javascript qui marche tres bien :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
function findAddress() {
    var address = document.getElementById("ddlAdr").value;
 
    //appeler methode c# qui retourne l'element station selectionné
 
    // script uses our 'geocoder' in order to find location by address name
    geocoder.geocode({ 'address': address }, function(results, status) {
        if (status == google.maps.GeocoderStatus.OK) { // and, if everything is ok
 
            // we will center map
            var addrLocation = results[0].geometry.location;
            map.setCenter(addrLocation);
 
            // store current coordinates into hidden variables
            document.getElementById('lat').value = results[0].geometry.location.$a;
            document.getElementById('lng').value = results[0].geometry.location.ab;
 
            // and then - add new custom marker
            var addrMarker = new google.maps.Marker({
 
                position: addrLocation,
                map: map,
                title: results[0].formatted_address
            });
        } else {
            alert('Geocode was not successful for the following reason: ' + status);
        }
    });

si je met un div et je met directement :

Code:

<div id="button2" class="button" onclick="findAddress(); return false;">Chercher</div>

tout marche bien

Mais malheureusement quand je clique sur mon boutton rien ne se passe
veuillez m'aider sachant que ma fonction javascript est dans un fichier a part :

Code:

1
2
3
4
 <head runat="server">
                <script type ="text/javascript" src="Scripts/script.js"></script>
 
    </head>

05/05/2014, 10h57
DotNetMatt

La méthode RegisterStartupScript est obsolète, en principe tu dois avoir un avertissement du compilateur. Il faut passer par ClientScriptManager.RegisterClientScriptBlock.
05/05/2014, 11h39
Beowulf59

De plus, il faut bien connaître la différence entre la manipulation d'un this.ClientScript et d'un ClientScriptManager classe évoquée par DotNetMatt.
De mémoire, le ClientScriptManager est à utiliser dans le cadre de postbacks asynchrones (UpdatePanel), car le ClientScript gère mal l'appel au JS dans ce cadre là.
Si ton bouton est englobé par un UpdatePanel, cela pourrait expliquer ton souci :)

Merci pour vos reponses mais je n'ai pas compris :

Code:

1
2
De mémoire, le ClientScriptManager est à utiliser dans le cadre de postbacks asynchrones (UpdatePanel), car le ClientScript gère mal l'appel au JS dans ce cadre là. 
Si ton bouton est englobé par un UpdatePanel, cela pourrait expliquer ton souci

05/05/2014, 14h09
Beowulf59

En ASP.NET, tu peux utiliser un composant "UpdatePanel" pour te permettre de faire de l'AJAX (et donc du Postback asynchrone).
Quand tu utilises le composant UpdatePanel, les appels à this.ClientScript.RegisterStartupScript ne peuvent plus déclencher d'évènements Javascript, il faut passer par le ClientScriptManager.

Le ScriptManager.RegisterClientScriptBlock marche bien mais uniquement quand je met :

Code:

ScriptManager.RegisterClientScriptBlock(this.Page, this.GetType(), "findAdress", "findAddress();", true);

avec :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
function findAddress() {
 
    var address = document.getElementById('ddlAdr').value;
 
    // script uses our 'geocoder' in order to find location by address name
    geocoder.geocode({ 'address': address }, function(results, status) {
        if (status == google.maps.GeocoderStatus.OK) { // and, if everything is ok
 
            // we will center map
            var addrLocation = results[0].geometry.location;
            map.setCenter(addrLocation);
 
            // store current coordinates into hidden variables
            document.getElementById('lat').value = results[0].geometry.location.$a;
            document.getElementById('lng').value = results[0].geometry.location.ab;
 
            // and then - add new custom marker
            var addrMarker = new google.maps.Marker({
 
                position: addrLocation,
                map: map,
                title: results[0].formatted_address
            });
        } else {
            alert('Geocode was not successful for the following reason: ' + status);
        }
    });

Mais ce que je veux faire c'est enlever la ligne :

Code:

var address = document.getElementById('ddlAdr').value;

et passer la valeur directement dans la fonction, comme ca :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
function findAddress(address) {
 
    //var address = document.getElementById('ddlAdr').value;
 
    // script uses our 'geocoder' in order to find location by address name
    geocoder.geocode({ 'address': address }, function(results, status) {
        if (status == google.maps.GeocoderStatus.OK) { // and, if everything is ok
 
            // we will center map
            var addrLocation = results[0].geometry.location;
            map.setCenter(addrLocation);
 
            // store current coordinates into hidden variables
            document.getElementById('lat').value = results[0].geometry.location.$a;
            document.getElementById('lng').value = results[0].geometry.location.ab;
 
            // and then - add new custom marker
            var addrMarker = new google.maps.Marker({
 
                position: addrLocation,
                map: map,
                title: results[0].formatted_address
            });
        } else {
            alert('Geocode was not successful for the following reason: ' + status);
        }
    });
}

Code:

1
2
3
4
5
6
7
8
9
10
11
12
 
    protected void btnsearch_Click(object sender, EventArgs e)
    {
        String adresse = "";
        while (oDBDataReader.Read() == true)
        {
            adresse = ...;// je retourne bien une valeur
        }
        connection.Close();
 
        ScriptManager.RegisterClientScriptBlock(this.Page, this.GetType(), "findAdress", "findAddress("+adresse+");", true);
    }

Comment dois je faire

05/05/2014, 19h41
DotNetMatt

Qu'est-ce que ça donne avec ceci ?

Code:

Page.ClientScript.RegisterClientScriptBlock(this.Page, this.GetType(), "findAdress", "findAddress('"+adresse+"');", true);

Il faut bien entendu échapper les apostrophes éventuellement contenues dans la variable adresse pour que ça passe.
05/05/2014, 22h49
Msysteme

Code:

Page.ClientScript.RegisterClientScriptBlock(this.Page, this.GetType(), "findAdress", "findAddress('"+adresse+"');", true);

nest pas accepté, il me dit :

Code:

inaccessible due to its protected level

Quand je met :

Code:

Page.ClientScript.RegisterClientScriptBlock(this.GetType(), "findAdress", "findAddress('" + adresse + "');", true);

Je ne reçois rien Par contre si je donne une valeur a adresse a l’intérieur de la fonction javascript, je recois ce que je veux
et l'appel de la fonction se fait avec succés via ClientScript

aidez moi svp 8O

Citation:

Envoyé par DotNetMatt

La méthode RegisterStartupScript est obsolète, en principe tu dois avoir un avertissement du compilateur. Il faut passer par ClientScriptManager.RegisterClientScriptBlock.

Obsolète? Je n'ai rien vu de tel sur la MSDN: http://msdn.microsoft.com/fr-fr/libr...v=vs.110).aspx

Tu pourrais utiliser seulement du jQuery
Code:

1 2 3 4 5 6 7 8 9 $(document).ready(function(){} var selectedAddress = ""; $(".address").change(function(){ // modifier la valeur de selectedAddress }); $(".button").click(function(){ // Ta fonction de recherche utilisant selectedAddress }); );
A+

07/05/2014, 10h27
DotNetMatt

Citation:

Envoyé par Immobilis

Obsolète? Je n'ai rien vu de tel sur la MSDN: http://msdn.microsoft.com/fr-fr/libr...v=vs.110).aspx

Je parlais de la méthode Page.RegisterStartupScript : http://msdn.microsoft.com/en-us/libr...v=vs.110).aspx
07/05/2014, 11h17
Msysteme

je me rend compte que L'appel de la fonction javascript via c# se fait correctement, parce qu'il m'affiche le message de la fonction javascript "Geocode was not successful for the following reason:zero result", aussi la base de donnée me retourne bien une valeur adresse que je passe a l'appel de la fonction a l'interieur du register...block mais toujours je recois pas de resultat alors si j'affecte la meme valeur d'adresse a l'interieur de la fonction js tout marche bien

je n'arrive pas a comprendre c'est quoi le probleme ???
07/05/2014, 12h31
Immobilis

Que contient "adresse" dans

Code:

"findAddress('" + adresse + "');"
07/05/2014, 13h17
Msysteme
adresse contient une valeur adresse que j'extrait a partir de la BD, il est du genre "Rue tel, ville tel", quand je fais un F9 je recois bien la bonne valeur.

J'ai un drop down list contenant un SqlDataSource, sa vrai valeur est l'id de chaque client, dans le boutton search je cherche l'adresse correspondante au niveau de la BD et c'est bien adresse.

dans la fonction javascript, il y a une ligne a la fin quand je ne recois pas de resultat :
Code:

1 2 else { alert('Geocode was not successful for the following reason: ' + adresse);
je lui ai assigné l'adresse que je passe a la fonction javascript findadress(adresse) mais il me retourne :
Code:

1 2 Geocode was not successful for the following reason:undefined
07/05/2014, 14h19
Immobilis

J'ai besoin de la valeur de "adresse" qui te retourne cette erreur. Peux-tu la fournir?
07/05/2014, 14h43
Msysteme

exemple "N1, kenitra"8O
07/05/2014, 15h52
Immobilis

Il est possible que la virgule entre N1 et Kenitra coupe la valeur de la propriété. Essaye de modifier ta fonction js comme ceci:

Code:

geocoder.geocode({ 'address': "'" + address +"'" },

Je ne pense pas que c'est ca le probleme parce que quand je met :

geocoder.geocode({ 'address': 'N1...' }, a l'interieur de la fonction js ca marche

voila ma page asp..net je crois que c'est la ou je fais des betises :oops:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<body onload="checkconnection()" >
        <header>
        </header>
        <div id="container" class="container">
             <div id="gmap_canvas"></div>
             <form id = "searchStation" method="post" runat ="server"> 
             <div class="actions">
                <div class="button">
                <asp:ScriptManager ID="ScriptManager1"  EnablePageMethods="true" EnablePartialRendering="true" runat="server" />
 
                <label for="gmap_where">Station de service :</label>
 
               <asp:DropDownList ID="ddlAdr" runat="server" DataSourceID="SDSStation"
                                    DataTextField="Name_Station" DataValueField="ID_station" AutoPostBack="true">
               </asp:DropDownList>
                <asp:SqlDataSource ID="SDSStation" runat="server" ConnectionString="<%$ ConnectionStrings: %>"
                                    SelectCommand="SELECT * FROM [StationsServices] order by Name_station asc"></asp:SqlDataSource>
 
                </div>
                <div id="btnClear" class="button" onclick="findAddress(); return false;">Clear All</div>
                <div id="button2" class="button" onclick="findAddress(); return false;">Chercher</div>
                <asp:Button ID="btnFind" Text = "Localiser" runat="server" CssClass ="button" 
                     onclick="btnFind_Click" /> 
                <input type="hidden" id="lat" name="lat" value="34.2500000" />
                <input type="hidden" id="lng" name="lng" value="-6.5833330" />
                <div id="button1" class="button" onclick="findPlaces(); return false;">Toutes les stations</div>
                <asp:Button id="btnImg" cssclass="button" Text="To Image" runat="server" 
                     onclick="btnImg_Click" />                
             </div>   
             </form>
             <img src="http://maps.googleapis.com/maps/api/staticmap?center=-15.800513,-47.91378&zoom=11&size=200x200&sensor=false" alt="xxxx"/>
        </div>
    </body>

07/05/2014, 16h20
Immobilis

ScriptManager est à utiliser pour faire de l'AJAX. J'avoue ne l'avoir jamais utilisé autrement. Je ne sais pas ce que cela donne sans un Updatepanel. Or ta page n'a pas d'UpdatePanel.

Citation:

Envoyé par Msysteme

geocoder.geocode({ 'address': 'N1...' }, a l'interieur de la fonction js ca marche

Mets un point d'arrêt sur cette ligne de ta fonction javascript. Normalement, tu devrais t'arrêter dessus. Ensuite vérifie la valeur de "adresse" et communique la nous.

J'ai réussi a appeler la fonction avec un parametre en mettant ceci:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
private string adresseStation()
    {
        System.Data.SqlClient.SqlDataReader oDBDataReader;
 
        String Query = "SELECT * FROM [StationsServices] where ID_Station =" + ddlAdr.SelectedValue;
        String adresse = "kenitra";
        connection.Open();
        SqlCommand cmdDatabase = new SqlCommand(Query, connection);
        oDBDataReader = cmdDatabase.ExecuteReader();
 
        while (oDBDataReader.Read() == true)
        {
            adresse = oDBDataReader["Adresse"].ToString();
        }
        connection.Close();
 
        return adresse;
    }
 
 
    protected void btnFind_Click(object sender, EventArgs e)
    {
        String adresse = adresseStation();
 
        btnFind.Attributes.Add("onClick", "javascript:findAddress('" + adresse + "'); return false;");
    }

Je passe bien mon adresse a la fonction et je recois mon marker

Mais je recois toujours la meme adresse, si je cherche a marker le premier element dans le drop down je marque pour tous les autre la meme adresse, idem si je cherche le 2eme ....

Si je met un point d'arret a l'interieur du bouton, je remarque le programme s'arrete une seul fois pas a chaque click

le probleme est dans mon drop down peut etre ? le postback est il obligatoire ?

Mon programme est fou :D

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
function findAddress(adresse) {
 
    var address = adresse;  
 
    // script uses our 'geocoder' in order to find location by address name
    geocoder.geocode({ 'address': address }, function(results, status) {
        if (status == google.maps.GeocoderStatus.OK) { // and, if everything is ok
 
            // we will center map
            var addrLocation = results[0].geometry.location;
            map.setCenter(addrLocation);
 
            // store current coordinates into hidden variables
            document.getElementById('lat').value = results[0].geometry.location.$a;
            document.getElementById('lng').value = results[0].geometry.location.ab;
 
            // and then - add new custom marker
            var addrMarker = new google.maps.Marker({
 
                position: addrLocation,
                map: map,
                title: results[0].formatted_address
            });
        } else {
            alert('Geocode was not successful for the following reason: ' + address);
        }
    });

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
   <div id="container" class="container">
             <div id="gmap_canvas"></div>
             <form id = "searchStation" method="post" runat ="server"> 
             <div class="actions">
                <div class="button">
                <asp:ScriptManager ID="ScriptManager1"  EnablePageMethods="true" EnablePartialRendering="true" runat="server" />
 
                <label for="gmap_where">Station de service :</label>
 
               <asp:DropDownList ID="ddlAdr" runat="server" DataSourceID="SDSStation"
                                    DataTextField="Name_Station" DataValueField="ID_station" AutoPostBack="true">
               </asp:DropDownList>
                <asp:SqlDataSource ID="SDSStation" runat="server" ConnectionString="<%$ ConnectionStrings:XXX %>"
                                    SelectCommand="SELECT * FROM [StationsServices] order by Name_station asc"></asp:SqlDataSource>
 
                </div>
                <div id="btnClear" class="button" onclick="findAddress(); return false;">Clear All</div>
                <div id="button2" class="button" onclick="findAddress('N1,kenitra'); return false;">Chercher</div>
                <asp:Button ID="btnFind" Text = "Localiser" runat="server" CssClass ="button" 
                     onclick="btnFind_Click" /> 
                <input type="hidden" id="lat" name="lat" value="34.2500000" />
                <input type="hidden" id="lng" name="lng" value="-6.5833330" />
                <div id="button1" class="button" onclick="findPlaces(); return false;">Toutes les stations</div>
                <asp:Button id="btnImg" cssclass="button" Text="To Image" runat="server" 
                     onclick="btnImg_Click" />                
             </div>   
             </form>
             <img src="http://maps.googleapis.com/maps/api/staticmap?center=-15.800513,-47.91378&zoom=11&size=200x200&sensor=false" alt="xxxx"/>
        </div>

08/05/2014, 20h47
Msysteme

Bonjour, j'ai pu resoudre le probleme, j'arrive a appeler la fonction javascript via le code behind en ajoutant le btn.attribute.add....