Programming Examples

Are you a Programmer or Application Developer or a DBA? Take a cup of coffee, sit back and spend few minutes here :)

ASP 4.0 – CheckBox Control – Lab #008

ASP 4.0 CheckBox Control

In the Previous Lab #007, we learnt about the Command Buttons. Now, we will explore how to use ASP 4.0 CheckBox Control. The CheckBox Control is suitable to get a true or false choice from the user. For Example: A CheckBox showing the text Smoker expects only one input from the user, which has two choices (Yes or No). To show the text, one should use the Text property of the CheckBox Control. When the user clicks the CheckBox Control, it will raise the CheckedChanged Event. By default, the Checkbox will not do any Postback, but it can be changed via PostBack property. In this Lab #008, we will explore about the ASP 4.0 CheckBox Control.

1: Create WebForm – CheckBox Control

The below picture shows the Sub-Steps involved. The experienced gained in the previous labs helps you to follow these steps easily:

Step 1 - Create Form With CheckBoxes
Step 1 – Create Form With CheckBoxes

Before you proceed with the steps, create a WebForm called 04_CheckBoxControl.aspx. You can either use the website from the previous lab and add the web form or create a new empty website and add the Form. Now follow the sub-steps:

1) Enter the Free text: Pick Food Type and apply whatever formatting you like.
2) Create a CheckBox in the Form with CheckBox Label Fish.
3) Set Arial Font.
4) Set size as Large.
5) Set Text property as Fish. You can either use the Property Tab or Type the attributes in the source view or Even copy paste the content from the Reference Code section.
6) Unlike other two CheckBoxes, this CheckBox Control first shows the caption text. This is because of the TextAlign property set to Left.
7) One can set this property in the Source View or through the property window.
8) Below the CheckBox controls, place a Label Control. This control reports the Food preference submitted by the user.
9) Properties for the Label control are shown here. Note, you need to change the ID property to lblDisplay which is missed in this screenshot.

2: Handle CheckedChanged Event

In this step, we will handle the CheckedChanged Event of the CheckBox Control. Refer to the steps screen:

Step 2 - Handle CheckedChanged Event
Step 2 – Handle CheckedChanged Event

1) Pick the CheckBox Control labelled Egg and set its AutoPostBack property to true. By default, CheckBox will not do any postback and it depends on the form submit action. But, by setting this attribute (Property) to true, the CheckBox will submit the data to the form when its check state changes.
2) After setting AutoPostBack property, handle the CheckedChanged Event (Handling Events explained in the previous Labs).
[Repeat Steps 1 & 2 for the other two CheckBoxes]
3) Next, write a function called GetFoodPref as a class member (Refer Code Reference section). This function forms the string based on the CheckBox state. Also, all the CheckedChanged event handler calls this function to form the Food Preference String. Marker 3 shows how we check a check box is in checked state or not via the Checked Property. Asp will set this property to true when the checkbox is ticked by the user. Similar if else condition will check the state of the other two Check Boxes to form the Food Preference string.
4) Shows the Checked-Changed event handler for the Fish CheckBox.
5) In the event handler, we set the Label control text with the Food Preference. The event handler reads the same for the other two CheckBoxes as well.

3. Running the CheckBox ASP 4.0 Example

The Screenshot below shows what you can do with this example:

Step 3 - Running the Web Form
Step 3 – Running the Web Form

1) Start the Website from Visual Studio. Notice that all the CheckBox Controls displayed on the Web Form. The Blue Label is not yet updated.
2) Place a check mark on the check box labelled Fish. This performs a postback and runs the event routine on the server.
3) The server forms the food preference string and returns that to the web browser control. You can see the label gets the update from the server as part of the Post back. Note, the server remembers the previous check mark on the Fish. This is an important feature of the Postback, and the server puts back the control state when it is sending the reply to the browser.
4) Place a check mark on the check box labelled Egg.
5) Notice the Food preference changes.

4. Code Reference



Categories: Asp 2.0

Tags: , , ,

Do you like this Example? Please comment about it for others!!

This site uses Akismet to reduce spam. Learn how your comment data is processed.