Monday, March 26, 2012

UpdatePanel + Partial update

Hi,

I have a simple "Member Profile" formw hich has fields for first/last name and Image + UploadFile controls to store user's image. On page's server side load event i get data from database and assign to the controls and image; when i click button "Save" i save all changes on button_save() server side event - standard stuff.

Now, I placed the "Save" button into an UpdatePanel, and Image+FileUpload controls on another UpdatePanel, so when i click save all data is being saved and specified Image is being loaded without full postback. So far it works fine...

What i want to do is to place a "Upload" button next to FileUpload control, so that once the user has picked an image he can preview it without saving the whole profile. The problem i'm having is that when i click on "Upload" buttoon which is on the same UpdatePanel as FielUpload control, it goes thru the whole page lifecycle, including fetching profile data in Page.Load (which is a lot in the real profile) and doing other logic... Is there a way to detect on server side that i do a partial postback from that particular UpdatePanel so i could skip all data loading and other logic and just apply the new image onto the Image control?

Thank you,

Andrey

upload controls do not work inside an AJAX update panel. you have to have it outside of that, therefore no AJAX updates are available on an upload, you have to refresh the whole page .

hth,

mcm


ScriptManager.GetCurrent(Page).AsyncPostBackSourceElementID

http://www.asp.net/AJAX/Documentation/Live/mref/P_System_Web_UI_ScriptManager_AsyncPostBackSourceElementID.aspx

The ScriptManager class also has some members that may help you "determine" what is going on such as the IsInAsynchPostBack property.

http://asp.net/AJAX/Documentation/Live/mref/T_System_Web_UI_ScriptManager.aspx

Just make sure that you set the Save button as a PostBackTrigger, rather than an AnsynchPostBackTrigger, or it won't work.


hmm.. maybe i was wrong then. Well in any event, give what "disturbedBuddha" says a try first.

hth,

mcm


Guys, I tried what you suggested and if i have FileUpload control on a UpdatePanel it doesn't work: if I check FileUpload.HasFile it returns false.

If I set that control as PostbackTrigger for the panel (as disturbedbuddha suggested), I get the following page level exception:

Control with ID 'fuAvatarValue' being registered through RegisterAsyncPostBackControl or RegisterPostBackControl must implement either INamingContainer, IPostBackDataHandler, or IPostBackEventHandler.

Any ideas how I could achieve the desired functionality? Is there a specific reason why it doesnt work?

Thank you,
Andrey


muzzy, be sure that you register thesubmitbutton as a postback control instead of thefileUpload(or <input type=file>) control.


You're right - i shoudl've registered the button, not the upload cotrol.

Anyway, when i do that, it does the full postback, reloading the whole page and that is not what you expect form ajax ...:(


I think that's by design; webbrowsers don't allow files to be posted using javascript. Imagine you were able to do so: you could generate many FileUpload controls, setting the filenames to anything you want, and then submit the form.
On the other hand, the browser will never post a file to the server if the value of the FileUpload is not set by the user it self (the user must click the "browse" button to upload a file).
I think the full postback is required not because AJAX lacks the feature, but because of the restriction of the webbrowsers to post file data using script.
Maybe using an IFrame is an option for you?


I think that's by design; webbrowsers don't allow files to be posted using javascript. Imagine you were able to do so: you could generate many FileUpload controls, setting the filenames to anything you want, and then submit the form.
On the other hand, the browser will never post a file to the server if the value of the FileUpload is not set by the user it self (the user must click the "browse" button to upload a file).
I think the full postback is required not because AJAX lacks the feature, but because of the restriction of the webbrowsers to post file data using script.
Maybe using an IFrame is an option for you?

No comments:

Post a Comment