ASP.NET ViewState validation when manipulating DOM

Question

I'm, using jQuery and ASP.NET to show a dialog containing buttons. After some scouring, I got the buttons in the dialog to work by adding a tad more JavaScript to append the dialog to the form.

var dlg = $('#ctl00_ctl00_PageContent_PageContent__pnlPopup').dialog({
                    autoOpen: false,
                    height: 180,
                    width: 500,
                    modal: true,
                    draggable: true
                });
         dlg.parent().appendTo($('form:first')); // without this, controls in the dialog are non-functional

This works fine until I open the dialog, close it, then try to use a control like a ComboBox or LinkButton on the parent page. At which point I get a ViewState validation error:

Failed to load viewstate. The control tree into which viewstate is being loaded must match the control tree that was used to save viewstate during the previous request. For example, when adding controls dynamically, the controls added during a post-back must match the type and position of the controls added during the initial request.

Is there any way around this? I half see why it's happening - jQuery is changing the structure of the documents but I'm not entirely sure how/why this is affecting the ViewState.

Answer 1

Are you saying the only change you made to the page was adding the code in your question? Are you making any calls to the server when the the dialog comes up?

Manipulating the DOM on the client should not affect the server's ability to correctly restore ViewState (provided you haven't deleted or corrupted the required elements, such as the form tag and the hidden fields that hold the encoded ViewState).

Have you had a look at the raw HTTP request that's failing, perhaps with a web proxy such as Fiddler?