Saturday, December 25, 2010

[ ASP.Net ] - Control Validation and Absolute Layout

1. Introduction

This article makes you understand what is validation control, how will you use server side controls. We will create simple asp dot net page to create a user account creation page. Below is screen shot of the form design:

How it Works

The user must enter his or her name in the first textbox. Then using the combo box the account type should be selected. Then the resident country combo box is used to specify the country. If name and account type is not specified, the form should report it so that user should make the correction. When account type selected is Forever the other country radio button should be hidden.

2. Designing the Form

2.1 Design Steps

1) As you see the controls are not in the default layout. If you already placed two or more controls you are aware the default flow layout. To make it appear like the above screenshot; change the layout to an absolute position. To do that click on "Layout|Position|Auto Position Option"
2) From the dialog displayed, select the Absolutely positioned option from the combo box.
3) After this, Place four Label, One text box, one Dropdownlist, 4 Radio buttons, One push button control on the form. Place it as shown in the above screenshot.
4) Place "Required Field Validation Control" next to the Name text box.
5) Place the "Compare Validation Control" next to the Drop Down List control.
6) Place "Validation Summary" at the end of the form.

2.2 Control Properties

To Set the Properties: Open the attached website for your reference, select each control and set the Property values that appears in bold for your web form. Or if you already downloaded the video you can sit back and watch it. I will explain some important properties below:

Account Type Dropdown:  The items are added using the items collection. Then the Auto-Post back property is set to false. If you note down, the How it works in the introduction section tells you that a radio button visibility is set to false when the last account type is selected. So the auto postback will send all the form information back to the web server when the selection in the combo box is changed.

Resident Radio button: For all the radio buttons, Group Name is set to grpResident. This allows all the four radio buttons in one group.

Required field: If you remember this control is placed next to the Name text box. The "Control To Validate" property tells which control needs to be validated by this validation control. In our example text box is selected for this property. Error Message property specifies what error message should be displayed when the validation control reports a failure. However, this error text will be displayed on the Validation summary control. The text property tells what needs to be displayed in the validation control itself when the validation fails. The error message is set to: Name is a required field. Do not leave it Empty. And text property is set to: *

In our example when the done button is clicked leaving the text box empty, an asterisk is displayed next to the text box and error message set to this control is displayed in the validation summary control added at the end of the form.

Compare Field: This validation control as the name states compares a value and reports success or failure about it. In our example, if you do not make any selection, the error is shown in the validation summary control displayed at the end of the form. In the reference, the application has a look at the bold property values for this control. Below is the explanation:

We do specify to this what needs to be compared. So Pick your Account which is string specified in the ValuetoCompare property. Then, as the type property is already a string, we no need to do anything. Set the Operator to Not Equal. Other property I hope you can understand as you already did it for the required field validation control. Now, when you change the selection, the Not Equal comparison is performed against the constant string Pick your Account.

3. Coding

Click the drop down list control in the property view and double click the Selected Index changed property. This will bring you to event handler code. Now place the following code in the event handler:

//Postback_001: Hide the Radio Button 3, when the Accout type is Forever
if (DropDownList1.Text == "Forever")
    RadioButton3.Visible = false;
    RadioButton3.Visible = true;

Note that we are setting the visibity of the Other Radio to false when the selection is “Forever”. As you set the Auto-Post back property to true, the control sends the post back message from the client to the server and this event run in the server machine and the html is pushed back to the client with a hided radio button.

4. Run the Application and Test it

1) When the form is visible, click the Done button. Note the required field and Compare validation is performed and the error message are displayed on the summary validation control.
2) Fill the name and Select Forever from the combo box control. Note that Server Auto post back by the push button is performed and other radio button is disabled.

Note: The attached application is created in VS2005 ide. If you have latest version say “yes” to the conversion wizard.
To use the attached application,
1) Extract the attachment
2) Select File | Open | Web Site…
3) Select the extracted folder

To See the Form Design live, Download the Screen Cam here.

Source Code : Download

No comments:

Post a Comment

Leave your comment(s) here.

Like this site? Tell it to your Firend :)