Ajax controltoolkit Learning Log-togglebutton (29)

The togglebuttonextender control is used to extend the checkbox control and display it graphically. You can select either or not.

Here is an example:

1) Create an ASP. NET Ajax-enabled web project in vs2005 and name it togglebuttonextender1.

2) drag and drop an updatepanel control on the page, and drag and drop two checkboxes in the control to add a togglebuttonextender control for the two checkboxes respectively. Then, add a button and label in updatepanel to display the user's selection.

CodeAs follows: 1 < ASP: updatepanel ID = "Updatepanel1" Runat = "Server" >
2 < Contenttemplate >
3 < ASP: checkbox ID = "Checkbox1" Runat = "Server" Checked = "True" Text = "I like ASP. NET"   />
4 < C0: togglebuttonextender ID = "Togglebuttonextender1" Runat = "Server" Checkedimagealternatetext = "Check"
5 Checkedimageurl = "Togglebutton_checked.gif" Imageheight = "19" Imagewidth = "19" Targetcontrolid = "Checkbox1"
6 Uncheckedimagealternatetext = "Uncheck" Uncheckedimageurl = "Togglebutton_unchecked.gif" >
7 </ C0: togglebuttonextender >
8 < ASP: checkbox ID = "Checkbox2" Runat = "Server" Checked = "True" Text = "I like ASP. NET Ajax"   /> < BR />
9 < C0: togglebuttonextender ID = "Togglebuttonextender2" Runat = "Server" Checkedimagealternatetext = "Check"
10 Checkedimageurl = "Togglebutton_checked.gif" Imageheight = "19" Imagewidth = "19" Targetcontrolid = "Checkbox2"
11 Uncheckedimagealternatetext = "Uncheck" Uncheckedimageurl = "Togglebutton_unchecked.gif" >
12 </ C0: togglebuttonextender >
13 < ASP: button ID = "Button1" Runat = "Server" Onclick = "Button#click" Text = "Button"   /> < BR />
14 < BR />
15 < ASP: Label ID = "Label1" Runat = "Server" > </ ASP: Label >
16 </ Contenttemplate >
17 </ ASP: updatepanel >

Attribute description:

Checkedimagealternatetext: Select the text to replace the image in the checkbox.
Checkedimageurl: Select the path of the image in the checkbox.
Uncheckedimagealternatetext: The replaced Text of the image in the checkbox is not selected.
Uncheckedimageurl: The path of the image in the checkbox is not selected.
Imageheight: The height of the image.
Imagewidth: The image width.
Targetcontrolid: The target control of the control.

3) add an event to the button to display the selected information.

The Code is as follows:

1 Label1.text =   String . Format ( " You indicated that you <B> {0} </B> like ASP. NET and you <B> {1} </B> like ASP. NET Ajax " ,
2 (Checkbox1.checked ?   " Do " : " Do not " ), (Checkbox2.checked ?   " Do " : " Do not " ));

4) press Ctrl + F5 to view the effect in the browser.

As follows: