AJAX Control ToolKit ToggleButton Extender Tutorial Using ASP.NET C#

Welcome to another AJAX tutorial, today we will be demonstrating a simple example of the ToggleButton Extender.

In this tutorial we will be going over the ToggleButton extender and how it can be used in a ASP.NET Webform or WebPage using C#.
We will make a simple application, such as poll where you can choose if you like ASP.NET or not.
But Before that
We used over 10 web hosting companies before we found Server Intellect. Our new cloud server,was set up in less than 24 hours. We were able to confirm our order over the phone. They responded to our inquiries within an hour. Server Intellect’s customer support and assistance are the best we’ve ever experienced.
The ToggleButton Extender is an ASP.NET AJAX extender that can be attached to an ASP.NET CheckBox control. ToggleButton enables the use of custom images to show the state of the CheckBox. The behavior of the CheckBox is unaffected.


Here is a quick preview of what we will be building.

1. Open Visual Studio and open a new webform.
2. In design view we will want to add a tool script manager.

<asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
        </asp:ToolkitScriptManager>

1. Now right click in the solution explorer and we will add an images folder that will contain two images, we used a thumbs up and thumbs down image since we are building a toggle selection panel.
2. Now let’s add an update panel to our project.

<asp:UpdatePanel ID="UpdatePanel1" runat="server">
            <ContentTemplate>

Now inside of our content template node we will add 2 check boxes and we will also add 2 Toggle button Extenders to each of them. Below is the markup:

b>ToggleButton Demonstration</b><br /><br />
        <asp:UpdatePanel ID="UpdatePanel1" runat="server">
            <ContentTemplate>
                <asp:CheckBox ID="CheckBox1" Checked="true" Text="I like ASP.NET" runat="server"/><br />
                <asp:ToggleButtonExtender ID="ToggleButtonExtender1" runat="server"
                    TargetControlID="CheckBox1"
                    ImageWidth="19"
                    ImageHeight="19"
                    UncheckedImageUrl="Images/ToggleButton_Unchecked.gif"
                    CheckedImageUrl="Images/ToggleButton_Checked.gif"
                    CheckedImageAlternateText="Check"
                    UncheckedImageAlternateText="UnCheck" />
        
                <asp:CheckBox ID="CheckBox2" Checked="true" Text='I like ASP.NET AJAX' runat="server"/><br /><br />
                <asp:ToggleButtonExtender ID="ToggleButtonExtender2" runat="server"
                    TargetControlID="CheckBox2"
                    ImageWidth="19"
                    ImageHeight="19"
                    UncheckedImageUrl="Images/ToggleButton_Unchecked.gif"
                    CheckedImageUrl="Images/ToggleButton_Checked.gif"
                    CheckedImageAlternateText="Check"
                    UncheckedImageAlternateText="UnCheck" />
 
                <asp:Button ID="Button1" runat="server" Text="Submit" OnClick="Button1_Click" />
                <br /><br />
                <asp:Label ID="Label1" runat="server" Text="[No response provided yet]" />
            </ContentTemplate>
        </asp:UpdatePanel>

1. As you can see we added an ASP button to invoke the extender and then we supplied a label to display the selected checkbox message.
2. When you look at the Extender source We set the image height and width and referenced the images we added in our images folder. 
3. Now we code our Button Click event to display the selected value. Below is the method used.

 protected void Button1_Clickundefinedobject sender, EventArgs e)
    {
        Label1.Text = string.Formatundefined"You indicated that you <b>{0}</b> like ASP.NET and you <b>{1}</b> like ASP.NET AJAX",
            undefinedCheckBox1.Checked ? "do" : "do not"), undefinedCheckBox2.Checked ? "do" : "do not"));
    }

As you can see this is a very simple extender to use and very user friendly.

After loading the site in your browser the page will look like this.

See how easy that was?Not as easy when ….
We chose Server Intellect for its cloud servers, for our web hosting. They have managed to handle virtually everything for us, from start to finish. And their customer service is stellar.
Thank you for reading our tutorial on AJAX Controls, We Aim to provide the best Tutorials. Learning AJAX in ASP.NET is easy and we hope you are getting your hands dirty by trying different things and coming up with your own ideas. If you have any questions or concerns, please feel free to suggest a Tutorial or you can comment below in the comments section.