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 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 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 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 True Spring 0 False Summer 1 False Fall 2 False Winter 3 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 in Table 15.4 . Table 15.4: DropDownList ITEMS Selected PROPERTY Text PROPERTY Value PROPERTY True Male 0 False Female 1 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. 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> <meta name="GENERATOR" Content="Microsoft Visual Studio 7.0"> <meta name="CODE_LANGUAGE" Content="C#"> <meta name="vs_defaultClientScript" content="JavaScript"> <meta name="vs_targetSchema" content="http://schemas.microsoft.com/intellisense/ie5"> </HEAD> <body MS_POSITIONING="GridLayout"> <form id="Form1" method="post" runat="server"> <asp:Label id="HelloLabel" style="Z-INDEX: 101; LEFT: 17px; POSITION: absolute; TOP: 16px" runat="server" Width="322px" Height="23px">Hello</asp:Label> <asp:Label id="NameLabel" style="Z-INDEX: 102; LEFT: 17px; POSITION: absolute; TOP: 54px" runat="server" Width="114px" Height="22px">Enter your name</asp:Label> <asp:Label id="SeasonLabel" style="Z-INDEX: 103; LEFT: 17px; POSITION: absolute; TOP: 107px" runat="server" Width="101px" Height="32px">Favorite season</asp:Label> <asp:Label id="SexLabel" style="Z-INDEX: 104; LEFT: 17px; POSITION: absolute; TOP: 221px" runat="server" Width="33px" Height="15px">Sex</asp:Label> <asp:TextBox id="NameTextBox" style="Z-INDEX: 105; LEFT: 130px; POSITION: absolute; TOP: 51px" runat="server" 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; POSITION: absolute; TOP: 261px" runat="server" 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. . Building a More Complex Application In this section, you'll see a more complex Web form that uses Label, TextBox, RadioButtonList, DropDownList, and. dialog box, and select ASP .NET Web Application from the Templates area on the right. Enter http://localhost/MyWeb -Application2 in the Location field.