DropdownList sans postback

Version imprimable

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:

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

22/04/2013, 15h36
DotNetMatt

Si tu ne veux pas de PostBack, tu dois tout faire côté client en utilisant du Javascript (jQuery).
22/04/2013, 16h14
Eric555

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

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

Code:

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:

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

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:

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>

22/04/2013, 17h27
Eric555

Merci pour votre aide , c"est résolu :ccool: