Blog de Nico-pyright(c)

28
mars
2008

[Asp.Net, Ajax] Utiliser l’UpdatePanel pour raffraichir une DropDownList dans un Repeater

Un article de nico-pyright(c) Comments

5 Commentaires

Suite à mon précédent billet, cette fois-ci nous allons voir l’utilisation de l’updatePanel dans un repeater.

Soit le repeater suivant, qui contient une dropdown pour chaque item de la collection qui lui est bindée :

<asp:Repeater ID="LeRepeater" runat="server" DataSource="<%# new int[] {1, 6, 11} %>" OnItemDataBound="ItemDataBound">
<ItemTemplate>
<asp:DropDownList runat="server" ID="LaList" AutoPostBack="true" OnSelectedIndexChanged="IndexChange">
</asp:DropDownList>
</ItemTemplate>
</asp:Repeater>

Le code behind est le suivant :

protected override void OnLoad(EventArgs e)
{
if (!IsPostBack)
LeRepeater.DataBind();

LeLabel.Text = DateTime.Now.ToString();
base.OnLoad(e);
}

protected void IndexChange(object sender, EventArgs e)
{
Result.Text = string.Format("Valeur choisie : {0}", ((DropDownList)sender).SelectedValue);
}

protected void ItemDataBound(object sender, RepeaterItemEventArgs e)
{
if (e.Item.ItemType == ListItemType.Item || e.Item.ItemType == ListItemType.AlternatingItem)
{
DropDownList LaList = (DropDownList)e.Item.FindControl("LaList");
for (int i = (int)e.Item.DataItem; i < (int)e.Item.DataItem + 5; i++)
{
LaList.Items.Add(new ListItem(i.ToString(), i.ToString()));
}
}
}

Ce qui fait qu’on se retrouve avec trois dropDown. La première va de 1 à 5, la seconde de 6 à 10 et la troisième de 11 à 15. Et lorsqu’on sélectionne une valeur, elle s’affiche dans un label.

Si on essaie comme dans le billet précédent d’encadrer par un UpdatePanel :

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

<asp:Label runat="server" id="LeLabel"/>

<asp:UpdatePanel runat="server" ID="UpdatePanel1">
<ContentTemplate>
<asp:Repeater ID="LeRepeater" runat="server" DataSource="<%# new int[] {1, 6, 11} %>" OnItemDataBound="ItemDataBound">
<ItemTemplate>
<asp:DropDownList runat="server" ID="LaList" AutoPostBack="true" OnSelectedIndexChanged="IndexChange">
</asp:DropDownList>
</ItemTemplate>
</asp:Repeater>

<asp:Label runat="server" ID="Result" />
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="LaList" EventName="SelectedIndexChanged" />
</Triggers>
</asp:UpdatePanel>

Au démarrage, on obtient l’erreur suivante :

A control with ID ‘LaList’ could not be found for the trigger in UpdatePanel ‘UpdatePanel1′.

C’est l’utilisation de l’AsyncPostBackTrigger qui pose problème.
Pour corriger ce problème, nous allons le retirer de la page aspx et modifier le code behind pour en ajouter un dynamiquement, à chaque DataBound du repeater.
Ainsi, la méthode devient :

protected void ItemDataBound(object sender, RepeaterItemEventArgs e)
{
if (e.Item.ItemType == ListItemType.Item || e.Item.ItemType == ListItemType.AlternatingItem)
{
DropDownList LaList = (DropDownList)e.Item.FindControl("LaList");
for (int i = (int)e.Item.DataItem; i < (int)e.Item.DataItem + 5; i++)
{
LaList.Items.Add(new ListItem(i.ToString(), i.ToString()));
}
AsyncPostBackTrigger trigger = new AsyncPostBackTrigger();
trigger.ControlID = LaList.UniqueID;
trigger.EventName = "SelectedIndexChanged";
UpdatePanel1.Triggers.Add(trigger);
}
}

Et voilà.

Télécharger le projet démo (13 ko)

5 Commentaires + Ajouter un commentaire

Itomi Bhaa 10 juillet 2008 à 15 h 08 min

Excellent !!! Mille merci, c’est vraiment ce dont j’avais besoin ! Et encore un fois ce post était vraiment utile !

Connectez-vous pour répondre
nico-pyright(c) 10 juillet 2008 à 14 h 40 min

une solution pourrait être :

<asp:Button runat="server" OnClick="click" Text="afficher" />

protected void click(object sender, EventArgs e)  
{  
  foreach (Control control in LeRepeater.Controls)  
  {  
  if (control is RepeaterItem)  
  {  
  foreach (Control c in control.Controls)  
  {  
  if (c is DropDownList)  
  {  
  DropDownList cb = (DropDownList)c;  
  Response.Write(cb.SelectedValue + " ");  
  }  
  }  
  }  
  }  
}

dans la mesure où on connait le contenu du template du repeater

Connectez-vous pour répondre
Itomi Bhaa 10 juillet 2008 à 13 h 10 min

N’ont il pas tous les trois la même ID « LaList » ?

Est ce possible de rajouter un bouton qui affiche la SelectedValue de chacune des trois listes ? Par exemple « Valeurs choisies : 3 – 4 – 11 «

Connectez-vous pour répondre
nico-pyright(c) 10 juillet 2008 à 12 h 07 min

je ne comprends pas la question, toutes les dropdownlists ont des UniqueID différents au final, en effet il n’est pas possible d’avoir 2 controles avec des ID identiques sur une page..

N’hésitez pas à poser votre question dans le forum ASP.NET http://www.developpez.net/forums/forumdisplay.php?f=488

Connectez-vous pour répondre
Itomi Bhaa 10 juillet 2008 à 9 h 33 min

Salut,
Merci pour l’exemple tres instructif!!! Comment ferait ton pour construire les X mêmes DropDownLists mais chacune avec un ID différent.
Mon objectif serait de d’afficher les X SelectedValue des DropDownLists.

Connectez-vous pour répondre

Laisser un commentaire

Vous devez être connecté pour poster un commentaire.

Connexion

Identifiez-vous

Créer un compte

Blog de Nico-pyright(c)

5 Commentaires + Ajouter un commentaire

Laisser un commentaire

Articles récents

Commentaires récents

Archives

Catégories

Méta

Identifiant
Mot de passe

Mot de passe oublié ?