Tài liệu Building a More Complex Application doc

Building a More Complex Application In this section, you'll see a more complex Web form that uses Label, TextBox, RadioButtonList, DropDownList, and RequiredFieldValidator controls.. The

Trang 1

Building a More Complex Application

In this section, you'll see a more complex Web form that uses Label, TextBox,

RadioButtonList, DropDownList, and RequiredFieldValidator controls The form will prompt the user for their name (a required field), favorite season (spring, summer, fall, or winter), and gender (male or female) The form will also feature a Button control, which when pressed will set the Text property of one of the Label controls to a string containing the user's name, gender, and favorite season Figure 15.4 shows how your final form will appear

Figure 15.4: The appearance of the final form

Perform the following steps:

1 To create the new project, select File ➣ New Project in VS NET Select Visual C# Projects from the Project Types area on the left of the New Project dialog box, and select ASP NET Web Application from the Templates area on the right Enter

http://localhost/MyWeb-Application2 in the Location field VS NET will

display a blank form to which you can add controls

2 Now, add the four Label controls listed in Table 15.2 to your blank form This table shows the ID and Text property to set for each of your Label controls

Table 15.2: Label CONTROLS

ID PROPERTY Text PROPERTY

HelloLabel Hello

NameLabel Enter your name

SeasonLabel Favorite season

Trang 2

Table 15.2: Label CONTROLS

ID PROPERTY Text PROPERTY

SexLabel Sex

3 Next, add a TextBox control to the right of NameLabel Set the ID property for your TextBox control to NameTextBox The user will enter their name in

NameTextBox when the form is run

4 We want the user to have to enter their name; if they don't, we want to display a message prompting them to do so To achieve this, you use a

RequiredFieldValidator control Add a RequiredFieldValidator control below NameTextBox Set the ID property for your Required-FieldValidator control to NameRequiredFieldValidator Set the Text property to You must enter your name! Finally, set the ControlToValidate property to NameTextBox

5 Next, add a RadioButtonList control to the right of SeasonLabel The user will select their favorite season from this control Set the ID property for your

RadioButtonList control to SeasonRadioButtonList To add radio buttons to

SeasonRadioButtonList, click the ellipsis (…) button in the Items property This displays the ListItem Collection Editor, which you use to add, modify, or remove items in the Items collection for the control When the form is run, any items you add to the collection are displayed as radio buttons Figure 15.5 shows the

ListItem Collection Editor with the required entries for your form

Figure 15.5: The ListItem Collection Editor

6 The Selected property indicates whether the item is initially selected in the running form The Text property contains the text displayed with the item The Value property is the returned value when the item is selected

7 Now click the Add button to add the first item to your RadioButtonList control Set the Selected property for the item to True-this causes the radio button to be

Trang 3

initially selected Set the Text property for the item to Spring; this is the text displayed in the radio button Set the Value property to 0; this is the actual value selected Table 15.3 shows the Selected, Text, and Value properties for this radio button, along with the three other radio buttons to add to your RadioButtonList control

Table 15.3: RadioButtonList ITEMS

Selected PROPERTY Text PROPERTY Value PROPERTY

8 Next, add a DropDownList control to your form This control will allow a user to select their gender (male or female) Set the ID property for your DropDownList control to SexDropDown-List You add items to a DropDownList control using the ListItem Collection Editor, which you access using the ellipsis button through the Items property Open the ListItem Collection Editor and add the items shown

Table 15.4: DropDownList ITEMS

Selected PROPERTY Text PROPERTY Value PROPERTY

9 Finally, add a Button control to your form Set the ID property for your Button control to OkButton, and set the Text property to Ok Double-click OkButton to edit the code for the OkButton_Click() method, and add the following lines of code to this method:

10 HelloLabel.Text =

11 "Hello "+ NameTextBox.Text +

12 ", you are "+ SexDropDownList.SelectedItem.Text +

13 "and your favorite season is " +

14 SeasonRadioButtonList.SelectedItem.Text;

As you can see, this line sets the Text property for the HelloLabel control to a string containing the user's entry in the NameTextBox, SexDropDownList, and

SeasonRadioButton controls

Trang 4

Run your completed form by pressing Ctrl+F5 Press the OK button without entering a name, and you'll see the message "You must enter your name!", as shown in Figure 15.6 This message comes from the NameRequiredFieldValidator control

Figure 15.6: Message from the NameRequired-FieldValidator control

When you've finished running your form, close it and return to the VS NET form

designer You can view the HTML containing the ASP.NET tags for your form by

clicking the HTML link at the bottom of the form designer Click the HTML link to view the code for your form Listing 15.3 shows the WebForm1.aspx file for the form You'll notice that this file contains the various controls that were added to the form

Listing 15.3: THE WebForm1.aspx FILE

<%@ Page language="c#" Codebehind="WebForm1.aspx.cs"

AutoEventWireup="false"

Inherits="WebApplication2.WebForm1" %>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >

<HTML>

<HEAD>

<title>WebForm1</title>

content="http://schemas.microsoft.com/intellisense/ie5">

</HEAD>

<asp:Label id="HelloLabel" style="Z-INDEX: 101; LEFT: 17px;

POSITION: absolute; TOP: 16px" runat="server"

Trang 5

Width="322px" Height="23px">Hello</asp:Label>

<asp:Label id="NameLabel" style="Z-INDEX: 102; LEFT: 17px;

Width="114px" Height="22px">Enter your name</asp:Label>

<asp:Label id="SeasonLabel" style="Z-INDEX: 103; LEFT: 17px;

Width="101px" Height="32px">Favorite season</asp:Label>

<asp:Label id="SexLabel" style="Z-INDEX: 104; LEFT: 17px;

Width="33px" Height="15px">Sex</asp:Label>

<asp:TextBox id="NameTextBox" style="Z-INDEX: 105; LEFT: 130px;

Width="135px" Height="30px"></asp:TextBox>

<asp:RequiredFieldValidator id="NameRequiredFieldValidator"

style="Z-INDEX: 106; LEFT: 130px; POSITION: absolute;

TOP: 84px" runat="server" ErrorMessage="RequiredFieldValidator"

ControlToValidate="NameTextBox">You must enter your name!

</asp:RequiredFieldValidator>

<asp:RadioButtonList id="SeasonRadioButtonList"

style="Z-INDEX: 107; LEFT: 130px; POSITION: absolute;

TOP: 107px" runat="server" Width="152px" Height="107px">

<asp:ListItem Value="0" Selected="True">Spring</asp:ListItem>

<asp:ListItem Value="1">Summer</asp:ListItem>

<asp:ListItem Value="2">Fall</asp:ListItem>

<asp:ListItem Value="3">Winter</asp:ListItem>

</asp:RadioButtonList>

<asp:DropDownList id="SexDropDownList" style="Z-INDEX: 108;

LEFT: 130px; POSITION: absolute; TOP: 220px" runat="server"

Width="90px" Height="27px">

<asp:ListItem Value="0" Selected="True">Male</asp:ListItem>

<asp:ListItem Value="1">Female</asp:ListItem>

</asp:DropDownList>

<asp:Button id="OkButton" style="Z-INDEX: 109; LEFT: 17px;

Width="83px" Height="27px" Text="Ok"></asp:Button>

</form>

</body>

</HTML>

The WebForm1.aspx.cs file contains the code behind your form You can view this code

by selecting View ➣ Code, or you can press F7 on your keyboard

Tiêu đề	Building a more complex application
Thể loại	Guide

Định dạng
Số trang	6
Dung lượng	44,52 KB