Discussion :

[Toufik83]

bonjour,

je viens de débuter en c# et je voudrais savoir s'il est possible de récupérer le résultat d'une requête SqlServer avec Ajax.
j'ai crée ma fonction Ajax et j'ai crée aussi ma fonction [WebMethod] Afficher() (code behind).

voila le code c#

Code c# :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
public static GridView Afficher(string data,string prenom)
    {
        SqlConnection conn = new SqlConnection("Data Source=MONORDINATEUR\\SAM;Database=Base_2eme_Tache;User ID=sa;Password=sam");
        DataSet Grille = new DataSet();
        GridView Grid = new GridView();
        conn.Open();
        SqlDataAdapter dataadapter = new SqlDataAdapter("select * from categorie where titre_cat like '"+data.ToString()+"%' ", conn);
        dataadapter.Fill(Grille);
        Grid.DataSource = Grille;
        Grid.DataBind();
        conn.Close();
        return Grid; 
 
 
      //return "Bonjour je suis venu Via AJAX "+ DateTime.Now.ToString ()+" Data : "+data.ToString()+" Prenom : "+prenom;
    }

puis le code Ajax

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
$("#txtrech").live("keyup", function () {
 
            //alert("coucou");
            var envoie = { data : $("#txtrech").val(), prenom : "xxxxxxx" }
            $.ajax({
                type: "POST",
                url: "Default.aspx/Afficher",
                data: JSON.stringify(envoie),
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (msg) {
                    alert("Sucesssssss");
                    document.getElementById("affichage").innerHTML = msg.d;
                },
                complete: function (msg) {
                    alert("2 COMPLETER " + msg.d + " ENVOIE : " + envoie);
                },
                error: function (msg) {
                    alert("3 ERROR " + msg.d + " ENVOIE : " + envoie);
                }
 
            });
            return false;
        });

si je modifie le type du retour de la fonction WebMethod Afficher() en string, je reçois bien le message et ajax passe en mode SUCESS, mais quand je modifie le type de retour en GRIDVIEW, ajax passe toujours en mode ERROR, vous pouvez m'aider s'il vous plait?

[NoSmoking]

Bonjour,
comme tu l'as déclaré ta fonction Ajax attend en retour des données au type dataType: "json", et si ce n'est pas le cas elle reçoit une erreur.

[Toufik83]

Salut NoSmoking,

Merci pour votre réponse utile, j'ai modifié le

Code javascript :

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

 contentType: "application/x-www-form-urlencoded; charset=UTF-8"

et aussi

Code javascript :

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

 dataType: "html"

et je reçois le GridView Via Ajax (mais avec faux résultat), par-ce-que la requête LIKE est ignoré et ça m'affiche tout les enregistrement de ma table Categorie.

voila l'erreur que la console Web m'affiche quand je clique sur la GridView Résultat :

Code html :

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

1
2
3
4
5
Using //@ to indicate sourceMappingURL pragmas is deprecated. Use //# instead jquery-1.10.0.min.js:1:0
L'utilisation d'XMLHttpRequest de façon synchrone sur le fil d'exécution principal est obsolète à cause de son impact négatif sur la navigation de l'utilisateur final. Consulter <a href="http://xhr.spec.whatwg.org/" target="_blank">http://xhr.spec.whatwg.org/</a> pour plus d'informations. jquery.min.js:4:0
GET 
<a href="http://localhost:49369/Styles/simplePagination.css" target="_blank">http://localhost:49369/Styles/simplePagination.css</a> [HTTP/1.1 404 Not Found 27ms]
Using //@ to indicate sourceMappingURL pragmas is deprecated. Use //# instead

puis une autre erreur que j'ai pas compris la voilà :

Code html :

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

1
2
3
 
Error: Sys.ArgumentTypeException: Impossible de convertir l'objet de type 'Sys._Application' en type 'Sys._Application'.
Nom du paramètre : instance

j'ai pas compris l'erreur, une idée peut être??

[Toufik83]

finalement j'ai trouvé la solution et j'aimerai la partager avec vous, peut être que ça pourrai servir les débutants en c# comme moi.

il fallait que le type retour de la fonction WebMethod doit être sous forme de tableau Array, puis on gère les lignes reçu dans une boucle foreach puis créer une classe (Categorie dans mon cas) comme dans le code ci-dessous

[WebMethod]

Code c# :

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

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
34
35
36
37
38
39
40
41
42
43
44
45
46
    public static Array Afficher(string data,string autrevariable)
    {
        SqlConnection conn = new SqlConnection("Data Source=MONORDINATEUR\\SAM;Database=Base_2eme_Tache;User ID=sa;Password=sam");
        DataTable dt = new DataTable();
        conn.Open();
        System.Collections.ArrayList Liste = new System.Collections.ArrayList();
        SqlDataAdapter adapter = new SqlDataAdapter("select * from categorie where titre_cat like '"+data.ToString()+"%' ", conn);
        adapter.Fill(dt);
         foreach (DataRow dtrow in dt.Rows)
                 {
                     Categorie CAT= new Categorie ();
                     CAT.Id_cat = dtrow ["Id_Cat"].ToString ();
                     CAT.Titre = dtrow ["titre_cat"].ToString ();
                     CAT.Date = dtrow["date_modif"].ToString();
                     CAT.Image = dtrow["image_cat"].ToString();
                     Liste.Add(CAT);
                 }
        conn.Close();
        return Liste.ToArray();
    }
 
protected void Page_Load(object sender, EventArgs e)
        { 
            if (! Page.IsPostBack)
                {
                    BindDummyGridrow();
 
                }
        }
      public void BindDummyGridrow()
     {
        DataTable Dt = new DataTable  ();
         Dt.Columns.Add ("Id Categorie");
         Dt.Columns.Add ("Titre");
         Dt.Columns.Add ("Date");
         Dt.Columns.Add ("Image");
         affichage.DataSource = Dt;
         affichage.DataBind ();
     }
      public class Categorie
     {
         public string Id_cat {get;  set;  }
         public string Titre {get;  set;  }
         public string Date {get;  set;  }
         public string Image {get;  set;  }
     }

et le code Ajax :

Code :

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

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
34
35
36
37
38
39
40
41
42
43
44
45
46
$("#txtrech").live("keyup", function () {
 
            if ($("#txtrech").val() != "") {
                var envoie = { data: $("#txtrech").val(), autrevariable: "ce que vous voulez.." }
                $.ajax({
                    type: "POST",
                    url: "Default.aspx/Afficher",
                    data: JSON.stringify(envoie),
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    success: function (msg) {
                        if (msg.d.length > 0) {
                            $("#affichage tr").remove();
                            for (var i = 0; i < msg.d.length; i++) {
                                $("#affichage").append("<tr> <td>" + msg.d[i].Id_cat + "</td> <td>" + msg.d[i].Titre + "</td> <td> " + msg.d[i].Date + " </td> <td> " + msg.d[i].Image + " </td> </ tr> ");
                            }
                        }
                        else {
                            $("#affichage tr").remove();
                            $("#affichage").html("<tr><td>pas de résultat</td></tr>");
                        }
                    },
                    complete: function (msg) {
                        //alert("2 COMPLETER " + msg.d + " ENVOIE : " + JSON.stringify(envoie));
                    },
                    error: function (msg) {
                        //alert("3 ERROR " + msg.d + " ENVOIE : " + JSON.stringify(envoie));
                    },
                    send: function (msg) {
                        //alert("4");
                    },
                    stop: function (msg) {
                        //alert("5");
                    },
                    start: function (msg) {
                        //alert("6");
                    }
 
                });
                return false;
            }
            else 
            {
                $("#affichage tr").remove();
            }
        });

et la page ASPX :

Code aspx :

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

1
2
3
4
5
6
<form id="form1" runat="server" >
    <asp:textbox ID="txtrech"  runat="server" ></asp:textbox>
    <asp:GridView ID="affichage" runat="server"  ShowHeaderWhenEmpty="true" AllowPaging="true"></asp:GridView>
    ......
    ....
</form>