Adding controls to the Web Form

You can add controls to a WebForm in two ways:

• Using the toolbox: You can add controls in Design view of the WebForm (the .aspx file) by using the toolbox included in Visual Studio .NET. Within the toolbox, different types of controls are categorized under separate tabs, such as WebForms, HTML, and Data. For example, you can use the HTML tab to create HTML server controls, and the WebForms tab to create the ASP.NET server controls. All controls discussed previously belong to the Windows Forms tab of the toolbox. When you use the toolbox to add Web controls in Design view, the corresponding C# syntax is automatically generated.

Tip When you use HTML controls, you need to convert them to server controls to make them available for coding at the server end. You can do so by right-clicking the required HTML control and selecting the Run As Server Control option from the shortcut menu. This method enables you to create complex WebForms conveniently and quickly.

• Using Visual C# syntax to add the controls programmatically: You can also add Web controls to a WebForm by using the Visual C# syntax. You can use the C# syntax only in the HTML view of the page (.aspx file). The actual syntax depends on the type of control that you want to add. For example, the syntax used to add an HTML textbox control is as follows:

<input id=Text1 Type=text runat="server">

Note Visual Studio .NET enables you to add ASP.NET server controls by using an Extensible Markup Language (XML) tag. The syntax you use to add an ASP.NET TextBox control is as follows:

<asp:TextBox id=TextBox1 runat="server"></asp:TextBox>

Every control has an ID property that is used to uniquely identify the control. To set the property of a control at runtime, you need to use the following syntax:

Control ID.Property=Value

In the preceding syntax:

• Control_ID represents the ID property of the control.

• Property represents the property of the control.

• Value represents the value assigned to the control's property.

Figure 22-5 displays a WebForm that contains common Web controls, such as labels, text boxes, hyperlinks, radio buttons, check boxes, and buttons. As you can see, the WebForm is a user registration form. The form is designed to accept user input in various controls. After filling out the form, a user can click the Submit button to complete the registration process. The Submit button opens another WebForm displaying a message along with the user name entered in the name TextBox control. If the user clicks the Reset button, information filled in by the user is removed from the controls on the form.

Fir 14* W- FinriiB TMb IW,

n

J- -- . ■ - J ■ J ■ J J i

fldl n&j'idJ in-i1 iv.»-i»7-ilH'i.i THH^^foihW

2j LrK-i H

ME[!ICI«I3I>k E uini

an;

z)

r Mv"^"

SUM I fftHf I

J

fi]Uunj li11 ma! mail fi]Uunj li11 ma! mail

Figure 22-5: The user registration form displays the common controls that can be added to WebForms.

To create the form displayed in Figure 22-5, follow these steps:

1. Select the WebForm1.aspx form, and press F4 to view the Properties window.

2. In the Properties window, click the Ellipsis button for the bgColor property, and select Properties. The Color Picker dialog box opens.

3. In the Color Picker dialog box, select a shade of pink and click OK. The color of the WebForm changes to the color that you specified.

4. Add controls to the form and change their properties, as shown in Table 22-2.

Table 22-2: Controls to Add to the WebForm

Control

Properties

Placement

Label

Text=Registration Form Font

Bold=True Size=Larger

To be placed on the top, center of the form

Labels for Name, E-Mail, State, Subscription

The text for each label should be the same as the caption desired.

One below the other on the left side of the screen

TextBox

ID=txtName

Next to the Name label

TextBox

ID=txtEmail

Next to the E-Mail label

DropDownList

ID=lstState Items=Arizona, California, Florida

Next to the State label

CheckBoxList

ID=lstOptions Items=Books, Magazines

Next to the Subscription label

Button

ID=BtnSubmit Text=Reset

Below the Subscription label

Button

ID=BtnReset Text=Reset

Next to the Submit button

The interface of your WebForm, shown in Figure 22-6, is ready.

The interface of your WebForm, shown in Figure 22-6, is ready.

I* W- Fluffs IVILJ Ditu fpilll rtUr tivin Tkh n<V

It-LJ

I'liiki

Figure 22-6: Your WebForm should look like this after it is complete.

You add the functionality of the Submit and Reset buttons in the next section. However, before proceeding, add another form, which displays details about the registered user when he or she clicks Submit, to the Web application. To add the WebForm, follow these steps:

1. Select Project ^ Add WebForm. The Add New Item dialog box opens.

Tip If you do not find the Add WebForm menu option under the Project menu, click anywhere in the Form window and then select the menu option.

2. Select WebForm from the Templates list, specify a name for the WebForm (or retain the default name), and click Open to create a new WebForm.

You can use the newly added WebForm to display a message to the user. Therefore, you need to add a Label control to the form. Name the label lblMessage.

Having added controls to the form, you need to respond to the events generated by the controls on the form to handle user interaction. For example, if a user clicks a Submit button, the form might need to be processed and the data updated in a database.

The next section describes the procedure to handle events that are generated by controls on a WebForm.

0 0

Post a comment