business objects. The data source controls provide you with a consistent mechanism for working with data, independent from the source of that data. You will make use of data source controls in Chapter 29, “Protecting a Web Site and Accessing Data with Web Forms.”

Powerful controls for displaying and editing data. Microsoft provides the FormView control for displaying data and editing data one record at a time, and the GridView control is provided for presenting information in a tabular format. You can use the TreeView control to display hierarchical data, and you can use the SiteMapPath and Menu controls to assist in user navigation through your Web application. You will use the GridView control in Chapter 29.

AJAX extensions so that you can build highly interactive and responsive Web applications that can minimize the network bandwidth required to transmit data between the client application and the Web server. By using AJAX, you can define parts of a Web page as being updatable. When information displayed in an updatable region of a page changes, only the information required for that part of the page is transmitted by the Web server.

Security features with built-in support for authenticating and authorizing users. You can easily grant permissions to users to allow them to access your Web application, validate users when they attempt to log in, and query user information so that you know who is accessing your Web site. You can use the Login control to prompt the user for credentials and validate the user and the PasswordRecovery control for helping users remember or reset their password. You will use these security controls in Chapter 29.

Web site configuration and management by using the ASP.NET Web Site Administration Tool. This tool provides wizards for configuring and securing ASP.NET Web applications. You will use the ASP.NET Web Site Administration Tool in Chapter 29.

In the remainder of this chapter, you will learn more about the structure of an ASP.NET application.

Creating Web Applications with ASP.NET

A Web application that uses ASP.NET typically consists of one or more ASP.NET pages or Web forms, code files, and configuration files.

A Web form is held in an .aspx file, which is essentially an HTML file with some Microsoft

.NET–specific tags. An .aspx file defines the layout and appearance of a page. Often each

.aspx file has an associated code file containing the application logic for the components in the .aspx file, such as event handlers and utility methods. A directive (a special tag) at the start of each .aspx file specifies the name and location of the corresponding code file. ASP. NET also supports application-level events, which are defined in Global.asax files.

Building an ASP.NET Application

In the following exercise, you will build a simple ASP.NET application that uses Server controls to gather input from the user about the details of the employees of a fictitious software company called Litware, Inc. The application will show you the structure of a simple Web application.

Note You do not need to have IIS running on your computer to develop Web applications. Microsoft Visual Studio 2008 includes its own Development Server. When you build and run a Web application, by default Visual Studio 2008 will run the application using this Web server. However, you should still use IIS for hosting production Web applications after you have finished developing and testing them.

Create the Web application

1.Start Visual Studio 2008 or Visual Web Developer 2008 Express Edition if it is not already running.

Note In the remainder of the book, I simply state, “Start Visual Studio 2008” when you need to open Visual Studio 2008 Standard Edition, Visual Studio 2008 Professional Edition, or Visual Web Developer 2008 Express Edition. Additionally, unless explicitly stated, all further references to Visual Studio 2008 also apply to Visual Web Developer 2008 Express Edition.

2.If you are using Visual Studio 2008, on the File menu, point to New, and then click Web Site.

3.If you are using Visual Web Developer 2008 Express Edition, on the File menu, click

New Web Site.

4.In the New Web Site dialog box, click the ASP.NET Web Site template. Select File System in the Location drop-down list box, and specify the \Microsoft Press\Visual CSharp Step By Step\Chapter 27\Litware folder under your Documents folder. Set the Language to Visual C#, and then click OK.

form share a common look and feel (such as color and font), as well as set items such as a background image of the form.

Lay out the Web form

1.On the Website menu, click Add Existing Item. In the Add Existing Item dialog box,

move to the \Microsoft Press\Visual CSharp Step By Step\Chapter 27 folder under your Documents folder, select the Computer.bmp file, and then click Add.

This file contains an image that you will display on the background of your Web form.

2.Click the form in the Design View window. In the Properties window, change the Title property of the DOCUMENT object to Employee Information.

The value you specify for the Title property appears in the title bar of the Web browser when you run the Web application.

Note If the Properties window displays the properties for the <DIV> element rather than DOCUMENT, select DOCUMENT from the drop-down list at the top of the Properties

window.

3.Click the Manage Styles tab underneath the Properties window. In the Manage Styles window, click the New Style link.

The New Style dialog box opens. You can use this dialog box to create a style for the form.

4.In the font-family drop-down list box, click Arial.

5.In the color drop-down list, select the dark blue square on the second row. The value #0000FF should appear in the color box.

6.In the Category list box, click Background.

7.Click the Browse button adjacent to the background-image combo box. In the Picture dialog box, click the computer.bmp file, and then click OK.

The background-image combo box is populated with the value url(‘computer.bmp’).

8.In the Category list box, click Position.

9.In the height combo box, type 500.

10.At the top of the dialog box in the Selector combo box, type .employeeFormStyle (be sure to include the leading period in this name), select the Apply new style to document selection check box, and then click OK.

In the Design View window, the Web form displays the image in the background.

11.Display the Toolbox, and ensure that the Standard category of controls is expanded.

The Toolbox contains controls that you can drop onto ASP.NET forms. These controls are similar, in many cases, to the controls you have been using to build Microsoft Windows Presentation Foundation (WPF) applications. The difference is that these controls have been specifically designed to operate in an HTML environment, and they are rendered by using HTML at run time.

12.From the Toolbox, drag four Label controls and three TextBox controls onto the Web form. Notice how the controls pick up the font and color specified by the Web form’s style.

Note The controls will be automatically positioned using a left-to-right flow layout in the Design View window. Do not worry about their location just yet because you will move

them after setting their properties.

Note As well as using a Label control, you can type text directly onto a Web page. However, you cannot format this text so easily, set properties, or apply themes to it. If you

are building a Web site that has to support different languages (such as French or German), use Label controls because you can more easily localize the text they display by using

Resource files. For more information, see “Resources in ASP.NET Applications” in the Microsoft Visual Studio 2008 documentation.

13.Using the Properties window, set the properties of these controls to the values shown in the following table.

14.Click the Source button at the bottom of the Design View window. You should see the HTML description of the form and the style in the Code and Text Editor window, like this (some lines have been split and reformatted to fit this code in a readable format on the printed page):

<%@ Page Language=”C#” AutoEventWireup=”true” CodeFile=”EmployeeForm.aspx.cs” Inherits=”_Default” %>

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>

<html xmlns=”http://www.w3.org/1999/xhtml”> <head runat=”server”>

<title>Employee Information</title> <style type=”text/css”>

.employeeFormStyle

{

font-family: Arial; color: #0000FF;

background-image: url(‘computer.bmp’); height: 500px;

}

</style>

</head>

<body>

<form id=”form1” runat=”server”> <div class=”employeeFormStyle”>

<asp:Label ID=”Label1” runat=”server” Font-Bold=”True” Font-Names=”Arial Black”

Font-Size=”X-Large” Height=”36px” Text=”Litware, Inc. Software Developers” Width=”630px”></asp:Label>

<asp:Label ID=”Label2” runat=”server” Text=”First Name”></asp:Label> <asp:Label ID=”Label3” runat=”server” Text=”Last Name”></asp:Label> <asp:Label ID=”Label4” runat=”server” Text=”Employee Id”></asp:Label> <asp:TextBox ID=”firstName” runat=”server” Height=”24px”

Width=”230px”></asp:TextBox>

<asp:TextBox ID=”lastName” runat=”server” Height=”24px” Width=”230px”></asp:TextBox>

<asp:TextBox ID=”employeeID” runat=”server” Height=”24px” Width=”230px”></asp:TextBox>

</div>

</form>

</body>

</html>

15.Modify the HTML code for the Label1 control, and add a Style attribute to specify its location on the form, as shown here in bold type:

<asp:Label ID=”Label1” ... Style=”position: absolute; left: 96px; top: 24px”></ asp:Label>

By setting the position property of the Style attribute to absolute, you can specify the position of controls yourself, rather than letting Visual Studio 2008 lay them out automatically.

Tip You can also specify the layout, alignment, and spacing of controls by using the commands on the Format menu when using the Design View window.

16.Edit the HTML code for the remaining label and text box controls, and add Style attributes to set their locations on the Web form, as shown here in bold type:

<asp:Label ID=”Label2” ... Style=”position: absolute; left: 62px; top: 104px”></ asp:Label>

<asp:Label ID=”Label3” ... Style=”position: absolute; left: 414px; top: 104px”></ asp:Label>

<asp:Label ID=”Label4” ... Style=”position: absolute; left: 62px; top: 168px”></ asp:Label>

<asp:TextBox ID=”firstName” ... Style=”position: absolute; left: 166px; top: 102px”></ asp:TextBox>

<asp:TextBox ID=”lastName” ... Style=”position: absolute; left: 508px; top: 102px”></ asp:TextBox>

<asp:TextBox ID=”employeeID” ... Style=”position: absolute; left: 166px; top: 166px”></asp:TextBox>

17.Click the Design button at the bottom of the window. The Web form should look like this in the Design View window:

18.Add another Label control and four RadioButton controls to the Web form. Using the Properties window, set the properties of these controls to the values listed in the following table. Note that the controls will appear in a line across the top of the form. You will set their positions in the next step.

The GroupName property determines how a set of radio buttons is grouped. All buttons with the same value for GroupName are in the same group and are mutually

exclusive—only one can be selected at a time.

19.Click the Source button at the bottom of the Design View window, and set the positions of these controls as shown in bold type here:

<asp:Label ID=”Label5” ... Style=”position: absolute; left: 86px; top: 224px”> </asp:Label>

<asp:RadioButton ID=”workerButton” ... Style=”position: absolute; left: 192px; top: 224px”/>

<asp:RadioButton ID=”bossButton” ... Style=”position: absolute; left: 206px; top: 260px”/>

<asp:RadioButton ID=”presidentButton” ... Style=”position: absolute; left: 174px; top: 332px”/>

<asp:RadioButton ID=”vpButton” ... Style=”position: absolute; left: 138px; top: 296px”/>

20.Click the Design button, and then add another Label control and a DropDownList control to the Web form. Set their properties to the values shown in the following table.

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.

21.Click the Source button, and add the HTML code shown here in bold type to set the position of these controls:

<asp:Label ID=”Label6” ... Style=”position: absolute; left: 456px; top: 224px”> </asp:Label>

<asp:DropDownList ID=”positionRole” ... Style=”position: absolute; left: 512px; top: 224px”></asp:DropDownList>

22.Click the Design button, and add two Button controls and another Label control to the form. Set their properties to the values shown in the following table.

You will write event handlers for the 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.

23.Click the Source button, and add the HTML code shown here in bold type to each of these controls:

<asp:Button ID=”saveButton” ... Style=”position: absolute; left: 328px; top: 408px”/> <asp:Button ID=”clearButton” ... Style=”position: absolute; left: 424px; top: 408px”/> <asp:Label ID=”infoLabel” ... Style=”position: absolute; left: 62px; top: 454px”> </asp:Label>

24. Click the Design button. The completed form should look like the following image:

Test the Web form

1.On the Debug menu, click Start Debugging. In the Debugging Not Enabled message box, click Modify the Web.config file to enable debugging, and then click OK. If the Script Debugging Disabled message box appears, click Yes.

Visual Studio 2008 builds the application, the ASP.NET Development Server starts, and then Windows Internet Explorer starts and displays the form.

Tip If Internet Explorer displays a list of files rather than the Web form, close Internet Explorer and return to Visual Studio 2008. In Solution Explorer, right-click EmployeeForm. aspx, and then click Set As Start Page. Run the Web application again.

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 select either Run without debugging or Modify the Web.config file to enable debugging.

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, and debugging

should be disabled before the application is deployed to a production Web site. You can do this by editing the web.config file and setting the debug attribute of the compilation element to false, like this:

<compilation debug=”false”> <assemblies>

...

</assemblies>

</compilation>

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 box; the list will be empty. Click Save and Clear, and verify that they currently do nothing other than cause the form to be redisplayed.

3.Close Internet Explorer, and return to Visual Studio 2008.