Home

Introduction to Using a Web Page

A Webpage

Introduction

The webpage is the most fundamental object of a website. It is the main object that presents the site. To support webpages, ASP.NET provides a class named Page.

Loading a Webpage

When the browser opens a webpage, the page fires an event named Load. To use this event, create a function named Page_Load for that event. That event is the good place to do anything that is necessary as soon as the page displays. Here is an example:

<%@ Page Language="C#" %>

<!DOCTYPE html>
<html>
<head>
<script runat="server">
void Page_Load(object sender, EventArgs e)
{
    Response.Write("The page has been opened and is now available...");
}
</script>
<title>Exercise</title>
</head>
<body>

</body>
</html>

Notice that the body element is empty but anything in the Load event is done.

The Previous Page

If the visitors got to a webpage from another page, the browser has in memory a webpage referred to as the previous page. To allow you to access that previous page, the Page class is equipped with a property named PreviousPage. It is based on the Page class.

Server-based Built-In Classes and Objects

Introduction

The main webserver for ASP.NET is named (Microsoft) Internet Information Server (or Services), or IIS. It provides the fundamental classes and objects used to manage websites created on the server and the webpages created in them. The object are fundamentally created as regular (static) classes. You don't have to declare variables for them. You can directly use those objects in your code.

The Server Object

The most fundamental object of IIS is named Server. It allows you to perform some basic operations on a webpage.

Responding to a Client

To let you display some sentences on a webpage, IIS provides an object named Response.

Requesting Values

To make it possible to get the values a webpage visitor creates on a webpage, IIS provides an object named Request.

A User Session

A session is the group of operations a visitor performs on a webpage including the time a visitors spends on the page. To let you perform operations related to a session, IIS provides an object named Session.

The Text Box

Introduction

A text box is a control that receives a value from a webpage visitor or displays a value to the visitor. The class that handles the text box is named TextBox and it is represented by the asp:TextBox control. We have already seen examples of text boxes.

Using Various Webpages

<asp:Button></asp:Button>
<asp:Button runat="server"></asp:Button>


Method = GET

<form method="post" runat="server">

</form>

Taking Action

Once the information from a form reaches the server, it must be processed. This is usually done by specifying the file that includes the code used to process the information that was sent. A regular file in this case would have the .aspx extension. This can be the same file that contains the form or it can be a separate file.

To specify the file used to process information from a form, the <form> tag is equipped with an attribute named action to which you can assign the name of the file, as a string. This can be done as follows:

<form method="post" action="index.aspx" runat="server">

</form>

As with all HTML attributes, the position of the ACTION attribute is not important. That is, it can be positioned before or after another attribute.

<%@ Page Language="C#" %>

<!DOCTYPE html>

<html>
<head runat="server">
<title>Employment Application</title>

</head>
<body>
<h2>Employment Application</h2>

<form id="frmEmployment" method="get" runat="server">

  <table border="0" width="320">
    <tr>
      <td width="100" class="names">First Name:</td>
      <td><asp:TextBox id="txtFirstName" runat="server"></asp:TextBox></td>
    </tr>
    <tr>
      <td width="100" class="names">Last Name:</td>
      <td><asp:TextBox id="txtLastName" runat="server"></asp:TextBox></td>
    </tr>
    <tr>
      <td width="100" valign="top" class="names">Full Name:</td>
      <td><asp:TextBox id="txtFullName" runat="server"></asp:TextBox></td>
    </tr>
  </table>
</form>

</body>
</html>

This would produce:

The Identifier of a Control

Remember that, to close a control tag, you can end the start tag with a forward slash and omit the end tag. Here are examples:

<%@ Page Language="C#" %>

<!DOCTYPE html>

<html>
<head runat="server">
<title>Employment Application</title>

</head>
<body>
<h2>Employment Application</h2>

<form id="frmEmployment" method="get" runat="server">

  <table border="0" width="320">
    <tr>
      <td width="100" class="names">First Name:</td>
      <td><asp:TextBox id="txtFirstName" runat="server" /></td>
    </tr>
    <tr>
      <td width="100" class="names">Last Name:</td>
      <td><asp:TextBox id="txtLastName" runat="server" /></td>
    </tr>
    <tr>
      <td width="100" valign="top" class="names">Full Name:</td>
      <td><asp:TextBox id="txtFullName" runat="server" /></td>
    </tr>
  </table>
</form>

</body>
</html>

The controls that display or request text have a property named Text. That property is represented in HTML by an attribute of the same text. To indicate the text of a control, you can assign the desired value to this attribute. Here are examples:

<%@ Page Language="C#" %>

<!DOCTYPE html>

<html>
<head runat="server">
<title>Geometry: Square</title>
</head>
<body>
<div align="center">
<h2>Geometry: Square</h2>

<form id="frmSquare" method="get"
    runat="server">
  <table>
    <tr>
      <td><asp:Label id="lblSide" Text="Side:" runat="server"></asp:Label></td>
      <td>
	<asp:TextBox Runat="server"
	             id="txtSide" Text="0.00"></asp:TextBox>
	<asp:Button Runat="server" id="btnCalculate"
                    Text="Calculate"></asp:Button></td>
    </tr>
    <tr>
      <td><asp:Label id="lblPerimeter" Text="Perimeter:"
                     runat="server"></asp:Label></td>
      <td><asp:TextBox Runat="server"
                       id="txtPerimeter" Text="0.00"></asp:TextBox></td>
    </tr>
    <tr>
      <td><asp:Label id="lblArea" Text="Area:" runat="server"></asp:Label></td>
      <td><asp:TextBox Runat="server"
                       id="txtArea" Text="0.00"></asp:TextBox></td>
    </tr>
  </table>
</form>
</div>
</body>
</html>

This would produce:

The Text of a Control

On the other hand, to access the text of a control, type the identifier of the control, followed by .Text. Such a string can be used like a normal string variable. Here is an example:

 string firstName = txtFirstName.Text;

If you are not planning to use a value many times, you don't have to declare a variable for it. This allows you to directly access a control and its variable where it is needed. Here is an example that uses one instead of three variables as above:

string fullName  = txtFirstName.Text + " " + txtLastName.Text;

Here is an example that doesn't use variables:

 txtFullName.Text = txtFirstName.Text + " " + txtLastName.Text;

Web Controls and Cascading Style Sheet

Everything you know about Cascading Style Sheet (CSS) formatting can be applied to a web control. As you may know already, there are three main ways CSS is used in a web page. To apply it on a control, you can create a style attribute in the start tag of a control and assign the values to it. It can start as follows:

<%@ Page Language="C#" %>

<!DOCTYPE html>

<html>
<head runat="server">
<title>Geometry: Square</title>
</head>
<body>
<div align="center">
<h2>Geometry: Square</h2>

<form id="frmSquare" method="get" runat="server">
  <table>
    <tr>
      <td><asp:Label id="lblSide"
                     style="color: #0000FF"
                     Text="Side:" runat="server"></asp:Label></td>
      <td>
	<asp:TextBox Runat="server" id="txtSide" Text="0.00"></asp:TextBox>
	<asp:Button Runat="server" id="btnCalculate"
                    Text="Calculate"></asp:Button></td>
    </tr>
    <tr>
      <td><asp:Label style="font-weight: bold; color: #FF0000;"
                     id="lblPerimeter"
                     Text="Perimeter:" runat="server"></asp:Label></td>
      <td><asp:TextBox Runat="server" id="txtPerimeter" Text="0.00"
                       style="font-style: italic; color: #800;">
                       </asp:TextBox></td>
    </tr>
    <tr>
      <td><asp:Label id="lblArea"
                     style="font-weight: bold; color: #FF0000;"
                     Text="Area:" runat="server"></asp:Label></td>
      <td><asp:TextBox Runat="server"
                       id="txtArea" Text="0.00"
                       style="font-style: italic; color: #800;">
          </asp:TextBox></td>
    </tr>
  </table>
</form>
</div>
</body>
</html>

This would produce:

The Style of a Control

This can be referred to as inline formatting because it affects only the tag in which the style is created. The second technique consists of creating the necessary styles in the <head> tag of the HTML file. The third technique used to integrate CSS in your web page consists of creating a separate CSS file and referencing it in your (HTML, ASP, or ASP.NET) web page.

An event is an action that happens to a control on a webpage. The code of an event is like that of a function. It must have a name.

Implementing an Event

In order to take the appropriate action about an event, you must write code and attach it to the control. This is referred to as defining or implementing an event. There are various ways you can implement an event. One way is to include it in the script element in the head section. Write the event code in the script part of the head section of the webpage. The code of an event is like the one for a function. The return type is always void.

The Name of a Function Event

The name of the function that implements an event is usually in two parts. This is not a rule, only a convention or a habit.

The first part of the name of a function event follows the rules we saw for function: It can start with an underscore or a letter followed by a combination of letters, digits, and underscores in any order. The second part is the name of the event.

The event that fires when a webpage opens is (always) named Page_Load. If you name it exactly like that, the webserver would implicitly know what the event is used for. If you name it something else, you must indicate to the browser what to do.

The function of an event takes two parameters. The first parameter represents the web control that fires an event. That parameter is always the Object class, represented in C# with the object data type. By convention or traduction, the name of that first parameter is sender.

The second parameter is a class. It depends on the control that is firing an event. The most fundamental class for webcontrols is named EventArgs, which stands for, or represents, the arguments of the event. The non-fundamental events have particular names based on their purposes. Some people separate the first and the second parts of a function event with an underscore but this is not required.

By convention or traduction, the name of that second parameter is e. Because this parameter too is a class, it has properties. Those properties hold some values that can be useful when using the event.

The Types of Events

Various webcontrols fire different types of event because those controls have different goals. As a result, the .NET Framework supports different types of events. Each event has a specific name. The most regular events are:

Event ASP.NET Class Name Description
Load EventArgs Occurs when the control displays on the webpage
Click EventArgs Fires when a clickable control (a control that can be clicked) is clicked
Bulleted List BulletedListEventArgs Provides information about the list item that was clicked

Based on this, when creating a function for an event, specify the first parameter as object sender and the second parameter by the appropriate event class and e. Here is an example:

<%@ Page Language="C#" %>

<!DOCTYPE html>
<head runat="server">
<title>Exercise</title>

<script runat="server">
void function-name-SomeEvent(object sender, event-class e)
{
}
</script>

</head>
<body>

</body>
</html>

Attaching an Event to a Wecontrol

After writing code for an event, you must indicate what control will fire that event. To support this, the start tag of every control has an attribute that is specific to each event. For example, whenever a visitor clicks a button, the control fires an event named OnClick. To handle this event, the control has an attribute named OnClick. You can assign the name of the function event to this attribute. Here is an example:

<%@ Page Language="C#" %>

<!DOCTYPE html>
<head runat="server">
<title>Exercise</title>

<script runat="server">
void btnCalculateClick(object sender, EventArgs e)
{
}
</script>

</head>
<body>

<form id="frmCalculation" runat="server">

<asp:Button runat="server" id="btnCalculate"
                           Text="Calculate"
                           OnClick="btnCalculateClick"></asp:Button>

</form>

</body>
</html>

Using a Control Event

Introduction

In the body of the function of an event, you can declare variables, access the webcontrols of a form, and perform various types of operations. Here is an example:

<%@ Page Language="C#" %>

<!DOCTYPE html>

<html>
<head runat="server">

<script runat="server">
void btnGetFullNameClick(object sender, EventArgs e)
{
    string firstName = txtFirstName.Text;
    string lastName = txtLastName.Text;
    string fullName  = firstName + " " + lastName ;

    txtFullName.Text = fullName;
}
</script>

<title>Employment Application</title>

</head>
<body>
<h2>Employment Application</h2>

<form id="frmEmployment" method="get" runat="server">

  <table border="0" width="320">
    <tr>
      <td width="100" class="names">First Name:</td>
      <td><asp:TextBox id="txtFirstName" runat="server" /></td>
    </tr>
    <tr>
      <td width="100" class="names">Last Name:</td>
      <td><asp:TextBox id="txtLastName" runat="server" />
          <asp:Button Runat="server" id="btnGetFullName"
                      Text="Get Full Name"
                      OnClick="btnGetFullNameClick"></asp:Button></td>
      </td>
    </tr>
    <tr>
      <td width="100" valign="top" class="names">Full Name:</td>
      <td><asp:TextBox id="txtFullName" runat="server" /></td>
    </tr>
  </table>
</form>

</body>
</html>

Remember that if you are not planning to use a value many times, you don't have to declare a variable for it. This allows you to directly access a control and its variable where it is needed. Here is an example that uses one instead of three variables as above:

string fullName  = txtFirstName.Text + " " + txtLastName.Text;

Here is an example that doesn't use variables:

<%@ Page Language="C#" %>

<!DOCTYPE html>

<html>
<head runat="server">

<script runat="server">
void btnGetFullNameClick(object sender, EventArgs e)
{
    txtFullName.Text = txtFirstName.Text + " " + txtLastName.Text;
}
</script>

<title>Employment Application</title>

</head>
<body>
<h2>Employment Application</h2>

<form id="frmEmployment" method="get" runat="server">

  <table border="0" width="320">
    <tr>
      <td width="100" class="names">First Name:</td>
      <td><asp:TextBox id="txtFirstName" runat="server" /></td>
    </tr>
    <tr>
      <td width="100" class="names">Last Name:</td>
      <td><asp:TextBox id="txtLastName" runat="server" />
              <asp:Button Runat="server" id="btnGetFullName"
                           Text="Get Full Name"
                                 OnClick="btnGetFullNameClick"></asp:Button></td>
</td>
    </tr>
    <tr>
      <td width="100" valign="top" class="names">Full Name:</td>
      <td><asp:TextBox id="txtFullName" runat="server" /></td>
    </tr>
  </table>
</form>

</body>
</html>

Remember that, to convert the value of a natural number (int, signed, ) variable to the right value, write the data type followed by Parse(). In the parentheses, write the identifier of the control followed by .Text. Here is an example:

int.Parse(txtNumber1.Text);

You can store this expression in a variable. Here is an example:

<script language="C#" runat="server">
void btnCalculateClick(object sender, EventArgs e)
{
    int number = int.Parse(txtNumber.Text);
}
</script>

The variable can then be used as necessary. For example, it can be involved in an operation. Here is an example:

<script language="C#" runat="server">
void btnCalculateClick(object sender, EventArgs e)
{
    int number1 = int.Parse(txtNumber1.Text);
    int number2 = int.Parse(txtNumber2.Text);
    
    int total = number1 + number2;
}
</script>

Converting a Value to a String

To convert the value of a variable to a string, type the name of the variable followed by ToString(). Here are examples:

<%@ Page Language="C#" %>

<!DOCTYPE html>
<html>
<head>
<script language="C#" runat="server">
void btnCalculateClick(object sender, EventArgs e)
{
    double number1 = double.Parse(txtNumber1.Text);
    double number2 = double.Parse(txtNumber2.Text);
    
    double total = number1 + number2;

    txtTotal.Text = total.ToString();
}
</script>
<title>Algebra</title>
</head>
<body>
<div align="center">

<form id="frmAlgebra" runat="server">
<h3>Algebra</h3>

<table border=0>
  <tr>
    <td>Enter Number 1:</td>
    <td><asp:TextBox id="txtNumber1" text="0" runat="server" /></td>
  </tr>
    <td>Enter Number 2:</td>
    <td><asp:TextBox id="txtNumber2" text="0" runat="server" />
           <asp:Button id="btnCalculate"
                              text="Calculate"
                              OnClick="btnCalculateClick"
                              runat="server"></asp:Button></td>
  </tr>
    <tr>
    <td>Addition:</td>
    <td><asp:TextBox id="txtTotal" text="0" runat="server" /></td>
  </tr>
</table>
</form>
</div>
</body>
</html>

Here is an example of using the webpage:

Converting a Value to a String

Converting a Value to a String

Converting a Value to a String

remember that ToString() provides many options to convert and display a number. In the parentheses of ToString(), enther the desired or appropriate letter as a string. The letters are:

Character Description
c C Currency values
d D Decimal numbers
e E Scientific numeric display such as 1.45e5
f F Fixed decimal numbers
d D General and most common type of numbers
n N Natural numbers
r R Roundtrip formatting
s S Hexadecimal formatting
p P Percentages

Here is an example:

<%@ Page Language="C#" %>

<!DOCTYPE html>
<html>
<head>
<div align="center">
<title>Payroll Preparation</title>
<script language="C#" runat="server">
void btnCalculateClick(object sender, EventArgs e)
{
    double hourlySalary = 0.00;
    double timeWorked  = 0.00;
    double netPay = 0.00;

    hourlySalary = double.Parse(txtHourlySalary.Text);
    timeWorked  = double.Parse(txtTimeWorked.Text);
    netPay = hourlySalary  * timeWorked;

    txtNetPay.Text = netPay.ToString("C");
}
</script>
</head>
<body>

<form id="frmPayroll" runat="server">
<h3>Payroll Preparation</h3>

<table border=1>
  <tr>
    <td>Hourly Salary:</td>
    <td><asp:TextBox id="txtHourlySalary"
                                text="0.00"
                                runat="server"></asp:TextBox></td>
  </tr>
    <td><asp:Label id="lblTimeWorked"
                              text="Time Worked"
                              runat="server"></asp:Label></td>
    <td><asp:TextBox id="txtTimeWorked"
                              text="0.00"
                              runat="server"></asp:TextBox>
           <asp:Button id="btnCalculate"
                              text="Calculate"
                              OnClick="btnCalculateClick"
                              runat="server"></asp:Button></td>
  </tr>
    <tr>
    <td>Net Pay:</td>
    <td><asp:TextBox id="txtNetPay"
                              text="0.00"
                              runat="server"></asp:TextBox></td>
  </tr>
</table>
</form>
</div>
</body>
</html>

This would produce:

Converting a Value to a String

Converting a Value to a String

Constants

Remember that you can use constants in your code. Here is an example:

<%@ Page Language="C#" %>

<!DOCTYPE html>
<html>
<head>
<title>Geometry: Circle</title>
<script language="C#" runat="server">
void btnCalculateClick(object sender, EventArgs e)
{
    const double PI = 3.14159265359;
    double radius = double.Parse(txtRadius.Text);

    double diameter = radius * 2.00;
    double circumference = diameter * PI;
    double area = radius * radius  * PI;

    txtDiameter.Text = diameter.ToString();
    txtCircumference.Text = circumference.ToString();
}
</script>
</head>
<body>
<div align="center">

<form id="frmCircle" runat="server">
<h3>Geometry: Circle</h3>

<table border=0>
  <tr>
    <td>Radius:</td>
    <td><asp:TextBox id="txtRadius" text="0.00" runat="server" />
           <asp:Button id="btnCalculate"
                              text="Calculate"
                              OnClick="btnCalculateClick"
                              runat="server"></asp:Button> </td>
  </tr>
    <td>Diameter:</td>
    <td><asp:TextBox id="txtDiameter" text="0.00" runat="server" /></td>
  </tr>
    <tr>
    <td>Circumference:</td>
    <td><asp:TextBox id="txtCircumference" text="0.00" runat="server" /></td>
  </tr>
</table>
</form>
</div>
</body>
</html>

Here is an example of using the webpage:

Constants

Constants

Constants

Client Events

Some processing can take place in the visitor's computer and some parts must be done by the server. When creating an event, you can indicate what machine will process what. ASP.NET provides some events that indicate what machine would process an instruction. The OnClientClick event is an example of indicating that the client computer will perform a certain action.

Code Behind

Code created in a script section keeps short the number of files involved on a web page. It also assumes that only one person is working on the web page. If you have a team of programmers, designers, and implementers working on the same project, it is better to separate the web form from the code that manages it. To do this, you can create the class that manages a form in a separate file. This is referred to as code behind.

To have a class in its own file, create the class as a partial class and save it as a C# file. Here is an example of a class named House and created in a file named House.cs:

partial class House
{

}

In the body of the class, implement it as you want. The members of that class must be created either as public or protected.

After creating the class, to reference it in the page that contains the form, in the <%@ Page %> tag, add an attribute named CodeFile and assign the name of the partial file to it. This would be done as follows:

<%@ Page Language="C#" CodeFile="house.cs" %>

After specifying the file that holds the class, you must also specify the name of the class. To do this, add another attribute named Inherits and assign the name of the class to it. This would be done as follows:

<%@ Page Language="C#" CodeFile="house.cs" Inherits="House" %>

After specifying these attributes, you can use the class in the web page and you can reference the form in the events associated with the class.


Previous Copyright © 2008-2016, C# Key Next

aaa

A decimal number is made of one or two sections. It can contain only digits. If it contains a fraction, its two parts must be separated by a period (in US English). To declare a variable for a decimal number, use a data type named double. Here is an example:

double number = 62834.9023;

To convert the value of a variable to a double-precision number, use double.Parse(). In the parentheses, write the identifier of the control followed by .Text. Here is an example:

double.Parse(txtHourlySalary.Text)

You can store the expression in a variable. Here is an example:

double hourlySalary = double.Parse(txtHourlySalary.Text);

The variable can then be used in an operation. Here is an example:

<script language="C#" runat="server">
void btnCalculateClick(object sender, EventArgs e)
{
    double hourlySalary = double.Parse(txtHourlySalary.Text);
    double timeWorked  = double.Parse(txtTimeWorked.Text);

    double netPay = hourlySalary  * timeWorked;
}
</script>

To convert the value of a variable to a string, type the name of the variable followed by ToString(). Here are examples:

<%@ Page Language="C#" %>

<!DOCTYPE html>

<html>
<head runat="server">
<script language="C#" runat="server">
void btnCalculateClick(object sender, EventArgs e)
{
    double side = 0.00;
    double perimeter = 0.00;
    double area = 0.00;

    side = double.Parse(txtSide.Text);
    perimeter = side  * 4.00;
    area = side * side;

    txtPerimeter.Text = perimeter.ToString();
    txtArea.Text = area.ToString();
}
</script>
<title>Geometry: Square</title>
</head>
<body>
<div align="center">
<h2>Geometry: Square</h2>

<form id="frmSquare" method="get" runat="server">
  <table>
    <tr>
      <td><asp:Label id="lblSide" Text="Side:" runat="server"></asp:Label></td>
      <td>
	<asp:TextBox Runat="server" id="txtSide" Text="0.00"></asp:TextBox>
	<asp:Button Runat="server" id="btnCalculate"
                           Text="Calculate"
                           OnClick="btnCalculateClick"></asp:Button></td>
    </tr>
    <tr>
      <td><asp:Label id="lblPerimeter" Text="Perimeter:" runat="server"></asp:Label></td>
      <td><asp:TextBox Runat="server" id="txtPerimeter" Text="0.00"></asp:TextBox></td>
    </tr>
    <tr>
      <td><asp:Label id="lblArea" Text="Area:" runat="server"></asp:Label></td>
      <td><asp:TextBox Runat="server" id="txtArea" Text="0.00"></asp:TextBox></td>
    </tr>
  </table>
</form>
</div>
</body>
</html>

This would produce:

Byte