UpdatePanel and PostBack problem in a User Control

Hi,

I've got a user control with control hierarchy that resembles this:

<asp:UpdatePanel>
</ContentTemplate>
<asp:panel ID="main" visible="false"
<asp:panel ID="content" visible="false">
</asp:panel
<asp:panel ID="controls">
<asp:button ID="btnShowContent" />
<asp:button ID="btnCancel" />
</asp:panel
</asp:panel>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="btnShowContent" EventName="Click"></asp:AsyncPostBackTrigger>
<asp:AsyncPostBackTrigger ControlID="btnCancel" EventName="Click"></asp:AsyncPostBackTrigger>
</Triggers>
</asp:UpdatePanel>

The page that holds the control does not wrap anything in UpdatePanel tags - only control has them. Button 'btnShowContent' toggles visibility for a panel control with ID "content". And this works just fine. There is also another button - btnCancel. By default this control is invisible on a page, but when a user clicks on a button on the page, the code-behind file for the page that owns the control, sets visibility on this control to 'true' (sets a property on the control and then control renders itself visible by setting "main.Visible = true" in OnPreRender() method for the control). Now, I want 'Cancel' button to revert this back - to hide the control. However, it's not happening - I click 'Cancel' once, and button handler code on the server side executes, setting visibility of the 'main' panel to false (main.Visible = false). Also, clicking button doesn't take me to OnPreRender for the control - I'm not sure if this is even relevant. So, clicking on 'Cancel' executes server side code, but nothing changes on the page after a browser receives response back. Clicking on the button again generates server side exception "Invalid postback or callback argument. Event validation is enabled using <pages enableEventValidation="true"/> in configuration or <%@dotnet.itags.org. Page EnableEventValidation="true" %> in a page.".

Any ideas? Am I doing something wrong with the way AJAX works or am I totally wrong here expecting that I can control 'main' panel visibility from within the control itself?

Thanks!

To add to this. If I remove UpdatePanel and just use control in a regular post-back scenario, everything works just fine...

And? Anyone out there who had problems with user controls and AJAX or someone who can point me to something here?

Nice...

I'm not sure why the main panel isn't going to the invisible state, but I have a theory about the OnPreRender not firing. It may be because the prerender event isn't firing because you are using Ajax. In other words, the fact that the screen isn't rendering again is bypassing the onprerender event. Does that make sense -- just a shot in the dark.

Sorry, one more comment. You can achieve this functionality with plain old javascript much more easily. Just tie the buttons wo javascript events that turn on (or off) a div tag using the block and none styles. For what it's worth. Good luck.

Thanks for the reply,sciszewski.

Well, I was thinking about doing it all in JS - just couldn't figure out why that was happening and it kept bugging me.. I know that it should work, but it doesn't and I hate issues like that.. :)

As to your guess about OnPreRender.. Well, it is being fired just fine when I click on btnShowContent - which is exactly the same kind of button and it triggers same functionality on the server - OnButtonClick handler.. Whatever happens in the handler is a different story, but both try to manipulate with panels within UpdatePanel - one button works just fine by setting Visible to true or false or whatever and chain of events fires OnPreRender, while clicking another one (btnCancel) doesn't get into OnPreRender eventually and nothing happens.. I don't think there are any exceptions being thrown since my code on the server side is one line: main.Visible = false.. So, I'm not sure what I'm doing wrong here. For now I just removed UpdatePanel and do regular post backs.

I believe the reason this is happening is because you are using the ASP.NET Visible attribute. Marking it as Visible=false causes it to not be rendered.

I'm betting if you did the same logic using style="display: none;" to show and hide the panels it would work just fine.

Have you set breakpoints in your javascript and your server side code to see where the what happens when you click the Cancel button? I'd be interested to know. You can use VS or something like Firebug to that type of debugging.