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,在瀏覽器中查看效果。

如下：