Training
Certifications
Books
Special Offers
Community




 
Microsoft® ASP.NET Programming with Microsoft Visual Basic® .NET Deluxe Learning Edition
Author Microsoft Corporation and G. Andrew Duthie
Pages 656
Disk 4 Companion CD(s)
Level Beg/Int
Published 11/13/2002
ISBN 9780735618145
ISBN-10 0-7356-1814-3
Price(USD) $119.99
To see this book's discounted price, select a reseller below.
 

More Information

About the Book
Table of Contents
Sample Chapter
Index
Companion Content
Related Series
Related Books
About the Author

Support: Book & CD

Rate this book
Barnes Noble Amazon Quantum Books

 


Chapter 2: Creating an ASP.NET Web Application



Chapter 2   Creating an ASP.NET Web Application

In this chapter, you will learn how to:

  • Create a new Web application with Microsoft Visual Studio .NET.
  • Add a Web Forms page to a Web application project.
  • Add Server Controls to a Web Forms page and modify their properties.
  • Write code in event handlers.
  • Build and test a Web application.

Now that you've learned about some of the features of Visual Studio .NET, the next step is to take advantage of them in your own applications. Conveniently enough, that's precisely what you're going to learn how to do in this chapter.

You'll begin with an overview of the two major project types used for ASP.NET applications. Then you'll look at the file types used in ASP.NET and the purpose of each. Next, you'll learn how to create a new Web application, add a new Web Forms page, and add controls to the page and manipulate their properties. Finally, you'll learn how to add event-handler code to the page, build the project, and test the page.

ASP.NET Project Types

There are two basic types of ASP.NET applications, each with a distinct purpose. ASP.NET Web applications are for a Web application that will provide its own HTML-based UI. ASP.NET Web Services are for Web-based functionality that will be accessed programmatically. You can develop both application types with or without Visual Studio .NET, although the Visual Studio environment makes developing either type of application significantly easier and faster. The following illustration shows the Visual Studio .NET New Project dialog box .displaying the ASP.NET Web Application and ASP.NET Web Service project .templates for Visual Basic .NET.

Click to view graphic
Click to view graphic

ASP.NET Web Applications

ASP.NET applications, at their simplest, are much like classic ASP applications. The elements of a simple ASP.NET application are

  • A virtual directory in IIS, configured as an application root, to hold the files that make up the application and to control access to the files.
  • One or more .aspx files.
  • A Global.asax file (analogous to the Global.asa file in classic ASP) to deal with Session and Application start-up and clean-up logic. This file is optional.
  • A Web.config file used to store configuration settings. This file is .optional, and is new for ASP.NET.

For Visual Studio .NET users, the good news is that all of the preceding files are created for you when you create a new Web application project.

ASP.NET Web Forms

Web Forms are an important part of any ASP.NET Web application. Put simply, they are ASP.NET pages that use ASP.NET Server Controls. The Web Forms programming model makes it possible (and relatively easy) to develop Web-based applications in much the same way that today's Microsoft Visual Basic programmers develop Microsoft Windows-based applications that have a graphical user interface (GUI).

Web Forms in Visual Studio .NET allow you to create rich, interactive applications simply by dragging and dropping controls onto a page and then writing minimal code to handle user interaction, events, and so on. In addition, the Visual Studio .NET environment lets you work on your pages either visually—using the Web Forms Designer—or textually, using the powerful Visual Studio .NET source-code editor.

You can write code in your Web Forms in one of two ways: inline in the .aspx file (as is typical of a classic ASP page), or using a code-behind module. Although it's possible to write your application with code in the actual .aspx file and still take advantage of compiled code and the other improvements of .NET, I recommend that you get in the habit of using code-behind modules. Visual Studio .NET defaults to using code-behind for UI-specific programming logic.

Code-Behind

Code-behind is a new feature in ASP.NET that allows developers to truly separate the HTML and tag-based UI elements from the code that provides user interaction, validation, and so on. Code-behind modules offer developers a number of advantages:

  • Clean separation of HTML and code  Code-behind allows HTML designers and developers to do what they do best independently, thereby minimizing the possibility of messing up one another's work (something that happens all too frequently when developing classic ASP applications).
  • Easier reuse  Code that isn't interspersed with HTML in an .aspx page can be more easily reused in other projects.
  • Simpler maintenance  Because the code is separated from the HTML, your pages will be easier to read and maintain.
  • Deployment without source code  Visual Studio .NET projects using code-behind modules can be deployed as compiled code (in addition to the .aspx pages), allowing you to protect your source code. This can be very useful if you're creating applications for clients but want to retain control of your intellectual property.

All in all, it's worthwhile to get into the habit of using code-behind. You'll see examples of code-behind throughout the book.

ASP.NET XML Web Services

Although no one would deny that Web applications created with ASP.NET (or even with classic ASP) can be very useful, one feature that has long been missing is an easy way to provide programmatic functionality over the Internet or an intranet without tying the client to a specific UI. This is where ASP.NET XML Web services come in.

An XML Web service, at its simplest, is a chunk of programming code that is accessible over the Web. XML Web services are based on the World Wide Web Consortium's (W3C) SOAP specification. This allows computers on varying platforms, from Windows servers to UNIX workstations, to offer and consume programmatic services over the HTTP protocol.

ASP.NET makes it remarkably easy to implement XML Web services. In fact, all it takes is adding an appropriate declaration to any method you want to make available as an XML Web service. Visual Studio .NET makes it even easier by taking care of all the work necessary to make your XML Web service available to potential clients. Part IV will discuss XML Web services in greater detail.

ASP.NET File Types

You'll see a number of new file types in your ASP.NET applications. To avoid any confusion, let's take a minute to go over the ones you'll see most often and discuss how they're used.

  • .aspx  The extension you'll see most often. Analogous to the .asp extension in classic ASP, .aspx is used for Web Forms pages.
  • .ascx  The extension used for Web Forms user controls. User controls provide one of the many ways available in ASP.NET to reuse code. Similar to include files in classic ASP, .ascx files can be as simple as a few HTML tags or can include complex logic that the author might want to reuse in many pages. User controls are added to a Web Forms page using the @ Register directive, which is discussed in Part III.
  • .asmx  The extension used for files that implement XML Web .services. XML Web services can be accessed directly through .asmx files, or the .asmx file can direct the request to a compiled assembly that implements the Web service.
  • .vb  The extension for Visual Basic .NET code modules. All Web Forms pages (.aspx) added to a Visual Studio .NET Web application that are written in Visual Basic .NET will have a corresponding .vb code-behind module with the same name as the Web Form page to which it's related (pagename.aspx.vb).
  • .resx  Denotes a resource file. These files are used primarily in Windows Forms applications, but are also available to Web application developers for storing resources such as alternative text strings for internationalization of applications.
  • Global.asax  Used to define Application- and Session-level variables and start-up procedures. Global.asax is used the same way as Global.asa is used in classic ASP. Note that while Global.asax can be structured like Global.asa, with start-up procedures such as Session_OnStart (Session_Start in ASP.NET) coded directly in the Global.asax file in a <script runat="server"> block, Visual Studio implements these procedures in a .vb (or .cs) code-behind module (global.asax.vb) rather than in the Global.asax file itself.
  • In addition to the functionality available in a classic ASP Global.asa file, which was used for handling Application and/or Session start and end events and declaring Application- and/or Session-level variables, ASP.NET also allows you to import namespaces, link to assemblies, and perform other useful tasks. You'll learn more about Global.asax in Chapter 7.

  • Web.config  A new file type in ASP.NET, used to solve one of the major hassles with classic ASP applications: configuration. The Web.config file is a human- and machine-readable XML-based file that stores all of the configuration settings for a given application (or segment of an application). Web.config files are interpreted hierarchically—a Web.config file in a subdirectory of your application will override the settings of the Web.config file (or files) in its parent directories. The advantage is that configuration settings can be inherited where that is desirable, but you also have very granular .control over configuration.

Visual Studio .NET

It's certainly possible to create ASP.NET Web applications in Notepad or another text editor, but if you're doing serious ASP.NET or component development, you'll probably want to work within the Visual Studio .NET environment. The advantages of Visual Studio .NET over simple text editors include

  • Robust management of project files and multiple projects
  • Integration with the Microsoft Visual SourceSafe source-code .control environment
  • Visual Tools for working with Web services, Web Forms server .controls, and database tools
  • Packaging and deployment services for Web applications
  • Support for multiple languages within a single IDE, including cross–language inheritance and debugging

That's just a brief list. There's much more to the tool than can be covered in a single chapter. So without further ado, let's look at how to create projects and pages in the Visual Studio .NET environment.

Creating Applications

One of the first things you're going to want to do in order to work with ASP.NET in Visual Studio .NET is create a new project, or in Visual Studio .NET parlance, a Web application.

Create an ASP.NET Web application

  1. Launch Visual Studio .NET using the techniques you learned in Chapter 1.
  2. Open the New Project dialog box using one of the following methods:
    • Click the Create a New Project link on the Visual Studio .NET Start Page (displayed by default when you first open Visual Studio .NET).
    • Click to view graphic
      Click to view graphic

      New Project button

    • Click the New Project button, located on the standard toolbar.
    • From the File menu, select New, and then Project.

  3. In the New Project dialog box (see the following illustration), under Project Types, select the Visual Basic Projects folder, then select the appropriate template (ASP.NET Web Application). Set the location to http://localhost/Chapter_02, and then click OK.
  4. Visual Studio .NET will create a new Web application along with physical and virtual directories for the project.

    Click to view graphic
    Click to view graphic

That's it! You've created your first ASP.NET Web application. Note that this application is separate from the Chapter_02 project included with the practice file installation, which is contained in the aspnetsbs solution. Next we'll look at how to add new pages.

In your new Web application, you'll notice that Visual Studio .NET has already added a page named WebForm1.aspx to the project for you and opened it in the editor. Your Visual Studio .NET screen should look similar to the following illustration. However, since one page is rarely enough for most sites, let's look at how to add a new page to your Web application.

Click to view graphic
Click to view graphic

Create a new ASP.NET page (Web Form)

  1. Add a new Web Form to your application.
  2. As with creating a new project, there are several ways to add a new ASP.NET page (Web Form) to your application. The method you choose depends largely on how you like to work. Here are three ways to accomplish this task, although there are others:

    • In the Solution Explorer window, right-click the application name, then select Add, and then select Add Web Form, as shown in the following illustration.
    • Click to view graphic
      Click to view graphic

    • On the Visual Studio .NET toolbar, click the Add New Item button and then select Web Form from the Templates list.
    • Click to view graphic
      Click to view graphic

      Add New Item button

    • From the Project menu, select Add Web Form.

    Any of these methods will open the Add New Item dialog box, shown in the following illustration.

    Click to view graphic
    Click to view graphic

  3. In the Add New Item dialog box, verify that the Web Form template is .selected and name the new page hello.aspx. Click Open.
  4. Visual Studio .NET creates the page, adds it to the project, and opens it in the Web Forms Designer.

    Click to view graphic
    Click to view graphic

Adding Server Controls

Now that you've created a page for your new application, what can you do with it? Well, let's begin by making it display a "Hello World!" greeting to the client. By default, Web Forms are opened in GridLayout mode. Since GridLayout relies on Cascading Style Sheets (CSS), which are not supported in all browsers, you might want to change the page layout to FlowLayout mode.

Modify Web Form properties

  1. With the Web Form open in the Visual Studio .NET designer, click the Web Form page to ensure it is selected.
  2. When the page is selected, the word DOCUMENT should appear in the drop-down box at the top of the Properties window.

  3. Select the pageLayout property from the Properties window, and then use the drop-down list to change its value to FlowLayout, as shown in the following illustration.
  4. Click to view graphic
    Click to view graphic

  5. Save the page by selecting File, and then Save (or by clicking the Save .button on the toolbar).
  6. Until you add controls (or HTML elements), the page will display the .following message in Design view.

    Click to view graphic
    Click to view graphic

Add controls to a Web Form

  1. With the Web Form open in design mode, place your mouse over the Toolbox tab. (By default, it's found to the left of the code editor/designer window.)
  2. When the Toolbox appears, ensure that the Web Forms palette is active. (The title bar of the active palette is shown immediately above the controls displayed in the Toolbox.) If it isn't active, click on its title bar to activate it. Note that the Web Forms palette is available only when a page is in .Design mode.
  3. With the Web Forms palette active, double-click the Label Control entry to add an ASP.NET Label control to the page. (You might have to let the toolbox hide itself to see the label on the form.) Once you've added the .label, it should be selected by default.
  4. To make the Label control display the text you want, you need to change its Text property. Select the Text property in the Properties window, and then change the text (by default, Label) to Enter a name:, as shown in the following illustration.
  5. Click to view graphic
    Click to view graphic

  6. Click the background of the page to place the cursor after the Label control you added to the page.
  7. Using the Toolbox as in step 3, add a TextBox control to the page, and then add a Button control to the page.
  8. Using the same technique as in step 4, change the Text property of the .Button control to Submit.
  9. Save the page by clicking the Save button on the toolbar. You can also save by selecting Save <filename> from the File menu.
  10. Click to view graphic
    Click to view graphic

    Save button

Add event handler code

  1. To make the page do anything useful, you need to add some code, so double-click the Button control.
  2. This will open up the code-behind module for the Web Form and create an event handler procedure called Button1_Click.

  3. Add the following code to the Button1_Click procedure:
  4. Label1.Text = "Hello, " & TextBox1.Text & "!"
    TextBox1.Visible = False
    Button1.Visible = False

  5. Save the code-behind module, which should now look like the illustration on the following page.
  6. Click to view graphic
    Click to view graphic

Building and Testing Your Page

Because you modified the code-behind module for the Web Form, you need to build your project before you can browse the page. (You'll learn more about code-behind in later chapters.) Building is the process of compiling all of the code modules in the project so they'll be available to the pages and modules that call them. To build the project, from the Build menu, select Build Chapter_02 (or Build Solution, which will build all projects in the solution).

Once you've saved the Web Form page and its code-behind module and built the application, you can test the page.

Test your page

  1. Right-click the page in Solution Explorer and select View In Browser.
  2. The result should look like the following illustration. (You can close the Output window if you want to see more of a page.)

    Click to view graphic
    Click to view graphic

  3. Enter your name in the text box and click Submit.
  4. The result should be similar to the following illustration. (Note that the Web toolbar shows the address of the page being browsed. You can enter this address in a browser window on your machine to view the page in a non-embedded browser window.)

    Click to view graphic
    Click to view graphic

Chapter 2 Quick Reference

ToDo thisButton
Create a new project in Visual Studio .NETClick the New Project Button, select the project language and template, and then provide the name and location for the new project.

Click to view graphic
Click to view graphic

Create a new Web Forms pageClick the Add New Item button (or click the arrow to the right and select Add Web Form). Provide a name for the new Web Form and click OK.
Save a fileClick the Save button, or select Save <filename> from the File menu.



Last Updated: October 29, 2002
Top of Page