Friday, 19 October 2012

Asp.Net Button OnClientClick Example |OnClientClick Confirm Message |OnClientClick prevent post back |Asp.Net Button OnClick Vs OnClientClick |How to: Call JavaScript function on OnClientClick event of Asp.Net button

Asp.Net Button OnClientClick Example

 
The Asp.Net button has 2 attributes to trigger a click event OnClick and OnClientClick.

1-OnClientClick
– Calls the client side (JavaScript) event handler

2-OnClick – Calls the server side (code-behind) event handler

The
OnClientClick event handler will be executed first, followed by the OnClick event handler.

Here is a full example

.aspx page


<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>OnClientClick</title>
    <script language="javascript">
        function JavascriptFunction() {
alert("Hi! I am a Javascript Function");
        }
    </script>
</head>
<body>
    <form id="frmOnClientClick" runat="server">
    <div>
        <asp:Button
            id="btnSave"
            runat="server"
            Text="Client Click"
            OnClientClick="JavascriptFunction();"             
            onclick="btnSave_Click"/>
    </div>
    </form>
</body>
</html>

.aspx.cs page (code-behind)

protected
void btnSave_Click(object sender, EventArgs e)
{
  Response.Write("Hi! I am a Server side (code-behind) Function");
}


Here when the user clicks on the button the client side Javascript function 

 JavascriptFunction() will be called first and an alert message Hi! I am a Javascript Function will popup,

 once the user clicks ok in the message box the server side function btnSave_Click will be executed and the message Hi! I am a Server side (code-behind) Function will be displayed on the screen.
 

How to: Call JavaScript function on OnClientClick event of Asp.Net button

The Asp.Net button is a server control and its click event is by default associated with a server side event handler function as follows.
OnClick="btnSave_Click"
But there are situations where we need to perform client side operations by calling a JavaScript function before submitting the page to the server side event handler, this can be achieved by assigning a JavaScript function to the OnClientClick event of the button as follows.
OnClientClick="JavascriptFunction();

Here is a full example



<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>OnClientClick</title>
    <script language="javascript">
        function JavascriptFunction() {
            alert("Hi! I am a Javascript Function");
        }
    </script>
</head>
<body>
    <form id="frmOnClientClick" runat="server">
    <div>
        <asp:Button
      id="btnSave"
            runat="server"
Text="Save"             
OnClientClick="JavascriptFunction();"/>
    </div>
    </form>
</body>
</html>

Here when the user clicks on the button the client side Javascript function JavascriptFunction() will be called first, following which the server side function btnSave_Click will be executed.

Asp.Net Button OnClick Vs OnClientClick


The Asp.Net button has 2 attributes to trigger a click event OnClick and OnClientClick.

OnClientClick – Calls the client side (JavaScript) event handler
OnClick – Calls the server side (code-behind) event handler

The
OnClientClick event handler will be executed first, followed by the OnClick event handler.

The
OnClientClick event handler can be used to perform client side validations before the page is submitted, the OnClick event handler can be used to perform server side operations like saving data to database.

Here is an example using both the events.

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>OnClientClick</title>
    <script language="javascript">
        function JavascriptFunction() {
            alert("Hi! I am a Javascript Function");
        }
    </script>
</head>
<body>
    <form id="frmOnClientClick" runat="server">
    <div>
<asp:Button
            id="btnSave"
            runat="server"
            Text="Save"
            OnClientClick="JavascriptFunction();"/>
    </div>
    </form>
</body>
</html>

Here when the user clicks on the button the client side JavaScript function JavascriptFunction() will be called first, following which the server side function btnSave_Click will be executed.

Asp.Net Button OnClientClick prevent post back.


The Asp.Net button has 2 attributes to trigger a click event OnClick and OnClientClick.

OnClientClick – Calls the client side (JavaScript) event handler
OnClick – Calls the server side (code-behind) event handler

The
OnClientClick event handler will be executed first, followed by the OnClick event handler.

In some cases we will have to stop calling the server side event after executing the client side event (Ex: When the client side validation fails), this can be achieved by returning false from the client side function which handles the OnClientClick
event as follows.

Here is a full example



<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>OnClientClick</title>
    <script language="javascript">
        function JavascriptFunction() {
            // Add validation code here.
            // If validation fails
            // return false to stop server side event.
            return false;
        }
    </script>
</head>
<body>
    <form id="frmOnClientClick" runat="server">
    <div>
        <asp:Button
            id="btnSave"
            runat="server"
            Text="Client Click"
            OnClientClick="if(!JavascriptFunction()) return false;"
            onclick="btnSave_Click"/>
    </div>
    </form>
</body>
</html>

Here since the client side JavaScript function returns false, the server side onclick event will not be triggered.

Asp.net button OnClientClick Confirm Message


The Asp.Net button has 2 attributes to trigger a click event OnClick and OnClientClick.

OnClientClick – Calls the client side (JavaScript) event handler
OnClick – Calls the server side (code-behind) event handler

The
OnClientClick event handler can be used to perform client side validations and to get a confirmation from the user before triggering the server side event handler as follows.

OnClientClick="if(!confirm('Are you sure you want to Save?')) return false;"

Here is a full example

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>OnClientClick</title>
</head>
<body>
    <form id="frmOnClientClick" runat="server">
    <div>
        <asp:Button
            id="btnSave"
            runat="server"
            Text="Client Click"
            OnClientClick="if(!confirm('Are you sure you want to Save?'))  
            return false;"
            onclick="btnSave_Click"/>
    </div>
    </form>
</body>
</html>

Here once the user clicks on the button, a confirmation message 'Are you sure you want to Save?' will get poped up in a message box with, if the user selects Yes then the server side event will be triggered, else the server side event will not be triggered.

Post a Comment