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

Soyez le premier à donner votre avis sur cette source.

Snippet vu 7 264 fois - Téléchargée 15 fois

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

Ajouter un commentaire

Commentaires

cs_driver
Messages postés
7
Date d'inscription
jeudi 3 avril 2003
Statut
Membre
Dernière intervention
7 janvier 2011
12 -
Merci Billou13 pour ta contribution critique, je te rejoint tout à fait, je n'est plus aucun commentaire à ajouter aprés une longue journée de travail. Bon week end à vous tous
billou_13
Messages postés
874
Date d'inscription
jeudi 4 mars 2004
Statut
Membre
Dernière intervention
19 août 2014
15 -
@LASSAAD83:

En effet, il est vrai que l'UpdatePanel comble le même besoin. Plus facile à coder, peut-être; mais permet-il d'augmenter la performance de la page ???
Je n'en suis pas si sûr...

Un simple test de cette source et d'une source équivalente avec l'UpdatePanel te permettra de remarquer que le flux réseau (avec firebug sous firefox) de rafraichissement de ta page est largement plus conséquent avec un UpdatePanel. En effet, ce dernier emporte énormément d'information avec lui qui ne sont pas toutes pertinentes.
Et je dirai même plus, si tu fais un test avec un simple postback (sans UpdatePanel) de ta page te montrera que tu n'es pas loin du flux de l'UpdatePanel.
Voici quelques liens:
- http://encosia.com/2007/07/11/why-aspnet-ajax-updatepanels-are-dangerous/
- http://msdn.microsoft.com/fr-fr/magazine/cc163413.aspx

C'est pourquoi je pense que la solution proposée par Driver fait partie des bonnes pratiques que j'essaie toujours de mettre en place dans mes projets.

Donc, OUI, je vote pour cette solution plutôt que pour un UpdatePanel (qui n'a pas de raison d'être pour ma part)...
lassaad83
Messages postés
148
Date d'inscription
vendredi 28 avril 2006
Statut
Membre
Dernière intervention
1 décembre 2009
-
UpdatePanel ça te dit quelque chose ?
cs_ClaudePelletier
Messages postés
3
Date d'inscription
vendredi 10 juillet 2009
Statut
Membre
Dernière intervention
4 août 2009
-
Cher Driver,

Je ne puis que te donner raison. ;-)
cs_driver
Messages postés
7
Date d'inscription
jeudi 3 avril 2003
Statut
Membre
Dernière intervention
7 janvier 2011
12 -
t'as pas tord Claude Pelletier,
mais chaque méthode dispose d'un périmètre d'utilisation, il faut juste bien définir les priorité de chaque application et les besoins de chaque client...chaque application devient unique et c'est pour ça qu'on dispose toujours de boulo dans notre domaine et heureusement d'ailleurs :)

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.