I am writing a page where users can update their profile for a simple chat board. There is an
asp:Image
control which is loaded with the user's current avatar. On the same page is a list of available avatar images; each is a standard HTML
img
tag with the following attribute:
onclick='setAvatar(this);'
The function itself looks like this:
function setAvatar(e) {
var file = e.getAttribute('src');
var img = document.getElementById('ctl00_ContentHolder_UserAvatar');
img.src = file;
return true;
}
In this script,
file
is the
src
attribute for the stock image being clicked, and
img
is the
asp:Image
control that displays the current or newly selected avatar image. This all works fine and dandy: clicking on a stock image changes the image displayed on the control.
My problem occurs when the user clicks the Save button and a postback occurs. Because the change is made in the browser, it is not reflected in the ViewState and so gets lost.
What I want is to let the user select an image and then update his profile with only the single postback that happens when clicking Save. Is there any way I can get there?