Toggle Button|UI Control for ASP.NET AJAX, C#, VB.NET

Toggle Button in ASP.NET AJAX

Home > How to > Toggle Button

Information to Toggle Button

The PerButton control can be easily transformed into a toggle button. And by defining different values for the ToggleType property, users can easily change the look of the toggle button. For instance, you can make the toggle button look like a check box or a radio button. And the toggle button has been widely used in the projects where completely customized check boxes or radio buttons are needed.

And in this online tutorial, we will offer you a sample programming guidance on how to create and add a toggle button in asp.net web application using our PerButton component.

Toggle Properties

Button Type: The PerButton offers several options for the Button Type properties, including ToggleButton, StandardButton, LinkButton and SkinnedButton.
Toggle Type: to make sure that users can create a toggle button whose appearance is fully tailored at their requests, the PerButton control also provides three available options for the Toggle Type property, which are CheckBox, Radio and CustomToggle.
GroupName: this property is a unique feature that is only owned by the toggle radio button.
ToggleStates: this property controls the button state after it is clicked.

Common Appearance of Toggle Button

Just as is said in above text, the appearance of toggle button is fully customized. And in this part, we will offer the ASP.NET code for you on how to create a richly styled toggle button. And here we will take the creation of check box as an example.

<kettic:PerButtonID="PerButtton1" runat="server"  Text="Check Button 1" ButtonType="StandardButton" ToggleType="CheckBox"></kettic:PerButton>
<kettic:PerButtonID="PerButton2" runat="server"  Text="Check Button 2" ButtonType="LinkButton" ToggleType="CheckBox"></kettic:PerButton>
<kettic:PerButtonID="PerButton3" runat="server"  Text="Check Button 3" ButtonType="ToggleButton" ToggleType="CheckBox"></kettic:PerButton>

This is the screen shot of above three specifically styled toggle check box buttons. And the look of toggle radio button can be modified and customized in the same way.

How to Build a Simple Toggle Button

In this part, we offer you a detailed coding guidance on how to create a toggle button in ASP.NET web application. To achieve AJAX effect, please drag an AjaxPanel component from toolbox to aspx web page and then drag a button control from toolbox to that AjaxPanel. By the way, please make sure that you have installed .NET Framework 3.5 or above versions and that you have installed all the necessary dlls into your ASP.NET web application.

<kettic:PerButtonID="btnVolume" runat="server" ButtonType="ToggleButton" ToggleType="CustomToggle"
Width="100px" Height="60px"AutoPostBack="false" Skin="Metro">
<ToggleStates>
<kettic:PerButtonToggleStateImageUrl="../../../../Images/Button/Spring.jpg" 
Text="Spring" Selected="true" IsBackgroundImage="True"></kettic:PerButtonToggleState>
<kettic:PerButtonToggleStateImageUrl="../../../../Images/Button/Summer.jpg"
Text="Summer" IsBackgroundImage="True"></kettic:PerButtonToggleState>
<kettic:PerButtonToggleStateImageUrl="../../../../Images/Button/Autumn.jpg" 
Text="Autumn" IsBackgroundImage="True"></kettic:PerButtonToggleState>
<kettic:PerButtonToggleStateImageUrl="../../../../Images/Button/Winter.jpg" 
Text="Winter" IsBackgroundImage="True"></kettic:PerButtonToggleState>
</ToggleStates>
</kettic:PerButton>

Related Standard Button Links

Here we recommend a link for those who want to build a toggle button in ASP.NET web application using C# code. View more at build toggle button using c#.

ASP.NET AJAX UI Controls

ASP.NET AJAX Chart UI Control ASP.NET AJAX Grid UI Control ASP.NET AJAX Barcode UI Control

ASP.NET AJAX Button UI Control

Overview Getting Started

Button Type

Standard Button Icon Button Image Button Link Button

Toggle Button

Split Button

Client Prpgramming

Button Event

Server Programming