Button Client Side Event in ASP.NET
The button control of ASP.NET AJAX offers several client-side events which can be used in a wide range of ASP.NET web applications in an extremely easy and flexible way. Here we list these client-side events and offer some brief information toward them.
- OnClientLoad: this event will be called when the button control is initialized.
- OnClientClicking: this event will be raised when user clicks the button. And you are free to cancel this event.
- OnClientClicked: this event is right after the OnClientClicking event and will be raised when the button is clicked.
- OnClientMouseOver: you can call the event when the mouse stays over the control.
- OnClientMouseOut: this client button event will be raised when the mouse leaves the control.
- OnClientCheckedChanging: this event will be triggered when the Checked property of the PerButton control is about to be modified or changed. And this event can be canceled.
- OnClientCheckedChanged: this event will be raised when OnClientCheckedChanging has been successfully raised and that the Checked property of the PerButton is changed. Thus, this event is subsequent to OnClientCheckedChanging event.
- OnClientToggleStateChanging: this client-side event will be called when the SelectedToggleStateIndex property of the PerButton is about to change. And users can cancel this event.
- OnClientToggleStateChanged: this event will be triggered when the SelectedToggleStateIndex property of the PerButton is indeed changed.
One thing that needs to be noted here is that all the event handler methods for above mentioned events can be modified and set on both server and client.
And following codes are offered here to guide users how to call the javascript in aspx. If you still have any problem in calling these client side events after trying the codes below, please feel free to contact us. ASPX<kettic:PerButton ID="PerButton1" runat="server" ButtonType="LinkButton" ToggleType="CustomToggle"
Text="CustomToggle Button" OnClientLoad="OnClientLoad" OnClientClicking="OnClientClicking"
OnClientClicked="OnClientClicked" OnClientMouseOver="OnClientMouseOver" OnClientMouseOut="OnClientMouseOut"
OnClientToggleStateChanging="OnClientToggleStateChanging" OnClientToggleStateChanged="OnClientToggleStateChanged">
</kettic:PerButton> JavaScript<script type="text/javascript">
function logEvent(info) {
var eventLog = $get("eventLog");
eventLog.innerHTML += info + "<br>";
}
function OnClientLoad(sender, eventArgs) {
logEvent("Load event: <b>" + sender.get_text() + "</b> is loaded.");
sender.set_autoPostBack(false);
}
function OnClientClicking(sender, eventArgs) {
logEvent("Clicking event: <b>" + sender.get_text() + "</b> fired clicking.");
}
function OnClientClicked(sender, eventArgs) {
logEvent("Clicked event: <b>" + sender.get_text() + "</b> was clicked.");
}
function OnClientMouseOver(sender, eventArgs) {
logEvent("MouseOver event: The mouse is over <b>" + sender.get_text() + "</b>.");
}
function OnClientMouseOut(sender, eventArgs) {
logEvent("MouseOut event: The mouse has left <b>" + sender.get_text() + "</b>.");
}
function OnClientCheckedChanging(sender, eventArgs) {
var checked = (sender.get_checked()) ? "checked" : "unchecked";
logEvent("CheckedChanging event: The <b>" + sender.get_text() + "</b> is " + checked + ".");
}
function OnClientCheckedChanged(sender, eventArgs) {
var checked = (sender.get_checked()) ? "checked" : "unchecked";
logEvent("CheckedChanged event: The <b>" + sender.get_text() + "</b> is " + checked + ".");
}
function OnClientToggleStateChanging(sender, eventArgs) {
logEvent("ToggleStateChanging event: <b>" + sender.get_text() + "</b> SelectedToggleStateIndex: " + sender.get_selectedToggleStateIndex());
}
function OnClientToggleStateChanged(sender, eventArgs) {
logEvent("ToggleStateChanged event: <b>" + sender.get_text() + "</b> SelectedToggleStateIndex: " + sender.get_selectedToggleStateIndex());
}
</script> | 
