ASP.NET Web Control: The Check Box

	Web Control: The Check Box

Check Box Fundamentals

Introduction

A check is squared object that allows a user to click. If the square is empty, when clicked, the square would receive a check mark. If the square had a check mark, if clicked, the check mark would be removed.

When a check box has a check mark, it holds a Boolean value of true. When it is not marked, it has a value of false.

Creating a Check Box

To visually create a check box, in the Standard section of the Toolbox, drag the CheckBox and drop it on the form. To manually create a check box, create an asp:CheckBox tag. Here is an example:

<asp:CheckBox></asp:CheckBox>

In reality, a check box is created from a control named CheckBox that is implemented by a class of the same name.

After creating the asp:CheckBox tag, you can add the necessary attribute to it. For example, we already know that every web control is equipped with an attribute named ID and every ASP.NET control has the runat="server" attribute. Every HTML control is also equipped with the style attribute. Based on this, here is an example of creating a check box:

<%@ Page Language="C#" %>
<html>
<head>
<title>Altair Real Estate</title>
</head>
<body>

<h3>Altair Real Estate</h3>

<p> 
<form id="frmRealEstate" method="post" runat="server">
<asp:CheckBox id="chkHasCarGarage" style="left: 20px" runat="server"></asp:CheckBox>
</form>
</p>

</body>
</html>

Characteristics of a Check Box

The Caption of a Check Box

As mentioned already, a check box is meant to display a squared box. Unfortunately, this box doesn't indicate what the control is used for. Therefore, the control is usually accompanied by a string. To support this, the asp:CheckBox tag is equipped with an attribute named Text. To specify the caption of the control, assign the desired string to the Text attribute. Here is an example:

<%@ Page Language="C#" %>
<html>
<head>
<title>Altair Real Estate</title>
</head>
<body>

<h3>Altair Real Estate</h3>

<p> 
<form id="frmRealEstate" method="post" runat="server">
    <asp:CheckBox id="chkHasCarGarage"
	           style="left: 20px"
	           runat="server"
	           text="Has Car Garage"></asp:CheckBox>
</form>
</p>

</body>
</html>

This would produce:

Real Estate

The Caption Alignment of a Check Box

Although it usually appears on the right, the caption of a check box can be positioned to the left or the right side of the squared button. This characteristic is controlled by the TextAlign attribute. Its default value is Right. If you want the caption to be positioned on the left of the squared box, assign "Left" to this attribute. This can be done as follows:

<%@ Page Language="C#" %>
<html>
<head>
<title>Altair Real Estate</title>
</head>
<body>

<h3>Altair Real Estate</h3>

<p> 
<form id="frmRealEstate" method="post" runat="server">
    <asp:CheckBox id="chkHasCarGarage"
	          style="left: 20px"
	          text="Has Car Garage"
		  TextAlign="Left"
	          runat="server"></asp:CheckBox>
</form>
</p>

</body>
</html>

Checking a Check Box

Besides the ID and the runat="server" attributes, probably the most important visual characteristics of a check box is its check mark. When it is checked, the control has a value of true. Otherwise, its value is false. To support this, the asp:CheckBox is equipped with an attribute named Checked whose values can be True or False.

When designing the form, if you want the check box to display a checked mark, add the Checked attribute and assign the desired value. Here is an example:

<%@ Page Language="C#" %>
<html>
<head>
<title>Altair Real Estate</title>
</head>
<body>

<h3>Altair Real Estate</h3>

<p> 
<form id="frmRealEstate" method="post" runat="server">
    <asp:CheckBox id="chkHasCarGarage"
	           style="left: 20px"
	           runat="server"
		   Checked="True"
	           text="Has Car Garage"></asp:CheckBox>
</form>
</p>

</body>
</html>

When using a check box, the user is supposed to check or uncheck it by clicking it. This action changes the state of the control. When the user clicks a check box, the control changes its state and fires an event called CheckedChanged. This event is implemented by the EventArgs class. In other words, the class that implements it doesn't give any other information than to let you know that the control has been clicked.

To visually implement this event, click the control on the form and, in the Events section of the Properties window, double-click CheckedChange. This event is handled by the OnCheckedChanged attribute. To manually implement this event, create a method that is passed an Object and an EventArgs arguments. In the asp:CheckBox tag, add the OnCheckedChanged attribute and assign the name of the method to it. Here is an example:

<%@ Page Language="C#" %>
<html>
<head>

<script runat="server">
private void CheckBoxWasClicked(Object sender, EventArgs e)
{
}
</script>

<title>Altair Real Estate</title>
</head>
<body>

<h3>Altair Real Estate</h3>

<p> 
<form id="frmRealEstate" method="post" runat="server">
  <asp:CheckBox id="chkHasCarGarage"
		style="left: 20px"
	        runat="server"
		Checked="True"
		OnCheckedChanged="CheckBoxWasClicked"
	        text="Has Car Garage"></asp:CheckBox>
</form>
</p>

</body>
</html>

Automatically Posting Back

As its appearance suggests, a check box invites a visitor to click the control. When this has been done, you can indicate whether the should post the result to the server. To support this, the asp:CheckBox tag is equipped with a Boolean attribute named AutoPostBack. Its default value is "False". If you want to change it, type this attribute and assign "True" to it. This would be done as follows:

<asp:CheckBox id="chkHasCarGarage"
	      AutoPostBack="True"
	      style="left: 20px"
	      runat="server"
	      Checked="True"
	      text="Has Car Garage"></asp:CheckBox>