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"/>
onclick="btnSave_Click"/>
</div>
</form>
</body>
</html>
.aspx.cs page (code-behind)
protected void btnSave_Click(object sender, EventArgs e)
.aspx.cs page (code-behind)
protected void btnSave_Click(object sender, EventArgs e)
{
Response.Write("Hi!
I am a Server side (code-behind) 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
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();
<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>
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.
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"
id="btnSave"
runat="server"
Text="Save"
OnClientClick="JavascriptFunction();"/>
</div>
</form>
</body>
</html>
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
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>
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
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;"
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.
No comments :
Post a Comment