ASP.NET Web With C# - Lesson 17: Introduction to Web Forms

	Introduction to Web Forms

Web Forms

Introduction

When you open a browser and access a web site, you are presented with a web page. Most web pages are meant to only display text and graphics to a visitor. If you want to create an interactive web page that allows visitors to send values to you, you can add a form to it.

To support forms, HTML provides the <form> tag. To create a form, you start with the <form> start tag and close with the </form> end tag. Here is an example:

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

<html>
<head>
<title>Exercise</title>
</head>
<body>

<form></form>

</body>
</html>

Between the <form> and the </form> tags, you can create a form as necessary and as appealing as you want.

If you are working in either Microsoft Visual Studio or Microsoft Visual Developer, when you start an application, by default, you get a web page that is equipped with a form.

Practical Learning: Introducing Web Design

Start Microsoft Visual Web Developer 2008 Express Edition if necessary and, to create a web site, on the main menu, click File -> New Web Site...
Make sure ASP.NET Web Site is selected.
Make sure the Language combo box is set to Visual C#.
Click the combo box on the left side of Browse, press End, and press Delete a few times to delete the default name of the web site
Change it to geometry3a
Click OK
In the Solution Explorer, right-click C:\...\geometry3a\ and click New Folder
Type images as the name of the new folder and press Enter
Copy each of the following pictures to your My Documents folder:
On the main menu, click Website -> Add Existing Item...
Locate the folder where you saved the pictures, select each and press Enter
In the Solution Explorer, right-click Default.aspx and click Rename
Change the name to index.aspx and press Enter
To create a CSS file, on the main menu, click Website -> Add New Item...
In the Templates list, click Style Sheet
Set the name to geometry and click Add

Enter the following code in the file:

body {
	font-size: 11pt;
	color: black;
	font-family: Verdana, Tahoma, Arial, Sans-Serif;
}

hr { color: #0000ff }

.maintitle {
	color: blue;
	font-family: 'Times New Roman' , Garamond, Georgia, Serif;
	text-align: center;
	font-size: 24pt;
	font-weight: bold;
	text-decoration: none;
}

.parajust {
	font-family: Verdana, Tahoma, Arial, Sans-Serif;
	font-size: 10pt;
	font-weight: normal;
	text-align: justify;
}

.centeredtext {
	font-family: Verdana, Tahoma, Arial, Sans-Serif;
	font-size: 10pt;
	font-weight: normal;
	text-align: center;
}

.centered {
	text-align: center;
}

.formula {
	font-weight: bold;
	font-size: 10pt;
	color: blue;
	font-family: Verdana, Helvetica, Tahoma, Sans-Serif;
}

a:link {
  font-family: Verdana, Helvetica, Arial, Sans Serif;
  color: #0000FF;
  font-size: 10pt;
  font-weight: bold;
  text-decoration: none }

a:alink {
  font-family: Verdana, Helvetica, Arial, Sans Serif;
  color: #FF00FF;
  font-size: 10pt;
  font-weight: bold;
  text-decoration: none }

a:visited {
	font-family: Verdana, Helvetica, Arial, Sans Serif;
	color: Green;
	font-size: 10pt;
	font-weight: bold;
	text-decoration: none;
}

a:hover {
	font-family: Verdana, Helvetica, Arial, Sans Serif;
	color: #FF0000;
	font-size: 10pt;
	font-weight: Bold;
	text-decoration: none;
}

To add a new web page, on the main menu, click Website -> Add New Item...
Click Web Form
Set the Name to rectangle and click Add

Change the file as follows:

<%@ Page Language="C#" 
         AutoEventWireup="true" 
         CodeFile="rectangle.aspx.cs" 
         Inherits="rectangle" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">

<link rel="Stylesheet" type="text/css" href="geometry.css" />
<title>Geometry: Rectangle</title>

</head>
<body>

    <form id="frmRectangle" runat="server">
    <div>
<table border="0" style="width: 660px">
  <tr>
    <td style="width: 100%">
      <p class="maintitle">Geometry: Rectangle</p>
    </td>
  </tr>
</table>
    
 &nbsp;
 
<table border="0" width="660">
  <tr>
    <td>
      <p class="parajust">A rectangle is a geometric figure made 
      of 4 sides connected to produce four right angles. The 
      horizontal measurement of the rectangle, the base, is its 
      length. The vertical measurement of the figure is referred 
      to as its height. In geometry, a rectangle can be 
      represented as follows:</p>
        
      <p class="centered">
        <img src="images/rectangle1.gif" alt="Rectangle" />
      </p>        

      <p class="parajust">To process a rectangle, you usually 
      must provide, or must be given, the length and the height. 
      You can then calculate the perimeter and the area. To 
      assist you with these calculations, you can use some 
      pre-established formulas. Suppose the values are 
      represented as follows:</p>
    </td>
  </tr>
</table>
    
&nbsp;
        
<table style="width: 660px">
  <tr>
    <td style="width: 660px">
      <strong>L: length</strong>
    </td>
  </tr>
  <tr>
    <td style="width: 660px">
      <strong>H: height</strong>
    </td>
  </tr>
  <tr>
    <td style="width: 660px">
      <strong>P: perimeter</strong>
    </td>
  </tr>
  <tr>
    <td style="width: 660px">
      <strong>A: area</strong>
    </td>
  </tr>
</table>
            
&nbsp;

<table border="0" style="width: 660px">
  <tr>
    <td style="width: 100%">
      <p class="parajust">Based on these, the following 
      calculations can be made</p>
    </td>
  </tr>
  <tr>
    <td style="width: 100%">
      <p class="formula">P = (L + H) * 2</p>
    </td>
  </tr>
  <tr>
    <td style="width: 100%">
      <p class="formula">A = L * H</p>
    </td>
  </tr>
</table>

<hr />

<table>
  <tr>
    <td style="width: 100px"></td>
    <td style="width: 121px">&nbsp;</td>
    <td style="width: 100px"></td>
  </tr>
  <tr>
                <td style="width: 100px">
                </td>
                <td style="width: 121px">
                </td>
                <td style="width: 100px">
                </td>
            </tr>
            <tr>
                <td style="width: 100px">
                </td>
                <td style="width: 121px">
                </td>
                <td style="width: 100px">
                </td>
            </tr>
            <tr>
                <td style="width: 100px">
                </td>
                <td style="width: 121px">
                </td>
                <td style="width: 100px">
                </td>
            </tr>
        </table>

<table border="0" width="660">
  <tr>
    <td colspan="2">
      <hr />
      
        &nbsp;</td>
  </tr>
  <tr>
    <td align="center" style="height: 18px">
      <a href="index.aspx">Home</a>
    </td>
    <td align="center" style="height: 18px">
      <p class="centered">Copyright © 2009 C# Key</p>
    </td>
  </tr>
  <tr>
    <td colspan="2">
      <hr />
    </td>
  </tr>
</table>
    
    </div>
    </form>
</body>
</html>

To add a new web page, on the main menu, click Web Site -> Add New Item...
Make sure Web Form is selected.
Set the Name to square and click Add

Change the file as follows:

<%@ Page Language="VB"
         AutoEventWireup="true" 
         CodeFile="square.aspx.cs" 
         Inherits="square" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">

<link rel="Stylesheet" type="text/css" href="geometry.css" />

<title>Geometry: Square</title>
</head>
<body>

<form id="frmSquare" runat="server">
<div>
    
<table border="0" style="width: 660px">
  <tr>
    <td style="width: 100%">
      <p class="maintitle">Geometry: Square</p>
    </td>
  </tr>
</table>

&nbsp;

<table border="0" width="660">
  <tr>
    <td>
      <p class="parajust">A square is a type of 
      <a href="rectangle.aspx">rectangle</a> 
      for which all 4 sides are equal. This means that the horizontal 
      measurement, the base or length and the height are equal. The 
      length of each side is then called the side of the square. A 
      square can be represented as follows:</p>
                
      <p class="centered"><img src="images/square1.gif" /></p>
                
      <p class="parajust">To process a square, you must have the 
      measure of the side. This would allow you to calculate the 
      perimeter and the area. To do this, you can use simple 
      geometric formulas. Consider the following:</p>
      </td>
  </tr>
</table>

&nbsp;

<table>
  <tr>
    <td style="width: 660px">
      <strong>S: side</strong>
    </td>
  </tr>
  <tr>
    <td style="width: 660px">
      <strong>P: perimeter</strong>
    </td>
  </tr>
  <tr>
    <td style="width: 660px">
      <strong>A: area</strong>
    </td>
  </tr>
</table>

&nbsp;

<table border="0" style="width: 660px">
  <tr>
    <td style="width: 100%">
      <p class="parajust">To calculate the values of a square, you can 
      use the following formulas:</p></td>
  </tr>
  <tr>
    <td style="width: 100%">
      <p class="formula">P = S * 4</p>
    </td>
  </tr>
  <tr>
    <td style="width: 100%">
      <p class="formula">A = S * S</p>
    </td>
  </tr>
</table><hr color="#0000ff" /><table>
            <tr>
                <td style="width: 100px">
                    </td>
                <td style="width: 121px">
                    &nbsp;</td>
                <td style="width: 100px">
                    </td>
            </tr>
            <tr>
                <td style="width: 100px">
                    </td>
                <td style="width: 121px">
                    </td>
                <td style="width: 100px">
                </td>
            </tr>
            <tr>
                <td style="width: 100px">
                    </td>
                <td style="width: 121px">
                    </td>
                <td style="width: 100px">
                </td>
            </tr>
        </table>
</div>
</form>

<table border="0" width="660">
  <tr>
    <td colspan="2">
      <hr color="#0000ff" />
    </td>
  </tr>
  <tr>
    <td align="center">
      <a href="index.aspx">
        <strong><span style="font-size: 10pt">Home</span></strong>
      </a>
    </td>
    <td align="center">
      <p class="centered">Copyright © 2009 C# Key</p>
    </td>
  </tr>
  <tr>
    <td colspan="2">
      <hr color="#0000ff" />
    </td>
  </tr>
</table>

</body>
</html>

In the bottom section of the default page, click the Design button