Blog de Nico-pyright(c)

28
mars
2008

[Asp.Net, Ajax] Utiliser l’UpdatePanel avec une DropDownList

Un article de nico-pyright(c) Comments

J’aime beaucoup la fonctionnalité AutoPostBack d’une dropdownlist. Le seul inconvénient est qu’elle provoque un postback … et que forcément, ca provoque un rechargement complet de la page. Ce qui peut etre génant pour l’utilisateur si la page est plutot grosse.

Dans ce monde Web 2.0, vous me direz … AJAX.

Et je vous dirais … allons-y !

tout d’abord, il vous faut bien sur les web extensions ajax.
Si vous utilisez visual studio 2005, un petit tour de ce coté http://asp.net/ajax/downloads/ pour les installer.
N’oubliez pas non plus d’aller modifier votre web.config et d’ajouter

(dans la section )

sinon, vous aurez la fameuse erreur javascript

Sys is not defined

témoin que les scripts Ajax ne sont pas chargés.

Si vous etes sous visual studio 2008, il vous suffit de cibler le framework 3.5

Ensuite, en imaginant que vous ayez une page comme celle-ci :

<div>
<asp:DropDownList runat="server" ID="GroupNumbers" AutoPostBack="true" OnSelectedIndexChanged="DropDownChange">
<asp:ListItem Text="Choisir ..." Value="" />
<asp:ListItem Text="1 --> 5" Value="1" />
<asp:ListItem Text="6 --> 10" Value="2" />
<asp:ListItem Text="11 --> 15" Value="3" />
</asp:DropDownList>
</div>

<asp:DropDownList runat="server" ID="Numbers" AutoPostBack="true" OnSelectedIndexChanged="Numbers_SelectedIndexChanged" Visible="false">
</asp:DropDownList>
<asp:Label runat="server" ID="Result" Visible="false" />

Donc, une première DropDown qui contient des plages de nombres et une fois une de ces plages choisies, on affiche une deuxième dropdown avec le contenu de cette plage. Et lorsqu’une valeur de la deuxième liste est choisi, on affiche le résultat dans un label.

protected void DropDownChange(object sender, EventArgs e)
{
Thread.Sleep(2000);
Result.Visible = false;
Numbers.Visible = false;
int valSelected;
if (int.TryParse(((DropDownList)sender).SelectedValue, out valSelected))
{
Numbers.Items.Clear();
int start = 0;
int end = 0;
switch (valSelected)
{
case 1:
start = 1;
end = 5;
break;
case 2:
start = 6;
end = 10;
break;
case 3:
start = 11;
end = 15;
break;
}
for (int i = start; i <= end; i++ )
{
Numbers.Items.Add(new ListItem(i.ToString(), i.ToString()));
}
Numbers.Visible = true;
}
}

protected void Numbers_SelectedIndexChanged(object sender, EventArgs e)
{
Thread.Sleep(2000);
Result.Text = string.Format("Vous avez choisi : {0}", ((DropDownList)sender).SelectedValue);
Result.Visible = true;
}

Pour rajouter la fonctionnalité de mise à jour sans rechargement total de la page, c’est très simple.
Il faut rajouter un scriptManager à la page, et un UpdatePanel qui contiendra la deuxième dropdown et le label (on pourrait le faire contenir toute la page, mais la première liste n’étant jamais rechargée, nous n’en avons pas besoin).

Et ca donne ceci :

<asp:ScriptManager ID="ScriptManager1" runat="server" />

<asp:UpdateProgress ID="UpdateProgress1" runat="server" DisplayAfter="5">
<ProgressTemplate>
<span style="color: Red">Mise à jour.....</span>
</ProgressTemplate>
</asp:UpdateProgress>

<div>
<asp:DropDownList runat="server" ID="GroupNumbers" AutoPostBack="true" OnSelectedIndexChanged="DropDownChange">
<asp:ListItem Text="Choisir ..." Value="" />
<asp:ListItem Text="1 --> 5" Value="1" />
<asp:ListItem Text="6 --> 10" Value="2" />
<asp:ListItem Text="11 --> 15" Value="3" />
</asp:DropDownList>
</div>

<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:DropDownList runat="server" ID="Numbers" AutoPostBack="true" OnSelectedIndexChanged="Numbers_SelectedIndexChanged" Visible="false">
</asp:DropDownList>
<asp:Label runat="server" ID="Result" Visible="false" />
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="GroupNumbers" EventName="SelectedIndexChanged" />
</Triggers>
</asp:UpdatePanel>

Simple non ?

Tout ce qu’on a à faire c’est de mettre les balises à rechager dans le ContentTemplate de l’UpdatePanel et à spécifier quel événement doit être intercepté pour faire le rechargement dynamique. Pour cela, on utilise le trigger AsyncPostBackTrigger en précisant l’EventName à SelectedIndexChanged, qui est l’événement de changement pour la liste déroulante.

Notez au passage l’utilisation du controle UpdateProgress pour afficher un petit message lors du rechargement dynamique.

Si vous voulez vous convaincre qu’aucun rechargement de page n’a lieu, rajoutez un label hors de l’update panel :

<asp:Label runat="server" ID="lelabel" />
que vous initialisez dans le OnLoad avec la date du jour :

protected override void OnLoad(EventArgs e)
{
lelabel.Text = DateTime.Now.ToString();
base.OnLoad(e);
}

Identifiez-vous

Créer un compte

Blog de Nico-pyright(c)

Laisser un commentaire

Articles récents

Commentaires récents

Archives

Catégories

Méta

Identifiant
Mot de passe

Mot de passe oublié ?