asp.net/ajax custom templated control, showing/hiding items with placeholder

Question

Hi All,

I have a custom templated control(toolbar) that contains a custom usercontrol(button) The button uses jquery to style and manage the states/postbacks/non=postbacks etc.

A few of the buttons are hidden with a placeholder and are displayed when hitting one of the buttons.

All the buttons with regards jquery seem to be initiated on postback (ajax style within an UpdatePanel using the PageRequestManager) however the viewstate is lost on the buttons made invisible by the placeholder.

It appears to be an issue is specific to the viewstate and buttons on the placeholder in the templated control. This normally works in a non-ajax environment, I suspect I am missing something.

Any comments that get me thinking appreciated.

The code is located in various parts and probably not worth pasting since it will be completely disconnected (I know this doesnt help)

Answer 1

If I remember correctly, ASP.NET controls don't finish their life cycle if they have visible set to false. Meaning, things like Render() aren't called, and ViewState must be one of those things (which makes sense). Using update panels along with AJAX/Javascript is also a really tricky thing, and doesn't work very well. This is just how ASP.NET controls and the update panel work.

My suggestion is to either use update panels, or use javascript, and not both.

You can easily emulate what update panels do by using jquery's $.post/get and replacing a section of code with the html returned from a web service call.

function myButtonClick(event){
    $.post("path/to/webservice", {data1: "data1"}, function(data, status){
        $("#myPanel").replaceWith(data);
    });
}

You will eventually run into other issues too if you have an JS attached to code that is updated via an update panel. Ex: If you have a list of items that each have JS attached to them, such as one of the ASP.NET AJAX Control Toolkit controls, and you delete one of these from the page using an update panel, the JS used to hook the controls up will be out of sync.

Answer 2

I feel I need to answer my own question here:

Instead of using PlaceHolders or divs with css, UpdatePanels are rendered in either a div or a span depending on the rendering option. In this case just hide the div or span that the UpdatePanel creates rather than trying to hide/show a a new outer container.