Modifying CSS Styles with JavaScript

I recently came a cross problem at a client where I needed the page content to change upon a button click before the page is posted back. For example, imagine you have a page used to upload files. You want the page to display something like "Your file is being uploaded" right when the user clicks the upload button. Then the page is posted back while the desired message is displayed. The solution I came up with utilized JavaScript to modify the Cascading Style Sheets, CSS, of the page and then post.
The solution was as simple as adding multiple wrapping div's around the content. This could actually be done with only two div's but for my page I need three. The div that had to be shown when the page is first requested had a default CSS Display property value of "block." The div that was to be shown after the user clicks a button had Display value of "hidden." In the code that executed following the button click as shown below, one div is being hidden, one is modified to be shown, and lastly the page is posted. The JavaScript code I had was similar to the following:


function btnClick()
{
document.getElementById("initialDiv").style["display"] = "hidden";
document.getElementById("secondDiv").style["display"] = "block";
document.form1.submit();
}


ASP .NET | Client/Server Side Action with asp:Button

The asp:Button imitates the HTML input button's onclick event by having a property called OnClick. However, this property can only be set to a valid method name that is executed on the server. More, since the property is named the same as the HTML event, it's not possible to add client side code directly to the asp:Button tag using the onclick attribute that gets excecuted upon a click.

ASP solves this problem by adding another property called OnClientClick that can be set to execute any client side code. Then during compilation, the ASP .NET worker process consolidates both codes into the one HTML event 'onclick' because both codes must be executed upon the same event, a click. ASP .NET only compiles a page if it's modified otherwise it grabs the page from the cache by default. For the server side code, the only thing that is added is client side code that posts the page back using the button id to identify the control that caused the post back. After the page is posted back, the server side code gets executed.

In contrast, since other events don't have a matching asp:Button property they can be added directly to the asp:Button tag and ASP .NET will add them to the HTML tag generated for the button. For example, onfocus, onblur, onselect and other event attributes can be added directly as follows:


<asp:button id="btnPost" runat="server" onblur="javascript:blured()" onfocus="javascript:focused();" />


HTML attributes can also be added progromatically such as in C#:

btnPost.Attributes.Add("ondblclick", "javascript:dblClicked();");
btnPost.Attributes["onkeypress"] = "javascript:pressed();";