Client Ajax pour ADO.Net data Services (opération SELECT)

Le but de ce mini post est de montrer qu'il est possible de faire rapidement une page Ajax contenant une dropdown qui se remplit lorsqu'on le souhaite via une requête sur le "service" ADO.Net que l'on a créé dans les précédents posts !. Ce type de développement offre de belles perspectives et va réduire la taille du viewstate & le nombre de ko transféré en POST au serveur ... Que du positif pour l'optimisation du site web !

1°) La première étape est de créer une simple page asp.Net avec la dropdown et le code javascript vide d'appel lors du click sur le bouton. C'est lors de ce clic que l'on chargera la dropdown !

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Page de démo</title>
 
    <script type="text/javascript" language="javascript">
        function ChargePays() {
        }
    </script>
 
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <select id="cbPays">
        </select>
        <br />
        <input id="fillPays" type="button" value="Charge les pays" onclick="ChargePays();" />
    </div>
    </form>
</body>
</html>

2°) La seconde étape consiste à remplir le code HTML du body en y ajoutant les références aux fichiers JS !

<body>
    <form id="form1" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server">
        <Scripts>
            <asp:ScriptReference Path="MicrosoftAjax.js" />
            <asp:ScriptReference Path="MicrosoftAjaxTemplates.js" />
            <asp:ScriptReference Path="MicrosoftAjaxAdoNet.js" />
        </Scripts>
    </asp:ScriptManager>
    <div>
        <select id="cbPays">
        </select>
        <br />
        <input id="fillPays" type="button" value="Charge les pays" onclick="ChargePays();" />
    </div>
    </form>
</body>

3°) La troisième étape consiste à implémenter la logique de réquêtage du service ADO.NET (astoria).

<script type="text/javascript" language="javascript">
    function ChargePays() {
      var dataService = new Sys.Data.AdoNetServiceProxy("WebDataServiceAstoria.svc");
      dataService.query("Pays", ExecutionReussite, ExcutionEchec);
    }
 
    function ExecutionReussite(result, context, operation) {
    }
 
    function ExcutionEchec(error, context, operation) {
      alert(error);
    }
</script>

4°) La quatrième étape consiste à remplir la dropdown avec les valeurs récupérées via le service

<script type="text/javascript" language="javascript">
    function ExecutionReussite(result, context, operation) {
      if (result != null) {
        var select = $get("cbPays");
        select.length = 0;
        for (i = 0; i < result.length; i++) {
          select.options.add(new Option(result[i].Nom, result[i].ID));
        }
      }
    }
</script>

5°) Voici le résultat final du code implémenté !

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Page de démo</title>
 
    <script type="text/javascript" language="javascript">
        function ChargePays() {
            var dataService = new Sys.Data.AdoNetServiceProxy("WebDataServiceAstoria.svc");
            dataService.query("Pays", ExecutionReussite, ExcutionEchec);
        }
 
        function ExecutionReussite(result, context, operation) {
            if (result != null) {
                var select = $get("cbPays");
                select.length = 0;
                for (i = 0; i < result.length; i++) {
                    select.options.add(new Option(result[i].Nom, result[i].ID));
                }
            }
        }
 
        function ExcutionEchec(error, context, operation) {
            alert(error);
        }
    </script>
 
</head>
<body>
    <form id="form1" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server">
        <Scripts>
            <asp:ScriptReference Path="MicrosoftAjax.js" />
            <asp:ScriptReference Path="MicrosoftAjaxTemplates.js" />
            <asp:ScriptReference Path="MicrosoftAjaxAdoNet.js" />
        </Scripts>
    </asp:ScriptManager>
    <div>
        <select id="cbPays">
        </select>
        <br />
        <input id="fillPays" type="button" value="Charge les pays" onclick="ChargePays();" />
    </div>
    </form>
</body>
</html>

Et en images !

Avant la requête:

ajax_avant.png

Après la requête: ajax_apres.png

6°) Conclusion

Ce petit post montre combien il est simple d'implémenter ce type de récupération en quelques minutes. Cette démonstration a été réalisée sous ASP.NET Ajax Preview 4. Elle ne fonctionnera pas avec les preview précédentes. En effet, les noms des classes JS pour requêter Astoria ont un peu changé.

Ajouter un commentaire

Le code HTML est affiché comme du texte et les adresses web sont automatiquement transformées.

Fil des commentaires de ce billet

Page top