Creating Basic Web Form Pages
- Overview of Web Form Pages
- Adding Server Controls
- Handling Events
- Summary
This chapter is from the book
This chapter is from the book
This chapter is from the book
In This Chapter
Overview of Web Form Pages
Adding Server Controls
Handling Events
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.
)
Figure
3.1 Adding a Label control to a Web Form Page.
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:
-
Double-click the Designer surface to switch to the Code Editor.
- Enter the following code for the Page_Load() method:
C#
private void Page_Load(object sender, System.EventArgs e) { // Put user code to initialize the page here ArrayList colFortunes = new ArrayList(); Random objRan = new Random(); colFortunes.Add("Good things will happen!"); colFortunes.Add("Future looks bright!"); colFortunes.Add("Stay in bed!"); Label1.Text = colFortunes[ objRan.Next( 3 ) ].ToString(); }VB.NET
Private Sub Page_Load(ByVal sender As System.Object, ByValue As System.EventArgs) Handles MyBase.Load 'Put user code to initialize the page here Dim colFortunes As New ArrayList() Dim objRan As New Random() colFortunes.Add("Good things will happen!") colFortunes.Add("Future looks bright!") colFortunes.Add("Stay in bed!") Label1.Text = colFortunes(objRan.Next(3)) End Sub
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.
)
Figure
3.2 A Web Form Page displaying a random fortune.
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.
)
Figure
3.3 Error from viewing a Web Form Page without compiling it.
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."