Multiple UpdatePanels and state - asp.net

Question

I have a user control that has multiple update panels
On Page Load, I load a child user control dynamically onto the PlaceHolder (I do this everytime and don't check for postback)
I want to be able to maintain the state of the changes that a user makes in the Child user control. (The child user control has html controls along with asp.net controls and other custom controls).
The child user control loses the state whenever there's a click on the Button A or B that causes the postback. The mode for UpdatePanels have been set to conditional.
In the OnPageLoad,
I load a child control to the PlaceHolderA
This child control has another user control with a lot of JS. A user can potentially make changes in the child control.
When they click on Button A which is a part of the parent control, the OnPageLoad causes the child control to reload causing it to lose the client side changes that a user has made.
I would like to prevent this from happening.
Here's the HTML structure of the ASPX page
<UpdatePanel1>
<UpdatePanelChild1>
<Button A>
<Button B>
</UpdatePanelChild1>
<UpdatePanelChild2>
<PlaceHolderA>
</UpdatePanelChild2>

Answer 1

When dynamically adding controls you need to re-add them everytime your page loads. I've had to tackle similar difficulties and I do this in two ways. Where dynamic fields are added o the fly I will actually add a hidden control to the page before the user clicks to fill it in or add it themselves. By creating this sort of placeholder the system has tim eto start handling viewstate correctly and this preserves the users changes. The second issue that I hear you mentioning is that there might be issues with chich update panel updates. It's fine to have them set to conditional bu tin your code-behind you can also trigger the updates in teh othe rpanels if you need to from code. It's just updatepanel#.update()
alternatively you can also wrap all the update panels in another panel but I advise against this as it wastes resources.

Answer 2

It looks like you're losing the ViewState for your dynamically-added child control.
This is because you're adding it too late in the page lifecycle: the ViewState is loaded before the Page.Load event.
Try adding your child control in Page.Init instead.

Answer 3

You could use a ScriptManager with a form runat server in your control, instead update panels.
This way you dont have the post backs.
Here a good reference: http://www.asp.net/Ajax/Documentation/Live/overview/ScriptManagerOverview.aspx
Greetings.
Josema.
http://www.learning-workshop.com

Answer 4

Blockquote
//Code in your Asp.Net code
<form runat="server" id="form1">
<asp:ScriptManager id="ScriptManager1" runat="server" >
<Services>
<asp:ServiceReference Path="/WebServices/MyService.asmx"/>
</Services>
</asp:ScriptManager>
</form>
<script language="javascript" type="text/javascript">
//call with namespace "WebSite" included
WebSite.WebServices.HelloWorld(EndHelloWorld);
function EndHelloWorld()
{
//do whatever
}
</script>
</form>
Blockquote
//Code in your webservice class
[ScriptService]
public class MyService : System.Web.Services.WebService
{
[WebMethod]
public void HelloWorld()
{
return "Hello world";
}
}
From the script of my page i will do Ajax against my webservice, and the callback EndHelloWorld you could do whatever without losing state.
Hope it helps...
Kind Regards.
Josema.

Answer 5

It looks like you need to remove the nested UpdatePanels. In a structure like this:
<ParentUpdatePanel>
<ChildUpdatePanel1 />
<ChildUpdatePanel2 />
</ParentUpdatePanel />
ALL of the update panels will ALWAYS update, even if the child UpdatePanels are set to conditional, because the parent is actually the one that is updating. So, a postback event in one of the children will cause the parent to update.
Using that type of pattern is bad in general... if you need events from one UpdatePanel to cause updates in another, you should do this:
<asp:UpdatePanel ID="up1" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<asp:Button ID="buttonA" runat="server" />
<asp:Button ID="buttonB" runat="server" />
</ContentTemplate>
</asp:UpdatePanel>
<asp:UpdatePanel ID="up2" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<asp:Placeholder ID="ph" runat="server" />
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="buttonB" EventName="Click" />
</Triggers>
</asp:UpdatePanel>