Webservices + ajax = une bonne méthode pour banir l'autopostback et augmenter la performance de vos pages

Commenter

Contenu du snippet

Une expérience que j'aimerais partager avec vous c'est celle de devoir supprimer un AutoPostBack sur une première DropDownList (DDL) qui fesait en sorte de remplir une autre DropDownList selon le choix de la première (il existe un lien 1 -> 0-N : c'est à dire que le faite de sélectionner une option dans le premier DDL généré 0 ou N options sur le 2eme DDL)

Source / Exemple :

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

Conclusion :

Le contenu du code n'est pas une partie de plaisir mais il reste indispensable pour les alliés de la performance.

A voir également

S'inscrire maintenant

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.

Du même auteur (cs_driver)