Comment afficher une table de la base de données sql server à l'aide des webservices, Ajax et jquery mobile

Je suis en train de développer une solution pour l'affichage d'une table de la base de données SQL server en jquery mobile avec utilisation de webservices
Voilà le code du webservice

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
[WebMethod]
        [ScriptMethod(ResponseFormat = ResponseFormat.Json, UseHttpGet = true)]
 
        public List<Flotte> GetFlotte()
        {
            string strQuery = "SELECT imsi,type FROM Flotte";
            DataTable dtRecipie = null;
            Flotte objFlotte;
            ConnectionStringSettings connection = ConfigurationManager.ConnectionStrings["Connection"];
            SqlConnection maConnexion = new SqlConnection(connection.ConnectionString);
 
 
            using (maConnexion)
            {
                maConnexion.Open();
                using (SqlDataAdapter sqlAdapter = new SqlDataAdapter(strQuery, maConnexion))
                {
                    dtRecipie = new DataTable();
                    sqlAdapter.Fill(dtRecipie);
                }
            }
            List<Flotte> drlist = new List<Flotte>();
            foreach (DataRow row in dtRecipie.Rows)
            {
                objFlotte = new Flotte();
                objFlotte.imsi = row["imsi"].ToString();
                objFlotte.type = row["type"].ToString();
 
                drlist.Add(objFlotte);
            }
            return drlist;
        }

et voilà mon code jquery mobile

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
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
<DOCTYPE html>
	<head>
		<title>Login</title>
 
		<meta name="viewport" content="width=device width,initial-scale=1">
		<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0-beta.1/jquery.mobile-1.3.0-beta.1.min.css" />
	<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
	<script src="http://code.jquery.com/mobile/1.3.0-beta.1/jquery.mobile-1.3.0-beta.1.min.js"></script>
     <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
    <script type="text/javascript">
        function CallService() {
            $.ajax({
                type: "POST",
                url: "MyService.asmx/GetFlotte",
                data: "{}",
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: OnSuccess,
                error: OnError
            });
        }
 
        function OnSuccess(data,status) {
             for (var i = 0; i < data.d.length; i++) {
           $("#GridID").append("<tr><td>" + data.d[i].imsi+ "</td><td>" + data.d[i].type + "</td></tr>")
            }
 
 
 
 
 
        function OnError(request, status, error) {
            alert('erreur');
        }
 
    </script>
 
   </head>
   <body>
   <div data-role="page" id="Home">
      <div data-role="header" data-theme="b" >
         <h1>Espace Admin: Gestion de flottes</h1>
      </div>
      <div data-role="content">
        <h3 style="text-align:center;"><img src="/img/Maptek.png"  alt="le logo de maptek maroc" width="300" height="50" /></h3>
        <p>Bienvenue dans la section de gestion de flottes!</p>
        <ul data-role="listview" data-inset="true">
        <li><a href="#Affichage" data-transition="slide">Affichage de la flotte</a></li>
        <li><a href="#" data-transition="slide">Modification de la flotte</a></li>
        <li><a href="#" data-transition="slide">Ajout de device</a></li>
        <li><a href="#" data-transition="slide">Suppression de la flotte ou device</a></li>
        </ul>
        </div>
 
        <div  data-role="footer" role="contentinfo" data-theme="b" >
        <h4 class="center">Powered by Jquery Mobile</h4>
        </div> 
         </div>
         <div data-role="page" id="Affichage">
         <div data-role="collapsible-set">
         <div data-role="collapsible" data-content-theme="d">
         <h3>Utilisateur1</h3>
         <div class="margesinternes">
         <p>
       <div class="ui-grid-a" id="GridID">
          <div class="ui-block-a">
          <p> </p>
 
          </div>
          <div class="ui-block-b">
          <p> </p>
          </div>
       </div><!-- /grid-a -->
         </p>
         </div>
   </div>
   <div data-role="collapsible" data-content-theme="d">
      <h3>utilisateur2</h3>
         <div class="margesinternes">
         <p>Google est un organisme vivant...</p>
         </div>
   </div>
 
 
</div>
 </div>
 
</body>
</html>

en fait j'ai essayé d'utiliser une grille de jquerymobile pour récupérer la liste envoyé par le webservice , malheureusement ça marche pas. Merci de me rectifier ce code.