AJAX ToggleButton Extender in ASP.Net

Shaili Dashora
9y
24.3k
0
1
100
Article

ToggleButton Extender

The ToggleButton Extender is an ASP.NET AJAX extender that can be attached to an ASP.NET CheckBox control. ToggleButton allows the use of custom images to show the state of the CheckBox. The behavior of the CheckBox is unaffected by this.

ToggleButton Properties

TargetControlID: The ID of the CheckBox to modify.
Image Height\Image Width: The height and width of the image.
CheckedImageUrl: The URL of the image to show when the toggle button is in the checked state.
UncheckedImageUrl: The URL of the image to show when the toggle button is in the unchecked state.

Let's understand it with an example.

Step 1: Open Visual Studio and create a ptoject named ToggleButtonExtender.

Step 2: Add one Webform named ToggleButton.

Step: Now in design view we will add a ToolkitScriptManager.

The source code looks like this:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="ToggleButton.aspx.cs" Inherits="ToggleButtonExtender.ToggleButton" %>
<%@ Register assembly="AjaxControlToolkit" namespace="AjaxControlToolkit" tagprefix="asp" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
</asp:ToolkitScriptManager>
</div>
</form>
</body>
</html>

Step 4: Now right-click in the Solution Explorer and we will add an images folder and put two images inside it. Here we use the smiley images Agree and DisAgree for ToggleButton selection.

Step 5: Now we will add an update panel to the project from AJAX Extensions from the Toolbox.

The source code looks like this.

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="ToggleButton.aspx.cs" Inherits="ToggleButtonExtender.ToggleButton" %>
<%@ Register assembly="AjaxControlToolkit" namespace="AjaxControlToolkit" tagprefix="asp" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
</asp:ToolkitScriptManager>
<br />
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
</asp:UpdatePanel>
</div>
</form>
</body>
</html>

Step 6: Now inside the content template we will add two check boxes and two Toggle button Extenders to each of them.

The source code looks like this.

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="ToggleButton.aspx.cs" Inherits="ToggleButtonExtender.ToggleButton" %>
<%@ Register assembly="AjaxControlToolkit" namespace="AjaxControlToolkit" tagprefix="asp" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
</asp:ToolkitScriptManager>
<br />
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:CheckBox ID="CheckBox1" runat="server" />
<asp:ToggleButtonExtender ID="ToggleButtonExtender1" runat="server"></asp:ToggleButtonExtender>
<asp:CheckBox ID="CheckBox2" runat="server" />
<asp:ToggleButtonExtender ID="ToggleButtonExtender2" runat="server"></asp:ToggleButtonExtender>
</ContentTemplate>
</asp:UpdatePanel>
</div>
</form>
</body>
</html>

Step 7: Now we will provide properties for both ToggleButtonExtender and we will add an ASP button to invoke the extender and a label to display the selected checkbox message by the following code.

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="ToggleButton.aspx.cs" Inherits="ToggleButtonExtender.ToggleButton" %>
<%@ Register assembly="AjaxControlToolkit" namespace="AjaxControlToolkit" tagprefix="asp" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
</asp:ToolkitScriptManager>
<br />
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:CheckBox ID="CheckBox1" Checked="true" Text='I Agree For Terms And Conditions' runat="server" /><br /><br/>
<asp:ToggleButtonExtender ID="ToggleButtonExtender1" runat="server"
TargetControlID="CheckBox1"
ImageWidth="25"
ImageHeight="25"
UncheckedImageUrl="~/Images/DisAgree.png"
CheckedImageUrl="~/Images/Agree.png"
CheckedImageAlternateText="Check"
UncheckedImageAlternateText="UnCheck">
</asp:ToggleButtonExtender>
<br />
<asp:CheckBox ID="CheckBox2" Checked="true" Text='I Disagree For Terms And Conditions' runat="server" /><br /><br />
<asp:ToggleButtonExtender ID="ToggleButtonExtender2" runat="server"
TargetControlID="CheckBox2"
ImageWidth="25"
ImageHeight="25"
UncheckedImageUrl="~/Images/DisAgree.png"
CheckedImageUrl="~/Images/Agree.png"
CheckedImageAlternateText="Check"
UncheckedImageAlternateText="UnCheck">
</asp:ToggleButtonExtender>
<br />
<asp:Button ID="Button1" runat="server" Text="Submit" OnClick="Button1_Click"/>
<br />
<br />
<asp:Label ID="Label1" runat="server" Text="Please Select The CheckBox"></asp:Label>
</ContentTemplate>
</asp:UpdatePanel>
</div>
</form>
</body>
</html>

Now the Design view looks like this.

Step 8: Now we will write code on the button click event to display the selected value.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
namespace ToggleButtonExtender
{
public partial class ToggleButton : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
}
protected void Button1_Click(object sender, EventArgs e)
{
Label1.Text=string.Format("I <b>{0}</b> For Terms And Conditions and I <b>{1}<b/> For Terms And Conditions",
(CheckBox1.Checked ? "Agree" : "Disagree"),(CheckBox2.Checked ? "Agree" : "Disagree"));
}
}
}