Creating Your First ASP.NET 2.0 Application

In This Chapter

⻬Planning a Visual Studio project

⻬Building a Web site from scratch

⻬Using Solution Explorer, controls, properties, and titles

⻬Coding and running your application

I

n this chapter, you get a crack at creating a simple, one-page Web applica- tion using Visual Studio 2005 Standard Edition. We walk you through the entire process step-by-step, so you’ll get a good idea for how Visual Studio works and how ASP.NET applications are built.

Note that although this chapter uses a particular version of Visual Studio 2005 — the Standard Edition — to build a Web site, the procedure is nearly identical for other editions of Visual Studio. That includes Visual Web Developer 2005 Express Edition; you shouldn’t have any trouble adapting the information in this chapter to other versions of Visual Studio.

All code listings used in this book are available for download at www.dummies. com/go/aspnetaiofd.

Understanding Visual Studio Projects

Visual Studio organizes the files of an ASP.NET application by using logical containers called projects and solutions. Here’s a summary of the most important details you need to know concerning projects and solutions:

✦ A project is a container that holds all files related to a single ASP.NET application — including the .aspxfiles that define the application’s Web pages, the code-behind files that provide the code executed when the application runs, and other files used by the application.

✦ A solution is a container that can hold one or more projects. Solutions let you group related applications.

✦ Most solutions contain just a single project. In fact, when you create a new Web application, Visual Studio creates two containers: a project to hold the application’s files and a solution to hold the project.

Creating a New Web Site

36

✦ Visual Studio includes a window called the Solution Explorer within which you work with the files in a project. The Solution Explorer lists all proj- ects that make up a solution, as well as all files that make up each project in the solution. You can double-click a file in the Solution Explorer to open the file, or you can right-click a file to reveal a shortcut menu that provides quick access to common tasks. (For more about how all this works, see the section “Using the Solution Explorer” later in this chapter.) Previous versions of Visual Studio used separate project files (.prj) to store settings related to projects. In Visual Studio 2005, the project files have been eliminated.

Creating a New Web Site

To create a new Web site in Visual Studio 2005, follow these steps:

1.

Choose the File➪New➪Web Site command.

Alternatively, you can click the New Web Site button shown in the margin. (Note that this button has a drop-down menu that lets you choose whether to display the New Web Site, New Project, Open Web Site, or Open Project buttons. If one of the other three buttons is visible instead of the New Web Site button, click the down arrow next to the icon and choose New Web Site from the menu that appears.)

When you choose File➪New➪Web Site or click the New Web Site button, the New Web Site dialog box appears, as shown in Figure 3-1. This dialog box lets you select the language you want to use for the Web site, the name of the Web site, and the location where you want to create the Web site.

Figure 3-1:

The New Web Site dialog box.

Book I Chapter 3 Creating Y our First ASP .NET 2.0 Application

Creating a New Web Site

37

2.

Choose ASP.NET Web Site from the list of available templates.

In all likelihood, this template is already selected.

3.

Choose File System, HTTP, or FTP from the Location drop-down list.

The Location drop-down list in the New Web Site dialog box offers you various ways to access the Web site:

• File System:The simplest way to access a Web site in Visual Studio is to create a file-system Web site — a folder on your hard disk that con- tains all the files that the Web site needs — .aspxfiles that define the pages displayed by the application, .vb(Visual Basic) or .cs

(C#) files that define the code that’s executed when the application runs, and other files that define the Web site’s configuration, provide it with data, or implement its other features. The Web site shown in this chapter is a file-system Web site.

You can run a file-system Web site directly from within Visual Studio by using Visual Studio’s built-in Web server. However, you can’t run a file-system Web site directly from Internet Information Services (IIS) without first configuring the Web site from within IIS (which Chapter 5 of this mini-book shows you how to do).

• HTTP:Another way to access a Web site from within Visual Studio is to use the HTTP protocol to access a Web site that’s under the con- trol of an IIS server. When you use this option to create a Web site, Visual Studio uses HTTP to connect to an IIS server and create a Web application. The benefit of creating an HTTP Web site is that you don’t have to later configure IIS to run the application as you do with a file-system Web site. The disadvantage is that you must have access to an IIS server to create this type of Web site.

Note that to create an HTTP Web site on a remote IIS server, the server must have the FrontPage 2002 Server Extensions installed. If the IIS server doesn’t have the extensions installed, you’ll have to create an FTP site instead, as described next.

• FTP:The third way to create a Web site is to use the almost-ancient FTP protocol to access a remote server. This option is best when you’re creating a Web site on a remote server that doesn’t have FrontPage 2002 Server Extensions installed.

4.

Enter the location for the Web site in the combo box that’s to the right of the Location drop-down list.

How you specify the location depends on which option you choose for the Location drop-down, as follows:

• File System:Enter the path to the main folder for the application. The path defaults to

Creating a New Web Site

38

You should change WebSite1to the name you want to use for your Web site.

• HTTP:Enter the Web address of the Web site you want to create. For example, to create a Web site named SimpleCalcat an IIS server named www.myserver.com, enter

http://www.myserver.com/SimpleCalc

If you’re using a local IIS server (that is, a server running on your own computer rather than on a remote computer), use localhostas the hostname. For example: http://localhost/SimpleCalc. • FTP:Enter the FTP address for the application — for example,

ftp://ftp.myhost.com.

5.

Choose the language you want to use to create the site.

The options are Visual Basic, Visual C#, and Visual J#.

To create the Simple Calculator application (described in Chapter 2 of this mini-book), choose File System for the Location drop-down list, replace WebSite1with SimpleCalcas the file location, and choose Visual C# for the language.

6.

Click OK.

Visual Studio creates the project and awaits your command, as shown in Figure 3-2. Figure 3-2: A new project in Visual Studio.

Book I Chapter 3 Creating Y our First ASP .NET 2.0 Application

Using the Solution Explorer

39

Here are a few other pointers about creating Web sites in Visual Studio:

✦ Visual Studio creates a default page for the application named default. aspxand opens that page in the editor window. If you select Visual C# for the application’s language, the default.aspxfile is opened in Source view as shown in Figure 3-2. That way, you can directly edit the markup code for the page. However, if you select Visual Basic as the language, the page is initially opened in Design view, which shows a what-you-see-is- what-you-get view of the page. As you’ll learn later in this chapter, you can switch between Design and Source view simply by clicking the Design and Source buttons at the bottom of the editor window.

✦ Although Visual Studio 2005 doesn’t create a Project file for each project, it does create a Solution file for each solution. The Solution file is cre- ated in My Documents\Visual Studio 2005\Projects.

Using the Solution Explorer

The Solution Explorer is a window — normally located on the right side of the Visual Studio 2005 screen — in which you work with the files and sub- folders that make up a project. In Figure 3-2, the Solution Explorer indicates that the SimpleCalcproject has just one subfolder (named App_Data) and two files (named Default.aspxand Default.aspx.cs).

ASP.NET applications can have any of several standard subfolders; here’s the rundown on what they do:

✦ App_Data:This folder holds database files used by the application. For applications that use large databases managed by a database-server pro- gram (such as Microsoft SQL Server), you may prefer to forego the App_ Datafolder and store the database files in a separate location. (For more information, refer to Book 6, Chapter 1.) But for most applications, the

App_Datafolder is the preferred place to store database files. Visual Studio 2005 always creates this folder when you create a new Web project.

✦ App_Code:If an application uses any program-code files other than the code-behind files associated with Web pages, those files are stored in the App_Codefolder. Visual Studio 2005 creates this folder automatically whenever you add a new code file to a project.

✦ App_Themes:This folder contains the files needed for applying themes to influence the appearance of the application — and it’s created auto- matically if you add a theme to a project. (For details, refer to Book 8, Chapter 4.)

Working with Controls

40

Note that a project can also contain other folders of your own choosing. For example, we like to create a folder named Imagesto store the images dis- played by the application. You can add a folder to a project by right-clicking the project name in the Solution Explorer window and then choosing New Folder from the shortcut menu that appears.

The Solution Explorer also has a nice row of buttons at the top — but they’re more than just decorative. Table 3-1 describes their functions.

Table 3-1 Solution Explorer Buttons

Button Name What It Does

Properties Displays the Properties window for the selected item.

Refresh Refreshes the Solution Explorer — sometimes

useful if you’ve added files to the project from outside Visual Studio.

Nest Related Files Indicates whether related files (such as Default.aspxand Default.aspx.cs) should be nested in the Solution Explorer window.

View Code Opens the file in the code editor.

View Designer Opens the file in a Designer window.

Copy Web Site Copies the entire Web site to another location.

ASP.NET Configuration Calls up the ASP.NET Web-based configuration tool, in which you set various options for the Web site (as detailed in Book 8, Chapter 1).

Working with Controls

When you create an ASP.NET Web site, Visual Studio adds a blank Web page named Default.aspxto the project. The first step in developing the appli- cation is to add some controls to this blank page.

Book I Chapter 3 Creating Y our First ASP .NET 2.0 Application

Working with Controls

41

ASP.NET comes with dozens of controls you can add to your Web pages. Table 3-2 lists the eight ASP.NET controls used most commonly — and out- lines their basic functions. (There’s much more about them in Book 2.)

Table 3-2 Eight Commonly Used ASP.NET Controls

Toolbox Icon Control Name What It Does

Label Displays text on the page.

TextBox Creates a text box in which the user can enter data.

Button Creates a button the user can click to submit the page.

DropDownList Creates a drop-down list.

ListBox Creates a list box.

CheckBox Creates a check box.

RadioButton Creates a radio button.

Image Displays an image.

The Simple Calculator application created in this chapter uses several of these controls, as shown in Figure 3-3. As you can see, this page uses four labels, two text boxes, and one button control. The first two text boxes let the user enter the two numbers to be added. (Actually, there’s a third text box that isn’t visible in the figure. It displays the the result of the calculation after the user clicks the button. This particular text box is set to read-only so it can display a text value, but the user can’t enter a text value into it. More about why in a moment.)

Working with Controls

42

The easiest way to add controls to a Web page is in Design view:

✦ If you’re using C# as your application’s language, you switch to Design view by clicking the Design button at the bottom of the code editor’s window.

✦ If you chose Visual Basic as the application’s language rather than C#, you’re already in Design view.

Figure 3-4 shows the SimpleCalcproject with the Default.aspxpage open in Design view. As you can see, Design view gives you a blank slate on which you can create a usable Web page.

In Design view, you can add a control to a page simply by dragging the icon for the control from the Toolbox (the narrow strip of controls that appears at the left of the Visual Studio window) onto the editor window. Alternatively, you can position the cursor in the window where you want a control to appear, and then double-click the control in the Toolbox to add the control at the current location.

Labels Text boxes

Button Figure 3-3: Controls used by the Simple Calculator application.

Book I Chapter 3 Creating Y our First ASP .NET 2.0 Application

Working with Controls

43

Figure 3-5 shows how the Default.aspxpage looks after we’ve dragged controls onto it. To create this page, follow these steps:

1.

Double-click the Labeltool in the Toolbox to create a label.

2.

Click End, and then press Enter twice.

3.

Double-click the Labeltool to create another label.

4.

Double-click the TextBoxcontrol to create a text box on the same line.

5.

Repeat Steps 2, 3, and 4 to create another line with a label and a

text box.

6.

Click End, then press Enter twice.

7.

Double-click the Buttoncontrol to create a button.

8.

Repeat Steps 2, 3, and 4 to create a third line with a label and a text box. Figure 3-4: The Default.aspx page in Design view.

Setting Properties

44

Although the Web page now has the controls it needs, those controls don’t look anything like the controls on the page shown in Figure 3-2. To get the look of those controls, you have to set propertiesfor each control, as described in the next section.

Setting Properties

Propertiesare what give a control its distinctive look and behavior. Without properties, all labels will look alike — as will all text boxes, buttons, and other controls. If you want to create a really useful (and easy-to-use) Web page, you have to set the properties of each control on the page.

To set the properties of a control, first select the control by clicking it. Then, use the Properties window located at the bottom-right corner of the Visual Studio screen to set the various properties that are available for the control. Each different type of control has its own collection of properties you can set, but some properties are common to most controls. These include

✦ ID:This property specifies the name of the control. Visual Studio picks a generic name for each control you create, such as Label1or TextBox2. You can leave these default values as they are, but if you plan on writing C# or Visual Basic code that will refer to the control, it’s a good idea to give the control an ID that has a clearer functional meaning.

Figure 3-5: The Default.aspx page with some controls whose properties have not yet been set.

Book I Chapter 3 Creating Y our First ASP .NET 2.0 Application

Setting Properties

45

When you set the IDproperty of a control, a common practice is to begin the ID with a two- or three-character prefix that indicates the con- trol’s type. In the Simple Calculator application, for example, you might use txtNumber1and txtNumber2for the two input text boxes, and

txtAnswerfor the text box that displays the answer. (The txtwill remind you that the control is a text box.)

✦ Text:Most controls that display a text value have a Textproperty you can use to set the value to display. Depending on the type of control, you’ll often want to set this value to something other than the default. For exam- ple, Visual Studio sets the Textproperty of Labeland Buttoncontrols to the IDof the control. As a result, you’ll almost always have to set the Text

property for Labeland Buttoncontrols. The text property for TextBox

controls is blank by default, which is usually what you want.

✦ Font:Controls that display text also have a set of Fontproperties you can use to specify how the text should be displayed. In the Properties window, you can click the +sign next to the Font property to reveal a whole list of font-related properties you can set — font name, size, and bold or italic formatting.

✦ TabIndex:The TabIndexproperty determines the order that controls are activated when the user presses the Tab key. You can use this prop- erty to make sure the Tab key moves the cursor as expected among the controls on your page.

Besides these common properties, most controls have their own unique properties as well. For example, TextBoxcontrols have a ReadOnlyprop- erty you can use to prevent the user from entering data in the text box. (Book 2 delves deeper into these.)

To get the SimpleCalc application closer to its final form, set the properties for its controls, as indicated in Table 3-3.

In document All In One Desk Reference For Dummies pdf (Page 62-80)