When a user clicks the C1SwitchButton control, the client-side OnClientCheckedChanged event is fired. You can then use the value of the Checked property to determine which option the user selected. In this topic, you will check for the value of the Checked property when the OnClientCheckedChanged event is fired; the value of the Checked property will then determine which string is set to the Text property of a standard Label control. This topic assumes that you have created an AJAX-enabled ASP.NET project that contains a ScriptManager control (see Creating an AJAX-Enabled ASP.NET Project).
Complete the following steps:
1. Add a C1SwitchButton control and a standard Label control to your project.
2. In Design view, right-click the C1SwitchButton control and select Properties.
C1SwitchButton's properties are revealed in the Properties window.
3. Click the OnClientCheckedChanged property's drop-down arrow and select Add new client side handler.
Source view opens. Observe that the OnClientCheckedChanged property of the C1SwitchButton control has been set to C1SwitchButton1_OnClientCheckedChanged. Also, observe that the following script has been added to the project.
<script type="text/javascript" id="ComponentOneClientScript">
function C1SwitchButton1_OnClientCheckedChanged(button){
};
</script>
4. Now you're going to create a client-side script that checks for the value of the Checked property and then sets the text of the Label control according to the property's value. To complete this task, place the following JavaScript between the curly braces:
function C1SwitchButton1_OnClientCheckedChanged(button){
if (button.get_checked() == true) {
document.getElementById("Label1").innerHTML = "Volume is ON";
}
else {
document.getElementById("Label1").innerHTML = "Volume is OFF";
}
Note: In order for this script to work, the Label control's ID property must be set to "Label1".
5. Save the project and open it in a Studio for iPhone-compatible browser.
C1SwitchButton loads in the OFF position.
6. Click the C1SwitchButton control to set it to the ON position and observe that the Label control's text changes to "Volume is ON".
7. Click the C1SwitchButton control to set it to the OFF position observe that the Label control's text changes to "Volume is OFF".