asp:Button and Javascript

It is useful many times to decide the behavior of a button based on some client side code result. For example, when a button is pressed a web page might need to execute Javascript code to validate some user input or to have the user confirm a certain action and based on the output of the client code either post back to the web server or ignore the click or execute more client side code.

Let's take the scenario of asking the user to confirm a certain action as this scenario has actually come up with me at a client. The web page has a button that deletes an object permanently. Upon a user click on the button, the page executes Javascript code to open a confirmation box with an OK and a Cancel button. The confirmation box should at the least minimize accidental deletions. If the user clicks OK the page posts back and the object is deleted. However, if the user clicks Cancel the button click is ignored and nothing happens. Let's take a look at the code behind this:

Javascript part:

<script type="text/javascript">
function confirmDelete() {
return window.confirm("You really want to delete all your work?");
}
</script>


ASPX side:

<asp:button id="btnDelete" onclick="btnDelete_Click" runat="server" text="Delete" tooltip="Permanetly remove this item" onclientclick="javascript:return confirmDelete();" />


That's it.

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();";