DropDownLists dans un UpdatePanel (EnableViewState des DropDownLists = False)

Version imprimable

27/10/2010, 10h31
Johann7751

DropDownLists dans un UpdatePanel (EnableViewState des DropDownLists = False)

Bonjour,

Dans ma page, j'ai un UpdatePanel qui contient deux DropDownLists. Appelons les ddlA et ddlB.
Mon UpdatePanel a sa propriété UpdateMode à 'Conditionnal'.
Pour des problèmes de performances, (trop de données dans le ViewState), j'ai dû mettre la propriété EnableViewSate de ddlA et ddlB à 'false'.
La propriété AutoPostBack de ddlA est à 'True'.
Ce qu'il faut savoir en plus c'est que le changement d'index dans ddlA déclenche le chargement de données dans ddlB en fonction de cet index.

Dans mon code actuellement, j'essaye d'utiliser l'évènement OnLoad de mon UpdatePanel, pour effectuer mes traitements c'est à dire :

1. Chargement des données de ddlA
2. Récupération de l'index sélectionné précédemment dans ddlA (que j'ai sauvegardé avant dans un champ caché)
3. Chargement des données dans ddlB en fonction de cet index sélectionné dans ddlA

Ce que je pensais, c'est que l'évènement SelectdIndexChanged de ddlA serait déclenché AVANT le Load de mon UpdatePanel mais non en fait l'évènement SelectedIndexChanged de ddlA n'est même pas déclenché.

Donc mon problème est que je ne peux pas récupérer l'index sélectionné dans ddlA pour charger les données dans ddlB.

Mes questions sont :
=> Est ce que ma façon d'implémenter la chose vous semble correcte ? Est ce que j'utilise les bons Evènements ?

=> Comment capter l'évènement SelectedIndexChanged de ddlA avant de rentrer dans l'évènement Load de mon UpdatePanel ?

=> Si cela vous semble incorrect comment implémenteriez cela pour résoudre ma problématique (rappel : mes DropDownList ne peuvent pas utiliser le ViewState)
27/10/2010, 11h05
lutecefalco

C'est le ViewState qui permet de détecter un chgt d'index sélectionné et donc de déclencher l'événement OnSelectedIndexChanged.

Je pense que si tu regardes la valeur de champ caché dans le Page_Load, tu dois pouvoir t'en sortir
27/10/2010, 13h05
Johann7751

J'ai jamais encore trop étudier le ViewState.

J'ai essayer 2-3 trucs et en fait j'arrive pas à y accéder dans mon évènement Page_Load.
Je fais :

Code:

StateBag sb = ViewState;

En debug, il est vide, aucune valeur.

Est ce que j'y accède correctement ?
Est ce normal que le ViewState soit vide dans l'évènement Load de la page ?

De plus, j'ai peut être mal compris ce que tu voulais dire, mais mon problème n'est pas résolu dans le sens où je n'ai aucun évènement pour accéder à la valeur sélectionnée de ddlA et par extension pouvoir la sauvegarder dans un champ caché par exemple..

[EDIT]
=> Lu dans MSDN pour l'event SelectedIndexChanged :

Citation:

Un contrôle de liste doit persister certaines valeurs entre les publications sur le serveur pour que cet événement fonctionne correctement.Assurez-vous que l'état d'affichage du contrôle de liste est activé.

Voilà maintenant je comprends mieux ce que tu voulais me dire. Le fait de mettre EnableViewState à 'false' pour ma DropDownList désactive l'évènement SelectedIndexChanged.

Du coup, je vois pas comment récupérer la valeur SelectedValue de ddlA, donc je ne peux pas m'en servir pour charger les données dans ddlB.
Je continue de chercher mais pour l'instant mon problème est insoluble .
[/EDIT]

.
27/10/2010, 14h05
lutecefalco

Tu dois réactiver le ViewState.
Si tu dis que ta ddl provoque un ViewState trop volumineux, c'est que ta ddl doit contenir énormément de valeurs (c'est pas très user friendly). Tu devrais découper en plusieurs sous ddl
29/10/2010, 18h39
Johann7751
Après avoir réfléchi pas mal de temps sur ma problématique avec quelqu'un avec beaucoup plus d'expérience que moi, on a finalement trouvé un moyen de résoudre mon problème.
J'insiste sur le fait que la solution permet de mettre le EnableViewState à 'false', le ViewState étant ma source de problème dans ce cas.

J'essaierais de poster une réponse plus détaillée plus tard mais en gros, j'ai utiliser :
- du javascript,
- un service web (asmx),
- l'évènement client 'onchange' sur ma dropDownList (ddlA),
- des champs cachés HTML
- Convertir ma seconde dropDownList (ddlB) en contrôle HTML client => en gros un 'select' tout en la laissant runat="server"

ddlA est une dropDownList, contrôle serveur classique
ddlB est un contrôle client mais runat="server"

2 fonctions javascript à écrire :
-> JavaScriptFonction (=> votre fonction)
-> OnEndRequest
-> + facultatif (OnError)

Ici j'ai pas tout compris mais je vais essayer d'expliquer le mieux possible : OnEndRequest est une fonction javascript qui sera appelée automatiquement après la fonction javascript JavaScriptFonction.
Dans cette fonction, on peut utiliser un paramètre, 'result' qui contient le résultat de ce que m'a retourné la fonction de mon WebService WebServiceFonction (voir ci-dessous).
C'est dans cette fonction OnEndRequest que je peux peupler ma ddlB.
=> je dois encore travailler cette partie car je n'ai pas totalement compris le principe de fonctionnement.

Le principe :

Ma ddlA est peuplée au 1er chargement de la page (Requête en base de données + binding). La liste de données est sauvegardée à ce moment en variable de session.

On a attribué l'évènement client 'onchange' à ddlA (dans la page aspx).
Cet évènement appelle une fonction Javascript (écrite dans la page aspx).
Appelons cette fonction Javascript JavaScriptFonction.
Code:

1 2 <asp:DropDownList ID="ddlA" runat="server" ... EnableViewState="false" onchange="JavaScriptFonction(this.value)" ..
Le fait de changer de valeur dans ddlA va activer l'évènement 'onchange', JavaScriptFonction est appelée avec comme paramètre la valeur de la propriété 'SelectedValue' de ddlA.

Dans JavaScriptFonction, on renseigne la valeur d'un champ caché HTML, avec le paramètre de la-dite fonction.
Puis, dans cette fonction JavaScript, on peut appeler une fonction d'un WebService. Appelons la fonction de mon WebService WebServiceFonction. C'est donc ce que je fait : ma JavaScriptFonction appelle ma WebServiceFonction avec comme paramètre la valeur de SelectedValue de ma DropDownList.

Dans mon WebService, la fonction appelée est capable de récupérer la liste des valeurs qu'il doit y avoir dans ddlB en fonction de la SelectedValue récupérée dans ddlA.
Cette fonction retourne une liste d'objets qui serviront au peuplement ma ddlB.

A la fin de ma JavaScriptFonction, OnEndRequest est appelée. C'est dans cette fonction que je peux peupler ddlB (qui je le rappelle est un contrôle select client HTML.)
Dans OnEndRequest, on peut utiliser un paramètre, 'result' qui contient le résultat la fonction que j'ai appelé dans mon WebService (résultat = la liste d'objets pour peupler ddlB)
Grâce à ce paramètre, cette fonction va peupler ddlB.

Dans l'évènement Page_Load de ma page, quand on est dans un postback :

Code:

if (!IsPostBack)

=> Il faut repeupler à chaque fois ddlA puisque son EnableViewState est à 'false'
On repeuple à chaque fois ddlA grâce soit à une requête en base de données, soit grâce à la liste que j'ai sauvegardé dans une variable de session au 1er chargement de la page.
On utilise également la valeur dans le champ caché (je rappelle que la valeur contenue dans le champ caché a été défini dans la fonction javascript) pour définir la SelectedValue de ddlA.

Voilà en gros comment j'ai fait.
Pour l'instant c'est pas forcément clair, je vais essayer d'étayer mes propos avec des exemples de code plus tard.
Mais bon j'ai réussi, je ne me trimballe plus le ViewState de la dropDownList, dans mon cas j'économise 4sec à chaque postback !!
29/10/2010, 18h52
lutecefalco

Tu passes par de l'ajax quoi
29/10/2010, 23h48
calagan99

Pour ce qui est du viewstate, jette un coup d'oeil à ce diagramme, tu y trouveras le cycle de vie d'une page asp.net.

C'est une bonne chose que de l'avoir en tête.

Comme je l'avais dit, je vais mettre ici quelques exemples de code que j'ai utilisé pour résoudre ce problème.
J'espère que ça pourra servir à d'autres :

aspx : Code de ddlA et ddlB ainsi que des champs cachés utilisés

Code:

1
2
3
4
5
6
7
8
<asp:DropDownList ID="ddlA" EnableViewState="false" runat="server" onchange="SaveSelectedArticleAndGetListOfGamme(this.value);"></asp:DropDownList>
 
<select id="ddlB" runat="server" disabled="disabled" onchange="SaveSelectedGamme(this.value);">
       <option></option>
</select>
 
<asp:HiddenField ID="hiddenIdArticle" runat="server" />
<asp:HiddenField ID="hiddenIdGamme" runat="server" Value="0" />

aspx : fonctions javascript utilisées

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
<script type="text/javascript" language="javascript">
 
        function SaveSelectedArticleAndGetListOfGamme(IdArticle) {
 
            document.getElementById('<%= hiddenIdArticle.ClientID %>').value = IdArticle;
            MyWebService.GetGammeByIdArticle(IdArticle, OnRequestComplete, OnError);
        }
 
        function SaveSelectedGamme(IdGamme) {
            document.getElementById('<%= hiddenIdGamme.ClientID %>').value = IdGamme;
        }
 
        function OnRequestComplete(result) {
 
            var lstRanges = $get("<%= ddlB.ClientID %>");
            lstRanges.innerHTML = "";
 
            if (result.length > 0) {
                lstRanges.disabled = false;
 
                var option = document.createElement("option");
                option.value = 0;
                option.innerHTML = " --- Selectionner une gamme ---";
                lstRanges.appendChild(option);
 
                for (var n = 0; n < result.length; n++) {
 
                    var option = document.createElement("option");
                    option.value = result[n].idGamme;
                    option.innerHTML = result[n].libGamme;
                    lstRanges.appendChild(option);
                }
            }
            else {
                lstRanges.disabled = true;
            }
        }
 
        function OnError(result) {
            alert("Erreur !");
        }
    </script>

aspx.cs : évènement : Page_Load : peuplement de ddlA au 1er chargement de la page et lors des PostBack re-peuplement de ddlA et ddlB

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
protected void Page_Load(object sender, EventArgs e)
        {
            if (!IsPostBack) /* ON PASSE ICI UNIQUEMENT AU 1ER CHARGEMENT DE LA PAGE */
            {
 
                List<Article> a_listcArticles = new List<Article>();
 
                // Récupération de la liste des articles en base de données
                // Sauvegarde de la liste des articles dans une variable de session
 
                ddlA.DataSource = a_listArticles;
                ddlA.DataValueField = "idArticle";
                ddlA.DataTextField = "libArticle";
                ddlA.DataBind();
            }
             else /* POSTBACK : La page est rechargée */
            {
 
                #region  A. Peuplement de la dropDownList des articles (ddlA)
 
                // La dropDownList  des Articles a sa propriété 'EnableViewState' à 'False'.
                // Cela signifie que son état n'est pas sauvegardé entre chaque PostBack : ==> Il faut donc la repeupler à chaque PostBack.
 
                // 1.
                List<Article> a_listArticles = new List<Article>();
 
 
                // 2. Ajout de tous les Articles dans la liste grâce à une variable de session : 'sessionListArticles'.
                // La liste des Articles a été sauvegardée dans la variable de session lors du 1er chargement de la page.
                a_listOscaroGenericArticle.AddRange(sessionListArticles);
 
                // 3. On bind les données
                ddlA.DataSource = a_listArticles;
                ddlA.DataValueField = "idArticle";
                ddlA.DataTextField = "libArticle";
                ddlA.DataBind();
 
                // 4. On définit quelle valeur est sélectionnée dans la dropDownList
 
                ddlA.SelectedValue = hiddenIdArticle.Value;
 
                #endregion
 
                #region  B. Peuplement de la dropDownList des gammes (ddlB)
                if (!string.IsNullOrEmpty(hiddenIdArticle.Value))
                {
                    // Note : 'ddlB' est un objet HTML (pas un contrôle serveur) , mais qui est runat="server"
                    // 1.
                    List<Range> a_listRanges = new List<Range>();
 
 
                    // 2. Récupération en base de données des gammes associées à l'article  sélectionné
                    // => Récup en base ...
 
                    // 3. On bind les données
                    ddlB.DataSource = a_listRanges;
                    ddlB.DataValueField = "idGamme";
                    ddlB.DataTextField = "libGamme";
                    ddlB.DataBind();
 
                    // 4. On définit quelle valeur est sélectionnée dans la dropDownList
                    // hiddenIdGamme est un contrôle HTML simple. C'est champ caché.
 
                    ddlB.Value = hiddenIdGamme.Value;
 
                    // 5. Activation de la dropDownList des gammes 
                    ddlB.Disabled = false;
                }
        }

MyWebService.cs : Méthode appelée par la fonction javascript 'SaveSelectedArticleAndGetListOfGamme' et qui retourne une liste de gammes associées à l'article passé en paramètre.
La liste de gammes récupérées est ensuite récupéré dans le paramètre result de la fonction javascript 'OnRequestComplete'.

Code:

1
2
3
4
5
6
7
8
9
10
 [WebMethod(EnableSession = true)]
   public List<Range> GetGammeByIdArticle(short IdArticle)
   {
       List<Range> a_listRanges = new List<Range>();
 
       // Récupération en base de données de la liste des gammes associées à l'article
 
       return a_listRanges;
 
   }

Vous remarquez que dans la fonction javascript 'SaveSelectedArticleAndGetListOfGamme', on appelle le WebService :

Code:

MyWebService.GetGammeByIdArticle(IdArticle, OnRequestComplete, OnError);

Lors de cet appel, on passe en paramètre 'OnRequestComplete' et 'OnError'.
'OnRequestComplete' est la fonction de retour et OnError est la fonction appelée en cas d'erreur.