WEBSERVICES + AJAX = UNE BONNE MÉTHODE POUR BANIR L'AUTOPOSTBACK ET AUGMENTER LA PERFORMANCE DE VOS PAGES

/// <summary>
/// Description du WebService qui va récupérer les options du 2eme DDL
/// PS: lors de la création du webService via Visual Studio, ajouté à la main le ///[System.Web.Script.Services.ScriptService]
/// </summary>
[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
[System.Web.Script.Services.ScriptService]
public class GetDDL2Options : System.Web.Services.WebService {

    public GetDDL2Options () {

        //Supprimez les marques de commentaire dans la ligne suivante si vous utilisez des composants conçus 
        //InitializeComponent(); 
    }

    [WebMethod]
    public string[] GetListOptionsDDL2(int iIDOptionDDL1)
    {             
        //PS : le DDL1 contient des objetcs que je nommerais oDDL1Object
        // de même le DDL 2 : oDDL2Object
        oDDL1Object o_DDL1 = new oDDL1Object();
        List<string> items = new List<string>();
        o_DDL1.ID = iIDOptionDDL1;
        //DDL2DB : classe de app_Code, qui interfere avec la Data Base afin de 
        // récupérer les objects en base de la DDL2 correspondant à un object
        // de la DDL1 (il existe une clé étrangère)
        ArrayList o_DDL2ObjectList = DDL2DB.GetDDL2ObjectsListForDDL2Object(o_DDL1);
        foreach (oDDL2Object oddl2 in o_DDL2ObjectList)
        {
            items.Add(oddl2.ID.ToString());
        }

        return items.ToArray();
    }
    
}

//Sur la page aspx il faut absolument insérer le ScriptManager de la façon suivante :

<asp:ScriptManager ID="ScriptManager1" runat="server">
        <Services>
            <!-- remplacez par le chemin de votre WebService -->
            <asp:ServiceReference Path="~local/GetDDL2Options.asmx" />
        </Services>
    </asp:ScriptManager> 

//à insérer dans la page concerné : 
<script type="text/javascript" language="javascript">
function GetDDL2ObjectsServiceJS()
       {
        var webServicePath='~local/GetDDL2Options.asmx';
        var webMethod='GetListOptionsDDL2';
        var iId1 = $get('<%=ddl_1.ClientID %>').selectedIndex;
        Sys.Net.WebServiceProxy.invoke(webServicePath, 
            webMethod, false,{"iIDOptionDDL1" : iId1}, OnSucceeded, 
            OnFailed,"User Context",1000000);

        }

        function OnSucceeded(result, eventArgs)
        {   
            // on ajoute                                                         
            AddItem('<%=ddl_2.ClientID%>',result,result);                                    
        }

        // le web service echoue.
        function OnFailed(error)
        {
            // affiche l'erreur.
            //lbl2 erreur permet juste de visualiser l'erreur    
            var RsltElem = document.getElementById("lbl2Error");
            RsltElem.innerHTML = "WebService Error: " + error.get_message();
        }
       
       //KD 22/04/2009 - Permet d'ajouter un element un une dropdownlist existante 
       function AddItem(DDL,Text,Value)
        {   
            var lg = 0;                                                               
            lg = document.getElementById(DDL).length;                                                                  
            var i=0;            
            var reg = new RegExp("[,;]+", "g");
            var tableauDDL2 = Text.toString().split(reg); 
            
            //On remet a zero la taille du select puis on ajoute une option vide
            document.getElementById(DDL).length = 0;
            var opt = document.createElement("option");                                                                                                        
                    document.getElementById(DDL).options.add(opt);
                    opt.text = "";
                    opt.value = "";
            
            
                                                                                                                                             
            for (var j=0; j<tableauDDL2.length; j++) {
                    var opt = document.createElement("option");                                                                                                        
                    document.getElementById(DDL).options.add(opt);
                    opt.text = tableauDDL2[j];
                    opt.value = tableauDDL2[j];                    
                                                        }                                                                                     
        }
        
        //Fonction récupérant la valeur de l'option du DDL2 sélectionné
        function RecupIDDDL2() {
           var iId2 = document.getElementById("ddl_2").value;
           //un champ caché permet de récupérer la valeur sélectionné 
           // dans le 2eme DDL pour le récupérer lors de la validation
           // du formulaire
           $('hf_idDDL2').value = iId2;
        }
</script>

//Dernière chose : entourer votre première DDL par un TD et sur son onClick appelé la //fonction  JS :
<td onclick="GetDDL2ObjectsServiceJS();">DDL1 *
                            <asp:DropDownList ID="ddl_1" runat="server">
                            </asp:DropDownList>                            
                                                                                                                                            
</td>

//Le ddl_2, le lbl2Error et le champ caché :
//PS : le DropDownList est au faite un select (c'est plus adapté qu'un composant .NET)
<td>DDL2 *
      <select id="ddl_Sillons" name="ddl_2" runat="server" onclick="RecupIDDDL2()">
      </select>                                    
      <input type="hidden" name="hf_idDDL2" id="hf_idDDL2" runat="server" />
      <asp:Label ID="lbl2Error" runat="server"></asp:Label>     
</td>