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é.