Invalid postback or callback argument - No server controls except a button (DNN Module)

Question

My DNN module page only contains some divs and a LinkButton. The contents of the div are populated using jQuery AJAX. The button is used to post a file to the server that needs to be uploaded. I am getting the "Invalid postback or callback argument" error.

Assuming event validation cannot be turned off, from what I have read till now, I am not supposed to modify contents of any server controls on the page using javascript, and if I do then I have to user RegisterForEventValidation to register all possible postback data for that control beforehand. I am not sure if that applies in my case since there are no server controls that are being modified. Is there a problem with my approach for uploading files when rest of the content is all loaded through AJAX?

<div id="divTop"></div>
<div id="divMain"></div>
<div id="divError" style="display: none" class="ui-widget-content ui-state-error"></div>
<div id="divAddFile"></div>
<div id="divSearchNow" class="ui-widget-header divControl" style="position: absolute; display: none; z-index: 999;"></div>
<asp:LinkButton ID="btnUploadFiles" runat="server" OnClick="btnUploadFiles_Click"
Style="display: none;">Upload Files</asp:LinkButton>

To enable the user to upload, an html file control is rendered and the button is made visible, both through AJAX/javascript. However, I get an error when the page attempts a postback.

Most of the examples I have seen till now mention dropdowns that are manipulated through javascript, and hence RegisterForEventValidation is used on all dynamic values. How can I apply this to my situation?

I am also open to suggestions on the approach I am taking for file uploads on a page that is rendered almost entirely through AJAX. Thanks in advance!

Answer 1

Your main problem here is that you cannot use Postbacks and AJAX at the same time without lots of problems. When the server issues out a webpage, it expects the same content to return on Postback. If it sends out empty divs for instance, then you populate those with AJAX, then Post it back to the server, the server will error. There are some ways around this but in my experience they almost never work consistently.

You need to make the application either fully service oriented (AJAX) or fully page method based.

Service Oriented - Create a server side control that would allow you to use AJAX functions to upload the file.

Page Method - The divs need to be populated on server side. Any changes to content on the client should be made using a full postback, not AJAX.

Using update panels will work if the content in the divs is not needed when uploading. In other words, if you need to post back the divs when the button is clicked you will still get the same error. If the div content is not needed, then wrapping an update panel around only the button will cause only that button click to be posted back and could eliminate your error.