Discussion :

[Eric555]

Bonjour,
j'ai 3 DropdownList :Imact,Urgence et Priorite.
LA DropdownList Priorite est déterminé à partir de Impact et Urgence.Par exemple si je sélectionne Moyen de Impact et Faible de Urgence ,j'aurai la valeur Faible dans la DropdownList Priorite. J'ai pas de problème au niveau de la programmation .Mon problème est que je veux éviter le postback chaque fois que je sélectionne un Item du DropdownList Impact ou bien Urgence. J'ai essayé d'utiliser un UpdatePanel, mais pas de résultat.
Voici mon code:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
 
 
<asp:DropDownList ID="Impact" runat="server" Width="220px" AutoPostBack="True" Height="25px"  onselectedindexchanged="Impact_SelectedIndexChanged"  >
  <asp:ListItem>--Sélectionner impact--</asp:ListItem>
 <asp:ListItem>Elevé</asp:ListItem>
 <asp:ListItem>Moyen</asp:ListItem>
 <asp:ListItem>Faible</asp:ListItem>
                                  </asp:DropDownList>
<asp:DropDownList ID="Urgence" runat="server" Width="220px"  AutoPostBack="True" Height="25px" onselectedindexchanged="Urgence_SelectedIndexChanged"  >
<asp:ListItem>--Sélectionner urgence--</asp:ListItem>
<asp:ListItem>Elevé</asp:ListItem>
 <asp:ListItem>Moyen</asp:ListItem>
 <asp:ListItem>Faible</asp:ListItem>
</asp:DropDownList>
<asp:UpdatePanel ID="UpdatePanel1" runat="server"  >
 
<ContentTemplate>
<asp:DropDownList ID="Priorite" runat="server" Width="220px" Height="25px" Enabled="False">
 <asp:ListItem>--Sélectionner priorité--</asp:ListItem>
<asp:ListItem>Critique</asp:ListItem>
 <asp:ListItem>Elevé</asp:ListItem>
 <asp:ListItem>Moyen</asp:ListItem>
<asp:ListItem>Faible</asp:ListItem>
<asp:ListItem>Plannification</asp:ListItem>
</asp:DropDownList>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="Urgence" EventName="SelectedIndexChanged" />
 <asp:AsyncPostBackTrigger ControlID="Impact" EventName="SelectedIndexChanged" />
</Triggers>
</asp:UpdatePanel>

Comment éviter ce postback?
Merci d'avance

[DotNetMatt]

Si tu ne veux pas de PostBack, tu dois tout faire côté client en utilisant du Javascript (jQuery).

[Eric555]

pouvez vous me donner un exemple? Je suis débutant en javascript

[DotNetMatt]

Voici un exemple. Tout d'abord j'ai remis un peu en forme ton code ASPX :

Code ASPX :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<asp:DropDownList ID="Impact" runat="server" Width="220px" Height="25px">
    <asp:ListItem Text="-- Sélectionner impact --" Value="0"/>
    <asp:ListItem Text="Elevé" Value="1" />
    <asp:ListItem Text="Moyen" Value="2" />
    <asp:ListItem Text="Faible" Value="3" />
</asp:DropDownList>
 
<asp:DropDownList ID="Urgence" runat="server" Width="220px" Height="25px">
    <asp:ListItem Text="-- Sélectionner urgence --" Value="0"/>
    <asp:ListItem Text="Elevé" Value="1" />
    <asp:ListItem Text="Moyen" Value="2" />
    <asp:ListItem Text="Faible" Value="3" />
</asp:DropDownList>
 
<asp:DropDownList ID="Priorite" runat="server" Width="220px" Enabled="False">
    <asp:ListItem Text="-- Sélectionner urgence --" Value="0"/>
    <asp:ListItem Text="Critique" Value="1" />
    <asp:ListItem Text="Elevé" Value="2" />
    <asp:ListItem Text="Moyen" Value="3" />
    <asp:ListItem Text="Faible" Value="4" />
    <asp:ListItem Text="Plannification" Value="5" />
</asp:DropDownList>

Ensuite pour jQuery, il faut d'abord inclure dans la balise HEAD le fichier nécessaire (que j'ai pris depuis le CDN de Microsoft) :

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

<script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.9.0.min.js"></script>

Enfin, voici le code de la logique à implémenter :

Code JAVASCRIPT :

Sélectionner tout - Visualiser dans une fenêtre à part

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
$(document).ready(function() {
    var impact = 0;
    var urgence = 0;
 
    // Détecte le changement de valeur sur la DDL Impact
    $("#<%= Impact.ClientID %>").change(function() {
        // Affecte la valeur sélectionnée dans la variable impact
        impact = $(this).val();
 
        // Appelle la méthode UpdatePriorite pour mettre à jour la DDL Priorite
        UpdatePriorite();
    });
 
    // Détecte le changement de valeur sur la DDL Urgence
    $("#<%= Urgence.ClientID %>").change(function() {
        // Affecte la valeur sélectionnée dans la variable urgence
        urgence = $(this).val();
 
        // Appelle la méthode UpdatePriorite pour mettre à jour la DDL Priorite
        UpdatePriorite();
    });
 
    function UpdatePriorite() {
        if (impact == 2 && urgence == 2) {
            $("#<%= Priorite.ClientID %>").val(3);
        } else if (impact == 3 && urgence == 3) {
            $("#<%= Priorite.ClientID %>").val(4);
        } else if (impact == 1 && urgence == 1) {
            $("#<%= Priorite.ClientID %>").val(2);
        }
    }
});

Le code ci-dessus doit être intégré dans des balises SCRIPT, toujours au sein de la balise HEAD :

Code ASPX :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<html>
    <head>
        <script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.9.0.min.js"></script>
 
        <script type="text/javascript">
            ==> mettre le code de la logique ici
        </script>
 
        ...
    </head>
 
    <body>
        ...
    </body>
</html>

[Eric555]

Merci pour votre aide , c"est résolu