Wednesday, March 28, 2012

Dynamic association between UpdatePanel and UpdateProgress not working

Hi,

I haven't really used the ASP.NET AJAX framework before and I'm trying to get this to work without any luck. On my page is a repeater control and in its itemtemplate I generate an UpdatePanel and an UpdateProgress control (and a couple of other items) along with a LinkButton. The UpdatePanel has another repeater inside it. The idea is when I click on of the LinkButtons, it binds a datasource to the innermost repeater and refreshes the associated UpdatePanel (the panel is set to Conditional updatemode). It all works well but the associated UpdateProgress doesn't show, ever.

I've tried declarative setting the AssociatedUpdatePanelID in my ASP.NET code and I've tried to set it programatically in the ItemDataBound property of the outermost repeater (I've tried setting it to ID, ClientID and UniqueID) with no luck. If I leave the AssociatedUpdatePanelID untouched it sort of work but the problem is that ALL UpdateProgress controlls are displayed when a LinkButton is pressed.

The following experimentation code is the one I've been trying to make it work
 <asp:scriptmanager id="ScriptManager1" runat="server"> </asp:scriptmanager> <asp:repeater id="rptAlternatives" runat="server" onitemcreated="rptAlternatives_ItemCreated" onitemdatabound="rptAlternatives_ItemDataBound"> <itemtemplate> <div style="border: 1px solid #000; width: 300px; height: 100px; margin: 10px 0 10px 0;"> <asp:linkbutton id="lnkToggleSementPanel" runat="server" text="Toggle segments"></asp:linkbutton> <asp:updateprogress id="progress" runat="server" AssociatedUpdatePanelID="updSegmentPanel"> <ProgressTemplate> Loading... </ProgressTemplate> </asp:updateprogress> <asp:updatepanel id="updSegmentPanel" runat="server" updatemode="Conditional"> <contenttemplate> <asp:repeater id="rptSegments" runat="server"> <headertemplate> <div style="background-color: red; width: 100%;"> </headertemplate> <itemtemplate><%# Container.DataItem%> </itemtemplate> <footertemplate> </div> </footertemplate> </asp:repeater> </contenttemplate> </asp:updatepanel> </div> </itemtemplate> </asp:repeater>

using System;
using System.Collections.Generic;
using System.Data;
using System.Configuration;
using System.Collections;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;

public partialclass _Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (!Page.IsPostBack)
{
List<int> items =new List<int>();
for (int i = 0; i < 5; i++)
items.Add(i);

this.rptAlternatives.DataSource = items;
this.rptAlternatives.DataBind();
}
}
protected void rptAlternatives_ItemCreated(object sender, RepeaterItemEventArgs e)
{
if (e.Item.ItemType == ListItemType.AlternatingItem || e.Item.ItemType == ListItemType.Item)
{
LinkButton lnkToggleSementPanel = e.Item.FindControl("lnkToggleSementPanel")as LinkButton;
if (lnkToggleSementPanel !=null)
{
lnkToggleSementPanel.Click +=new EventHandler(lnkToggleSementPanel_Click);
lnkToggleSementPanel.CommandArgument = e.Item.ItemIndex.ToString();
this.ScriptManager1.RegisterAsyncPostBackControl(lnkToggleSementPanel);
}
}
}

protected void rptAlternatives_ItemDataBound(object sender, RepeaterItemEventArgs e)
{
if (e.Item.ItemType == ListItemType.AlternatingItem || e.Item.ItemType == ListItemType.Item)
{
UpdatePanel updSegmentPanel = e.Item.FindControl("updSegmentPanel")as UpdatePanel;
if (updSegmentPanel !=null)
{
UpdateProgress progress = e.Item.FindControl("progress")as UpdateProgress;
if (progress !=null)
{
progress.DisplayAfter = 0;

// NON OF THESE WORK!
//progress.AssociatedUpdatePanelID = updSegmentPanel.ClientID;
//progress.AssociatedUpdatePanelID = updSegmentPanel.UniqueID;
//progress.AssociatedUpdatePanelID = updSegmentPanel.ID;
}
}
}
}

void lnkToggleSementPanel_Click(object sender, EventArgs e)
{
LinkButton lnkToggleSementPanel = senderas LinkButton;
if (lnkToggleSementPanel !=null)
{
Control parentControl =
lnkToggleSementPanel.Parent;
UpdatePanel updSegmentPanel = parentControl.FindControl("updSegmentPanel")as UpdatePanel;

if (updSegmentPanel !=null)
{
Repeater rptSegments = updSegmentPanel.FindControl("rptSegments")as Repeater;
if( rptSegments !=null )
{
List<int> items =new List<int>();
for (int i = 0; i <= Convert.ToInt32(lnkToggleSementPanel.CommandArgument); i++)
items.Add(i);

rptSegments.DataSource = items;
rptSegments.DataBind();
updSegmentPanel.Update();

// Delay added for debugging
System.Threading.Thread.Sleep(1000);
}
}
}


}
}

Another thing that I've found strange is that if I move the assigning of the AssociatedUpdatePanelID property FROM ItemDataBound TO ItemCreated it all stops working and if you check the generated control ID's they've not been given proper IDs, i.e the NamingContainer stops working

No takers on this one? It appears Im just missing one piece of the puzzle but I can't figure out which oneSad


Hi,

Here is a working sample:

<%@. Page Language="C#" %><%@. Import Namespace="System.Collections.Generic" %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><script runat="server"> protected void Page_Load(object sender, EventArgs e) { if (!Page.IsPostBack) { List<int> items = new List<int>(); for (int i = 0; i < 5; i++) items.Add(i); this.rptAlternatives.DataSource = items; this.rptAlternatives.DataBind(); } } protected void rptAlternatives_ItemCreated(object sender, RepeaterItemEventArgs e) { //if (e.Item.ItemType == ListItemType.AlternatingItem || e.Item.ItemType == ListItemType.Item) //{ // LinkButton lnkToggleSementPanel = e.Item.FindControl("lnkToggleSementPanel") as LinkButton; // if (lnkToggleSementPanel != null) // { // lnkToggleSementPanel.Click += new EventHandler(lnkToggleSementPanel_Click); // lnkToggleSementPanel.CommandArgument = e.Item.ItemIndex.ToString(); // this.ScriptManager1.RegisterAsyncPostBackControl(lnkToggleSementPanel); // } //} } protected void rptAlternatives_ItemDataBound(object sender, RepeaterItemEventArgs e) { if (e.Item.ItemType == ListItemType.AlternatingItem || e.Item.ItemType == ListItemType.Item) { UpdatePanel updSegmentPanel = e.Item.FindControl("updSegmentPanel") as UpdatePanel; if (updSegmentPanel != null) { UpdateProgress progress = e.Item.FindControl("progress") as UpdateProgress; if (progress != null) { progress.DisplayAfter = 0; } } } } protected void rptAlternatives_ItemCommand(object source, RepeaterCommandEventArgs e) { LinkButton lnkToggleSementPanel = e.Item.FindControl("lnkToggleSementPanel") as LinkButton; if (lnkToggleSementPanel != null) { Control parentControl = lnkToggleSementPanel.Parent; UpdatePanel updSegmentPanel = parentControl.FindControl("updSegmentPanel") as UpdatePanel; if (updSegmentPanel != null) { Repeater rptSegments = updSegmentPanel.FindControl("rptSegments") as Repeater; if (rptSegments != null) { List<int> items = new List<int>(); for (int i = 0; i <= e.Item.ItemIndex; i++) items.Add(i); rptSegments.DataSource = items; rptSegments.DataBind(); updSegmentPanel.Update(); // Delay added for debugging System.Threading.Thread.Sleep(2000); } } } }html xmlns="http://www.w3.org/1999/xhtml" ><head runat="server"> <title>Untitled Page</title></head><body> <form id="form1" runat="server"> <div> <asp:scriptmanager id="ScriptManager1" runat="server"> </asp:scriptmanager> <asp:repeater id="rptAlternatives" runat="server" onitemcreated="rptAlternatives_ItemCreated" onitemdatabound="rptAlternatives_ItemDataBound" OnItemCommand="rptAlternatives_ItemCommand"> <itemtemplate> <div style="border: 1px solid #000; width: 300px; height: 100px; margin: 10px 0 10px 0;"> <asp:updatepanel id="updSegmentPanel" runat="server" UpdateMode="Conditional" ChildrenAsTriggers="true"> <contenttemplate> <asp:linkbutton id="lnkToggleSementPanel" runat="server" text="Toggle segments"></asp:linkbutton> <asp:repeater id="rptSegments" runat="server"> <headertemplate> <div style="background-color: red; width: 100%;"> </headertemplate> <itemtemplate><%# Container.DataItem%> </itemtemplate> <footertemplate> </div> </footertemplate> </asp:repeater> </contenttemplate> <Triggers> </Triggers> </asp:updatepanel> <asp:updateprogress id="progress" runat="server" AssociatedUpdatePanelID="updSegmentPanel"> <ProgressTemplate> Loading... </ProgressTemplate> </asp:updateprogress> </div> </itemtemplate> </asp:repeater> </div> </form></body></html>

Please try it and compare with your own code.

No comments:

Post a Comment