Creating Basic Web Form Pages in ASP.NET

Steven Walther discusses how to create basic Web Form Pages. Learn how to add a new Web Form Page to a project and compile it, how to add HTML and Web controls to your project, and how to handle both control and page events by adding event handlers to your code.

This chapter is from the book

In this chapter, you learn how to build Web Form Pages. Web Form Pages,
unlike standard static HTML pages, can contain dynamic content. You can use Web
Form Pages to do such things as validate form data and display and edit database
data. Web Form Pages are the most important part of any Web Application that you
build with Visual Studio .NET.

In this chapter, you will learn

How to create a simple Web Form Page

How to add server controls to a Web Form Page

How to handle events in a Web Form Page

Overview of Web Form Pages

Although Web Form Pages can contain dynamic content, the foundation of any
Web Form Page is standard HTML. You create all the static portions of a Web Form
Page by using the same methods that you learned about in Chapter 2, "Using
the Visual Studio .NET Designer."

However, Web Form Pages can contain two things that cannot be included in
static HTML pages. Web Form Pages can contain server controls and application
logic.

You can think of server controls as server-side HTML tags. When you add a
server control to a page, the control is executed on your Web server and it
generates content that is sent to a Web browser.

The advantage of server controls over plain old HTML tags is that you can
program server controls. Server controls have properties, methods, and events
that you can manipulate in your code.

In this chapter, you'll be provided with an overview of the basic server
controls for building form elements. For example, you'll learn how to add
Textbox and Button controls to a Web Form Page.

A Web Form Page can also contain application logic. You can add programming
code to a Web Form Page that executes whenever the page is requested. For
example, you can write Visual Basic .NET code that retrieves data from a
database table and displays the data in a server control.

In this chapter, you'll learn how to add application logic to a Web Form
Page that handles different page events. For example, you'll learn how to
display different messages on a page depending on the options that a user
selects in a form.

Creating a Simple Web Form Page

We'll start with a simple Web Form Page. We'll create a page that
randomly displays a fortune.

NOTE

You should add a Web Form Page to an existing ASP.NET project. To learn how
to create a new project, see Chapter 1, "Getting Familiar with the
Development Environment."

First, we need to add a Web Form to a project by doing the following:

Select Project, Add Web Form.

In the Add New Item dialog box, enter the name
Fortune.aspx for the Web Form in the Name text box.

Click Open.

Now that you've created a Web Form Page, you can add server controls to
the page from the Web Forms toolbox. We'll add a Label control to
the page by performing the follow steps:

If the Toolbox window is not already open, select View, Toolbox.

Drag a Label control onto the Designer surface from under the
Web Forms tab in the Toolbox.

After you add the Label control, your screen should resemble Figure
3.1.

The next step is to add some application logic to the page. We want to
retrieve a random fortune from an ArrayList of fortunes and display the fortune
in the Label control. To do this, perform the following steps:

Finally, we are ready to compile and view our Web Forms page. Right-click the
Web Form in the Solution Explorer window and select Build and Browse. The Web
Form Page will be opened in a browser and you should see a fortune (see Figure
3.2). Whenever you click the Refresh button, a new fortune is randomly selected
and displayed.

TIP

If you receive an error when building your code, select Build Solution from
the Build menu. A list of errors in your code will pop up in the Task List
window. You can double-click an error to go directly to the error in your
code.

The Two Parts of a Web Form Page

When you create a Web Form Page, you typically need to work with the page by
using three different interfaces. While designing the visual elements of a Web
Form Page, you use either Design View or HTML View with the Designer. While
developing the application logic for a Web Form Page, you use the Code
Editor.

In reality, a Web Form Page consists of two files. One file, the presentation
page, contains all the user interface elements of the Web Form, such as HTML
tags and Web server controls. This file must end with the extension .aspx. This
is the page that you actually request when opening the page in your Web
browser.

A Web Form also uses a second file, called the code-behind file, which
contains all the application logic for the page. By default, the code-behind
file does not appear in the Solution Explorer window. To see this file, you must
select Show All Files from the Project menu. The code-behind file has the same
name as the presentation page with the addition of the extension .cs or .vb. The
code-behind file ends with the extension .cs or .vb because it is a C# or VB.NET
class file.

While working with the user interface elements of a Web Form, you use either
Design or HTML View in the Designer window. To add application logic to a page,
you work with the Code Editor. You can switch between the Designer and Code
Editor by using any of the following methods:

Double-click the Designer surface to switch to the Code Editor.

Select Code from the View menu to switch to the Code Editor or select
Design from the View menu to switch to the Designer window.

Use the keyboard shortcuts Shift+F7 and F7.

In the Designer window, right-click the page and select View
Code.

In the Solution Explorer window, right-click the page and select either
View Code or View Designer.

Compiling and Viewing Web Form Pages

Because one part of a Web Form Page is a C# or Visual Basic .NET class file,
you must compile a Web Form Page before you can view it in a Web browser. If
you don't compile a Web Form before opening the page in a browser, you'll
receive the error displayed in Figure 3.3.

You can compile all the files in a project and view the output of a
particular Web Form Page by right-clicking the page in the Solution Explorer
window and selecting Build and Browse. The page is compiled and displayed in the
default Visual Studio .NET Web browser. This will be the preferred method of
compiling and viewing pages used in this book.

TIP

If you prefer to use the keyboard, you can build and browse the current page
by pressing Ctrl+F8.

It is important to understand that there is no way to build only a single
page in a project. When you do a build, all files contained in the project are
compiled. This means that when you have any errors in any page in a project, you
cannot build any other page.

TIP

You can temporarily exclude a page from a project by right-clicking the page
in Solution Explorer and selecting Exclude From Project. You'll need to do
this when the page has an error but you want to work on another page before
fixing it. You can recover the excluded page by selecting Show All Files from
the Project menu and then right-clicking the filename and selecting Include In
Project.

Alternatively, you can build all the files in a solution or project without
opening a page in a Web browser. You can select any one of the following options
from the Build menu:

Build SolutionCompiles all files in all projects contained
in the current solution that have been modified since the Build command
was last executed

Rebuild SolutionCompiles all files in all projects contained
in the current solution, regardless of whether the files have been modified
since the Build command was last executed

Build Project NameCompiles all files in a particular project
that have been modified since the Build command was last
executed

Rebuild Project NameCompiles all files in a particular
project that have been modified since the Build command was last
executed

When you compile the files in a project using any of these methods, an Output
window opens that displays messages generated during compilation. At the end of
compilation, the Output window should display the number of files that were
successfully built.

If any errors are encountered while building a project or solution, the Task
window will open and display a list of the errors. You can double-click any
error in the Task List to go directly to the page containing the error.

NOTE

You also can compile the files in your application by using the options
located under the Debug menu. Debugging is discussed in detail in Chapter 6,
"Debugging Your Web Form Pages."