AJAX ControlToolkit学习日志-ToggleButton(29)

         ToggleButtonExtender控件用于扩展CheckBox控件，以图形方式来显示。同样可以进行选择和不选。

下面来看一个示例：

1)在VS2005中新建一个ASP.NET AJAX-Enabled Web Project项目工程，命名为ToggleButtonExtender1。

2)在页面上拖放一个UpdatePanel控件，在该控件里拖放两个CheckBox，分别为这两个CheckBox添加一个ToggleButtonExtender控件。然后再在UpdatePanel里添加一个Button和Label，用于显示用户的选择。

代码如下：

 1        <asp:UpdatePanel ID="UpdatePanel1" runat="server">
 2            <ContentTemplate>
 3                <asp:CheckBox ID="CheckBox1" runat="server" Checked="True" Text="I like ASP.NET" />
 4                <cc1: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                </cc1:ToggleButtonExtender>
 8                <asp:CheckBox ID="CheckBox2" runat="server" Checked="True" Text="I like ASP.NET AJAX" /><br />
 9                <cc1: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                </cc1:ToggleButtonExtender>
13                <asp:Button ID="Button1" runat="server" OnClick="Button1_Click" Text="Button" /><br />
14                <br />
15                <asp:Label ID="Label1" runat="server"></asp:Label>
16            </ContentTemplate>
17        </asp:UpdatePanel>

属性说明：

         CheckedImageAlternateText：选中CheckBox中图像的替换文本。
         CheckedImageUrl：选中CheckBox中图像的路径。
         UncheckedImageAlternateText：未选中CheckBox中图像的替换文本。
         UncheckedImageUrl：未选中CheckBox中图像的路径。
         ImageHeight：图像的高度。
         ImageWidth：图像的宽度。
         TargetControlID：该控件的目标控件。

3)对Button添加事件处理，用于显示选中的信息。

代码如下：

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)按下CTRL+F5,在浏览器中查看效果。

效果图如下：