Introduction to ASP.NET Checkbox
Checkbox control is inherited from the web controls class, which is used when there is a need to get multiple inputs from the user. Its checkbox of control takes inputs in the form of ‘True’ or ‘False’, which can be converted into different reasons.
Syntax:
<asp:CheckBox AccessKey="string" AutoPostBack="True|False" BackColor="color name|#dddddd" BorderColor="color name|#dddddd" BorderStyle="NotSet|None|Dotted|Dashed|Solid|Double|Groove|Ridge| Inset|Outset" BorderWidth="size" CausesValidation="True|False" Checked="True|False" CssClass="string" Enabled="True|False" EnableTheming="True|False" EnableViewState="True|False" Font-Bold="True|False" Font-Italic="True|False" Font-Names="string" Font-Overline="True|False" Font-Size="string|Smaller|Larger|XX-Small|X-Small|Small|Medium| Large|X-Large|XX-Large" Font-Strikeout="True|False" Font-Underline="True|False" ForeColor="color name|#dddddd" Height="size" ID="string" nCheckedChanged="CheckedChanged event handler" OnDataBinding="DataBinding event handler" OnDisposed="Disposed event handler" OnInit="Init event handler" OnLoad="Load event handler" OnPreRender="PreRender event handler" OnUnload="Unload event handler" runat="server" SkinID="string" Style="string" TabIndex="integer" Text="string" TextAlign="Left|Right" ToolTip="string" ValidationGroup="string" Visible="True|False" Width="size"/>
Example:
<asp:CheckBox AccessKey=”test” AutoPostBack=”true” BackColor=”Yellow” BorderColor=”#ff0000″ BorderStyle=”Double” BorderWidth=”3″ CausesValidation=”true” Checked=”false” ClientIDMode=”AutoID” CssClass=”Test” Enabled=”true” EnableTheming=”true” EnableViewState=”true” Font-Bold=”true” Font-Italic=”false” Font-Names=”ABC” Font-Overline=”false” Font-Size=”Large” Font-Strikeout=”false” Font-Underline=”true” ForeColor=”Violet” Height=”10″ ID=”chkbx_TestBox” OnCheckedChanged=”chkbx_TestBox_CheckedChanged”OnDataBinding=”chkbx_TestBox_CheckedChanged” OnDisposed=”chkbx_TestBox_CheckedChanged” OnInit=”chkbx_TestBox_Init” OnLoad=”chkbx_TestBox_Init” OnPreRender=”chkbx_TestBox_Init” OnUnload=”chkbx_TestBox_Unload” runat=”server” SkinID=”Test” TabIndex=”3″ Text=”CheckifTrue” TextAlign =”Right” ToolTip=”Check” ValidateRequestMode=”Enabled” ViewStateMode=”Enabled” ValidationGroup=”TestGroup” Visible=”true” Width=”10″ />
The above code creates a checkbox button with ID as ‘chkbx_TestBox’ which has yellow as back color. The checkbox button also has facility to bind to database field which will convert value to checked and unchecked. The OnDataBinding event binds the database field to the check box button. The button can also render as checked by default and as visible or non-visible by using ‘Checked’ and ‘visible’ properties respectively.
Properties of ASP.NET CheckBox
Below are the properties of ASP.NET CheckBox:
- AccessKey: The value set at the access key helps to navigate to the other web server control.
- Attributes: The properties used to render the checkbox button control on the web page.
- AutoPostBack: The property sets whether the checkbox automatically posts back to the webserver.
- BackColor: This property sets the back color of the control.
- BorderColor: The border of the checkbox control can be given a different color than the back color.
- Checked: The value sets or gets whether the checkbox will be rendered as checked by default
- Context: This property gets the HttpContext object for the current web request.
- Enabled: This property can set the value or return the value already set which tells if the checkbox is enabled by default.
- Forecolor: The property sets the color of the font of the text of the checkbox button.
- Height: The height property sets the height of the control.
- ID: With the help of the value set in ID property, it can be used to access the control anywhere on the web page.
- Text: The Text property sets the text that will be displayed with the checkbox button control.
- Visible: The property decides whether the control will be rendered on the web page.
- Width: The property sets the width f the control.
Examples of ASP.NET CheckBox
Below are the examples of ASP.NET CheckBox.
1. Open Visual Studio 2017 -> File -> New -> Project -> Select ASP.NET Web Application
2. Select Web Forms as we are demonstrating a simple Checkbox button.
3. The checkbox button can be added in the .aspx part of the web page using the following:
Code:
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="WebApplication2.Default" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:CheckBox ID="chkbx_ExampleBox" Text ="Check to say Yes" Checked ="false" BackColor="#33ccff" Font-Bold="true" runat="server" OnCheckedChanged="chkbx_ExampleBox_CheckedChanged" AutoPostBack="true"/>
<asp:Label ID="Label1" runat="server"></asp:Label>
</div>
</form>
</body>
</html>
4. The checkbox control can also be added from the designer section of the .aspx page by dragging and dropping the CheckBox button option from the Toolbox
5. The properties of the checkbox control can be set from the properties window present on the right side of the IDE.
6. The code to display text on the check of the checkbox button can be written as:
Code:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
namespace WebApplication2
{
public partial class Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
}
protected void chkbx_ExampleBox_CheckedChanged(object sender, EventArgs e)
{
if(chkbx_ExampleBox.Checked)
{
Label1.Text = "You have checked the checkbox";
}
else
{
Label1.Text = string.Empty;
}
}
}
}
The above code will display text in the Label control if the checkbox button is checked. The OnCheckChanged event causes the auto postback of the web page and then the control comes to the ‘if’ condition where it checks whether the checkbox is checked or not. As the checkbox is checked, the control goes inside the if loop and the message “You have checked the checkbox” is displayed on the web page with the help of ‘Text’ property of the web control. If the user unchecks the checkbox, the postback happens again, this time the control goes in to ‘else’ part of the ‘if’ loop and the ‘Text’ property of the ‘label’ control is set to empty.
7. The final output will look like.
Conclusion
The AutoPostBack property of the checkbox button is standard as other controls, but the SelectedIndexChanged is the most property in the control which causes an immediate post back as soon as the checkbox is selected. Apart from the binding properties of the checkbox button, it also supports themes and skins. The checkbox button can also have CSS styling for which it has a CssClass property defined which can be mentioned while creating Checkbox Button. The value can point to any external CSS file from which the styling needs to be done. The checkbox button comes with the facility to select multiple options for the user.
Recommended Article
This is a guide to the ASP.NET CheckBox. Here we discuss the introduction to ASP.NET CheckBox and its advanced properties along with its examples as well as Code Implementation. You can also go through our other suggested articles to learn more-
