CHAPTER 2

Page Development
2.1 Introduction
A Web page is a document with a unique Uniform Resource Locator (URL) or Web address.
This document is served by a Web server and is displayed in a Web client (i.e., browser).
Web pages are formatted using the Hypertext Markup Language (HTML), which is a
standardized coding system that uses tags to affect a page’s basic display characteristics
(e.g., font, color, layout) and create simple functionality (e.g., transitions to other pages).
Transitions to other pages are achieved through hypertext links (a.k.a., hyperlinks), where
a hypertext link is associated with a single URL. When clicked, a hypertext link causes a
transition from one Web page to another.
In this chapter, we will begin by looking at the identifier naming standards we will
apply throughout this book. These standards will be applied when naming variables,
constants, server controls, and other items. Next, we will discuss the Page class (a.k.a.,
the Web Forms Page class), which is the class we will use to create ASP.NET Web pages.
And finally, we will learn how to add a page to an ASP.NET Web Application project
using Visual Studio. As we will see throughout this book, we will add a Page class to our
project for every Web page we want to display in our ASP.NET Web application.

2.2 Identifier Naming Standards

An identifier is the name we give a variable, constant, server control, or other items.
Using identifier naming standards makes reading the source code of a class much
easier—especially when maintaining the code later.

29
© Robert E. Beasley 2020
R. E. Beasley, Essential ASP.NET Web Forms Development, https://doi.org/10.1007/978-1-4842-5784-5_2
Chapter 2 Page Development

When naming variables and constants, we should use names that make the content
of the item as obvious as possible. This is accomplished by doing two things. First, it is
accomplished by beginning the name of the item with a three-letter prefix that reflects
the type of data the item will contain. And second, it is accomplished by completing the
name of the item with a suffix that reflects what data the item will contain. For example,
when declaring a string variable that will hold a person’s last name, we would give the
variable the name strLastName. This shows the type of data the variable will hold (i.e.,
string data) as well as what data the variable will hold (i.e., a person’s last name).
When naming server controls, on the other hand, we should use names that make the
use of the control as obvious as possible. This is also accomplished by doing two things.
First, it is accomplished by beginning the name of the control with a three-letter prefix that
reflects the type of control the control is. And second, it is accomplished by completing
the name of the control with a suffix that reflects what control the control is. For example,
when creating a text box that will accept a person’s last name, we would give the control
the name txtLastName. This shows the type of control the control is (i.e., TextBox control)
as well as what control the control is (i.e., the last name text box).

2.3 Page Class

The Page class is a container that holds other ASP.NET server classes, such as Label
classes, TextBox classes, and Button classes. Thus, the Page class is the foundation of the
user interface of a .NET Web application. Web pages are requested from the server by
a client. In the .NET Framework, the first time a Web page is requested by a client, it is
compiled on the server, served to the client, and cached in server memory to be used for
subsequent client requests. A given Page class is stored on the server in a .aspx file.
Table 2-1 shows some of the properties, methods, and events of the Page class.
Although we have little context for these at the moment, it is important to at least
become familiar with them as we will refer to them later.

30
 Chapter 2 Page Development

Table 2-1.  Some of the properties, methods, and events of the Page class
Class Page1

Namespace System.Web.UI
Properties
ClientQueryString Gets the query string portion of the requested URL.
IsPostBack Gets a value that indicates whether the page is being rendered for the first
time or is being loaded in response to a postback.
IsValid Gets a value indicating whether page validation succeeded.
Master Gets the master page that determines the overall look of the page.
MasterPageFile Gets or sets the virtual path of the master page.
Request Gets the HttpRequest object for the requested page.
Response Gets the HttpResponse object associated with the Page object. This object
allows you to send HTTP response data to a client and contains information
about that response.
Server Gets the Server object, which is an instance of the HttpServerUtility class.
Session Gets the current Session object provided by ASP.NET.
Theme Gets or sets the name of the page theme.
Title Gets or sets the title for the page.
Methods
(See reference.)
Events
InitComplete Occurs when page initialization is complete.
LoadComplete Occurs at the end of the load stage of the page’s life cycle.
(continued)

1
 ll property, method, and event descriptions were taken directly from Microsoft’s official
A
documentation. The event handler methods used to handle the events of this class were omitted
to conserve space. See the reference for all of the methods of this class.

31
Chapter 2 Page Development

Table 2-1.  (continued)

Class Page1

PreInit Occurs before page initialization.

PreLoad Occurs before the page Load event.
PreRenderComplete Occurs before the page content is rendered.
SaveStateComplete Occurs after the page has completed saving all view state and control state
information for the page and controls on the page.
Reference
https://msdn.microsoft.com/en-us/library/system.web.ui.page(v=vs.110).aspx

2.4 Adding a Page Class

In the last chapter, we learned how to start a brand new ASP.NET Web Application
project. Now, it is time to add a Page class to that project. If not already open, we need to
open the ASP.NET Web Application project created in the last chapter. To do this

1. Execute Visual Studio.

2. Select File ➤ Open ➤ Project/Solution… from the main menu.

3. When the Open Project dialog appears, navigate to the .sln file for
the project.

4. Select the .sln file.

5. Click Open.

The .sln file, by the way, is the solution file. As the name implies, this file contains
information about the solution, including the individual projects it contains. This can
be a little confusing in Visual Studio because when we create a new ASP.NET Web
Application project, we are actually creating a new solution that contains a new project.
Assuming that the project is open, we can now add a Page class to our project. To add
a Page class to an ASP.NET Web Application project

32
 Chapter 2 Page Development

1. Open the Solution Explorer.

2. Right-click the project (not the solution).

3. Select Add ➤ New Item….

When the Add New Item dialog appears

1. Select Installed ➤ Visual C# ➤ Web ➤ Web Forms from the left

pane of the dialog.

2. Select Web Form from the middle pane of the dialog.

3. Give the Web Form (i.e., Page class) a Name (e.g., HelloWorld.
aspx) at the bottom of the dialog.

4. Click Add.

Figure 2-1 shows the Aspx file of the newly added Page class. Notice the tab between
the Visual Studio menu and the top of the code. This tab displays the name of the Page
class file just created (i.e., HelloWorld.aspx). It is in this file that we will code the user
interface of the page. Now look at the code itself. The very first line of code on this page is
a page directive. This page directive indicates, among other things, that C# is used as the
programming language for the class and that the name of the code behind file (i.e., where
we will write our server-side ASP.NET and C# code) is HelloWorld.aspx.cs. Notice that
the remainder of this file contains a number of basic HTML tags, such as <head>, <title>,
<body>, and <div>. And finally, notice in the Solution Explorer that the Page class has
been added to the project. Whenever we want to access the code of this Page class in the
future, we will simply double-click it in the Solution Explorer.

33
Chapter 2 Page Development

Figure 2-1.  Aspx file of the newly added Page class

The Page class has two main (and deliberately separate) parts—the user interface
part and the code behind part. The .aspx file of a Page class contains the user interface
part of the class. This part of the class is coded using HTML tags, ASP.NET tags, or a
combination of both. The .aspx.cs file of a Page class contains the code behind part of the
class. This part of the class is coded using ASP.NET and C#. The beauty of this separation
of concerns is that we can make changes to a page’s user interface without affecting its
functionality and we can make changes to a page’s functionality without affecting its user
interface. We will find this separation of concerns extremely beneficial in the future.
To write ASP.NET and C# code, we need to open the code behind file of the class. To
access the code behind file

1. Expand the Page class by clicking the triangle icon next to the
.aspx file in the Solution Explorer.

2. Double-click the associated .aspx.cs file.

Figure 2-2 shows the code behind file of the newly added Page class. Notice the tab
between the Visual Studio menu and the top of the code. This tab displays the name of
the code behind file of the Page class (i.e., HelloWorld.aspx.cs). It is in this file that we will
write the ASP.NET and C# code of our page. Now look at the code itself. Notice at the very

34
 Chapter 2 Page Development

top of the code that there are a number of C# directives that begin with the word using.
These using directives refer to the namespaces included in the class. Namespaces can
contain classes that provide the Page class with additional functionality (e.g., email classes,
database classes), or they can contain types (e.g., interface types, array types, value types,
reference types, enumeration types) that provide the Page class with specialized types. As
we progress through this book, we will include additional namespaces in our Page classes
as the need arises. Now look at the line of code that starts with the word namespace. This
indicates that the HelloWorld Page class is in the SportsPlay namespace. If for some reason
we need to refer to the properties and/or methods of the HelloWorld Page class from some
other class in the future, we will need to include the SportsPlay namespace in that class.
Next, take a look at the line of code that starts with the phrase public partial class. The word
partial here indicates that this file (i.e., HelloWorld.aspx.cs) contains only a part of the
HelloWorld Page class. The other files (i.e., HelloWorld.aspx and HelloWorld.aspx.designer.
cs) contain the other parts of the HelloWorld Page class. And finally, look at the line of code
that starts with protected void. This line of code identifies the Page_Load event handler
method of the class, which is generated automatically when the Page class is added to the
project. If there is any ASP.NET and/or C# code that needs to be executed when the page
loads (i.e., when the page’s Load event is raised), it will be coded here.

Figure 2-2.  Code behind file of the newly added Page class
35
Chapter 2 Page Development

At this point, we are ready to write some code. To begin, let’s give our HelloWorld
page a title. This title will be displayed at the top of the browser—usually as the title of
a browser tab. To give the page a title, type “Hello World!” between the <title> tag and
the </title> tag in the HelloWorld.aspx file. Note that these two tags are HTML tags. An
HTML tag of the form <something> is referred to as an open tag or start tag, whereas an
HTML tag of the form </something> is referred to as a close tag or end tag. As we will see
later, ASP.NET server tags have a similar form. Now, let’s display some text in the body of
the page. To do this, type the sentence “This is my Hello World page!” between the <div>
tag and the </div> tag. Figure 2-3 shows our Aspx code with a page title and text added.

Figure 2-3.  Aspx code with a page title and text added

Now that we have written some code, it is time to test our Web page. To test our page,
we must first set it as the start page of our project. To do this

1. Right-click the HelloWorld.aspx file in the Solution Explorer.

2. Select Set as Start Page.

36
 Chapter 2 Page Development

Now, when we run our ASP.NET Web Application project in Visual Studio, the
HelloWorld.aspx page will be displayed. Keep in mind that if we neglect to set a start
page for a project before we run it, we will receive a 403 error. This error means that the
IIS server understood the HTTP request but cannot fulfill it for some reason.
Now that we have set our start page, we are ready to test it. To test the page, click the
green triangle icon at the top of the Visual Studio environment. The name of the browser
next to the green triangle icon should default to Internet Explorer. To select a different
browser to test the page, click the black triangle icon next to the current browser name
and select the desired browser. The list of browsers to choose from should contain all
of the browsers currently installed on the development machine. Figure 2-4 shows the
HelloWorld page displayed in Internet Explorer. Notice the title of the Web page in the
browser tab that says “Hello World!” Also notice the sentence “This is my Hello World
page!” in the body of the Web page.

Figure 2-4.  HelloWorld page displayed in Internet Explorer

37