[AJAX] Evénement KeyUp sur asp:TextBox qui rend résultat avec Ajax

Version imprimable

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:

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:

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?

18/04/2015, 15h30
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.

Salut NoSmoking,

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

Code:

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

et aussi

Code:

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:

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:

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??

Problème résolu

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:

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:

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:

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>