Label control and four RadioButton controls pdf

position: absolute; top: 101px" Height="24px" Width="230px"></asp:TextBox> <asp:TextBox ID="employeeID" runat="server" style="z-index: 106; left: 160px; position: absolute; top: 161px" Height="24px" Width="100px"></asp:TextBox> </div> </form> </body> </html> 1. Return to the Design View window. 2. In the Layout menu, point to Position and click Auto-position Options. In the Options dialog box, expand the HTML Designer node of the tree view control if it is not already expanded and click CSS Positioning. In the right-hand pane of the dialog box, check “Change positioning to the following for controls added by using the Toolbox, paste, or drag and drop”, and select “Absolutely positioned” from the drop-down menu: This action allows all future controls that you add to the form to be placed wherever you drag them after adding them to the form; you do not need enable absolute positioning for each one. 3. Add another Label control and four RadioButton controls to the Web form. Set the properties of these controls to the values listed in the following table. Control Property Value Label5 Text Position RadioButton1 Text Worker TextAlign Left GroupName positionGroup Checked True (ID) workerButton RadioButton2 Text Boss TextAlign Left GroupName positionGroup Checked False (ID) bossButton RadioButton3 Text Vice President Control Property Value TextAlign Left GroupName positionGroup Checked False (ID) vpButton RadioButton4 Text President TextAlign Left GroupName positionGroup Checked False (ID) presidentButton 4. The GroupName property determines how a set of radio buttons are grouped. All buttons with the same value for GroupName are in the same group—only one can be selected at a time. 5. Position these controls so that your Web form looks like the following graphic: 6. Add another Label control and a DropDownList control to the Web form. Set their properties to the values shown in the following table. Control Property Value Label6 Text Role DropDownList1 Width 230px (ID) positionRole 7. The positionRole drop-down list will display the different positions that an employee can have within the company. This list will vary according to the position of the employee in the company. You will write code to populate this list dynamically. 8. Position these controls so that the form looks like the following graphic: 9. Add two Button controls and another Label control to the form. Set their properties to the values shown in the following table. Control Property Value Button1 Text Save Control Property Value (ID) saveButton Button2 Text Clear (ID) clearButton Label7 Text leave blank Height 48px Width 680px (ID) infoLabel 10. Position the controls so that the form looks like the following graphic: You will write event handlers for these buttons in a later exercise. The Save button will collate the information entered by the user and display it in the InfoLabel control at the bottom of the form. The Clear button will clear the text boxes and set other controls to their default values. Test the Web form 1. On the Debug menu, click Start Debugging. Visual Studio 2005 builds the application, the ASP.NET Development Server starts, and then Internet Explorer starts and displays the form. NOTE The first time you run a Web application by using the Start Debugging command, you will be prompted with a message box stating that debugging is not enabled. You can either select “Run without debugging”, or select “Modify the Web.config file to enable debugging” if you really want to run in debug mode. Running in debug mode is useful initially because you can set breakpoints and single step through the code using the debugger, as described in Chapter 3, “Writing Methods and Applying Scope.” However, enabling debugging will slow the application down and should be disabled before deploying the application to a production Web site. You can do this by editing the Web.config file and removing the following line: <compilation debug="true"/> 2. Enter some information for a fictitious employee. Test the radio buttons to verify that they are all mutually exclusive. Click the drop-down arrow in the Role list; the list will be empty. Click Save and Clear. 3. Close Internet Explorer and return to the Visual Studio 2005 programming environment. Deploying a Web Site to IIS A new feature added to Visual Studio 2005 is the Copy Web Site command on the Website menu, for copying a Web site from one location to another. You can use this feature to quickly deploy a Web site built and tested using the ASP.NET Development Server to a production IIS site. (You should create a new Web site, or an empty virtual directory by using the Internet Information Services management console first.) Connect to the virtual directory on the production IIS site. You can then selectively copy individual files to or from the production Web site, or synchronize files between Web sites. For more information, see “Walkthrough: Copying a Web Site Using the Copy Web Site Tool” and “How to: Copy Web Site Files with the Copy Web Tool” in the Microsoft Visual Studio 2005 Documentation. Understanding Server Controls The Web Forms controls you added to the form are collectively known as Server controls. Server controls are similar to the standard HTML items that you can use on an ordinary Web page, except that they are more programmable. Most Server controls expose event handlers, methods, and properties that code running on the server can execute and modify dynamically at run time. In the following exercises, you will learn more about programming Server controls. Examine a Server control 1. In the Visual Studio 2005 programming environment, display EmployeeForm.aspx in the Source View window. 2. Examine the HTML code for the form. Notice that it contains the definitions for each of the controls. Look at the definition of the first Label control in more detail (the code won't look exactly like the following listing, which has been laid out to make it easier to read): 3. <asp:Label ID="Label1" runat="server" 4. Text="Honest John Software Developers" 5. style="z-index: 100; left: 96px; 6. position: absolute; top: 24px" 7. Font-Bold="True" Font-Names="Arial Black" 8. Font-Size="X-Large" Height="36px" Width="630px"> </asp:Label> There are a couple of things to observe. First, look at the type of the control: asp:Label. All Web forms controls live in the “asp” namespace because this is the way they are defined by Microsoft. The second noteworthy item is the runat="server" attribute. This attribute indicates that the control can be accessed programmatically by code running on the Web server. This code can query and change the values of any of the properties of this control (for example, change its text). NOTE All controls must be properly ended with a matching </asp:Control> tag, where Control is the type of the control, such as Label as shown in the example. 9. Return to the Design View window. HTML Controls ASP.NET also supports HTML controls. If you expand the HTML category in the Toolbox, you are presented with a list of controls. These are the controls that Microsoft supplied with the original Active Server Pages model. They are provided so that you can port existing ASP pages into ASP.NET more easily. However, if you are building an application from scratch, you should use the Standard Web Forms controls instead. HTML controls also have a runat attribute, allowing you to specify where event handling code should be executed for these controls. Unlike Web Forms controls, the default location for HTML controls to execute code is in the browser rather than on the server— assuming that the user's browser supports this functionality. The EmployeeForm.aspx page requires several event handlers: a set of handlers to populate the PositionRole drop-down list when the user selects a position (Worker, Boss, Vice President, President); another handler to save the information entered when the user clicks the Save button; and a final handler to clear the form when the user clicks the Clear button. You will write these handlers in the next exercise. Write event handlers 1. In the Solution Explorer, expand the file EmployeeForm.aspx. The file EmployeeForms.aspx.cs will appear. This is the file that will actually contain the C# code for the event handlers that you write. This file is known as a code-behind file. This feature of ASP.NET enables you to separate the C# code  . Add another Label control and four RadioButton controls to the Web form. Set the properties of these controls to the values listed in the following table. Control Property Value Label5 Text. Standard Web Forms controls instead. HTML controls also have a runat attribute, allowing you to specify where event handling code should be executed for these controls. Unlike Web Forms controls, . View window. HTML Controls ASP.NET also supports HTML controls. If you expand the HTML category in the Toolbox, you are presented with a list of controls. These are the controls that Microsoft