ASP.NET Tutorials - Lesson 10: Data Reading and Formatting

	Data Reading and Formatting

Data Reading

Introduction

When interacting with a web page, if it contains a web form that requests some values, the user may be asked to enter them in the available controls. Consider the following web page:

In this case, a visitor is expected to provide the length and the height of a rectangle. The visitor would then submit those values to you so you can calculate the perimeter and the area.

Practical Learning: Introducing Data Reading

Start Microsoft Visual Studio 2005 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 geometry4
Click OK
In the Solution Explorer, right-click C:\...\geometry\ 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 Web Site -> 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 Web Site -> Add New Item...
In the Templates list, click Style Sheet
Set the name to geometry and press Enter

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 Web Site -> Add New Item...
Make sure Web Form is selected.
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" 
      method="get" 
      action="rectangle.aspx">
    <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">
                    <asp:Label ID="Label1" 
                               runat="server" 
                               Text="Length:">
                    </asp:Label></td>
                <td style="width: 121px">
                    <asp:TextBox ID="txtLength" 
                                 runat="server">
                    </asp:TextBox></td>
                <td style="width: 100px">
                </td>
            </tr>
            <tr>
                <td style="width: 100px">
                    <asp:Label ID="Label2" 
                               runat="server" 
                               Text="Height:">
                    </asp:Label></td>
                <td style="width: 121px">
                    <asp:TextBox ID="txtHeight"
                                 runat="server">
                    </asp:TextBox></td>
                <td style="width: 100px">
                    <asp:Button ID="btnCalculate"
                                runat="server" 
                                Text="Calculate" /></td>
            </tr>
            <tr>
                <td style="width: 100px">
                    <asp:Label ID="Label3"
                               runat="server"
                               Text="Perimeter:">
                    </asp:Label></td>
                <td style="width: 121px">
                    <asp:TextBox ID="txtPerimeter"
                                 runat="server">
                    </asp:TextBox></td>
                <td style="width: 100px">
                </td>
            </tr>
            <tr>
                <td style="width: 100px">
                    <asp:Label ID="Label4"
                               runat="server"
                               Text="Area:">
                    </asp:Label></td>
                <td style="width: 121px">
                    <asp:TextBox ID="txtArea"
                                 runat="server">
                    </asp:TextBox></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 © 2007 NetConsulting, Inc.</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="C#"
         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" method="post">
    <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" alt="Square" />
      </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 />

<table>
  <tr>
    <td style="width: 100px">
      <asp:Label ID="Label1"
                 runat="server" 
                 Text="Side:"></asp:Label></td>
    <td style="width: 121px">
      <asp:TextBox ID="txtSide"
                   runat="server"></asp:TextBox></td>
    <td style="width: 100px">
      <asp:Button ID="btnCalculate" 
                  runat="server" 
                  Text="Calculate" /></td>
  </tr>
  <tr>
    <td style="width: 100px">
      <asp:Label ID="Label2"
                 runat="server" 
                 Text="Perimeter"></asp:Label></td>
    <td style="width: 121px">
      <asp:TextBox ID="txtPerimeter"
                   runat="server">
                    </asp:TextBox></td>
    <td style="width: 100px"></td>
  </tr>
  <tr>
    <td style="width: 100px">
                    <asp:Label ID="Label3"
                               runat="server"
                               Text="Area:"></asp:Label></td>
    <td style="width: 121px">
                    <asp:TextBox ID="txtArea"
                                 runat="server">
                                 </asp:TextBox></td>
    <td style="width: 100px"></td>
  </tr>
</table>
</div>
</form>

<table border="0" width="660">
  <tr>
    <td colspan="2">
      <hr />
    </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 © 2007 NetConsulting, Inc.</p>
    </td>
  </tr>
  <tr>
    <td colspan="2">
      <hr />
    </td>
  </tr>
</table>

</body>
</html>

Save the files

Number Request

In C#, everything the user types is a string and the compiler would hardly analyze it without your explicit asking it to do so. Therefore, if you want to get a number from the user, first get the string that represents the value. Here is an example:

public class Rectangle
{
    private void Calculate()
    {
        string strLength;

        strLength = txtLength.Text;
    }
}

After getting the string, you must convert it to a number. To perform this conversion, each data type of the .NET Framework provides a mechanism called Parse. To use Parse, type the data type, followed by a period, followed by Parse, and followed by parentheses. In the parentheses of Parse, type the string that you requested from the user. Here is an example:

public class Rectangle
{
    private void Calculate()
    {
        string strLength;
        double Length;

        strLength = txtLength.Text;
        Length = double.Parse(strLength);
    }
}

An advanced but faster way to do this is to type the string value in the parentheses of Parse. This has the same effect. Here is an example:

public class Rectangle
{
    private void Calculate()
    {
        double Length;

        Length = double.Parse(txtLength.Text);
    }
}

Practical Learning: Reading Numeric Values

If necessary, click the square.aspx tab to access its file.
In the lower-left section of the window, click the Design button and, on the form, double-click the Calculate button

To retrieve various numbers from the user, change the file as follows:

using System;
using System.Data;
using System.Configuration;
using System.Collections;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;

public partial class square : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {

    }
    protected void btnCalculate_Click(object sender,
                                      EventArgs e)
    {
        double side = double.Parse(txtSide.Text);
        double Perimeter = side * 4;
        double Area = side * side;
    }
}

Click the rectangle.aspx tab to access its file.
In the lower-left section of the window, click the Design button and, on the form, double-click the Calculate button

To retrieve various numbers from the user, change the file as follows:

using System;
using System.Data;
using System.Configuration;
using System.Collections;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;

public partial class rectangle : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
    }

    protected void btnCalculate_Click(object sender, EventArgs e)
    {
        double Length;
        double Height;
        double Perimeter;
        double Area;

        Length = double.Parse(txtLength.Text);
        Height = double.Parse(txtHeight.Text);

        Perimeter = (Length + Height) * 2;
        Area = Length * Height;
    }
}

Sale the files

Requesting Dates and Times

As done with the regular numbers, you can request a date value from the user. This is also done by requesting a string from the user. After the user has entered the string you can then convert it to a DateTime value. Just like any value you request from the user, a date or time value that the user types must be valid, otherwise, the program would produce an error. Because dates and times follow some rules for their formats, you should strive to let the user know how you expect the value to be entered.

By default, if you request only a date from the user and the user enters a valid date, the compiler would add the midnight value to the date. If you request only the time from the user and the user enters a valid time, the compiler would add the current date to the value.

Formatting Data Display

Conversion To String

Once a value is ready, you can convert it to a string and display it on a web page. We mentioned earlier that everything the user types using the keyboard is primarily a string and it's your job to convert it to the appropriate type. In reverse, if you have a value that is not a string, you can convert it to a string. To support this, each .NET Framework data type provides a mechanism called ToString.

To convert a value of a primitive data type to a string, type the name of the variable, followed by a period, followed by ToString().

Practical Learning: Converting to String

To convert some values to string, change the event in the rectangle.aspx.cs file as follows:

using System;
using System.Data;
using System.Configuration;
using System.Collections;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;

public partial class rectangle : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
    }

    protected void btnCalculate_Click(object sender, EventArgs e)
    {
        double Length;
        double Height;
        double Perimeter;
        double Area;

        Length = double.Parse(txtLength.Text);
        Height = double.Parse(txtHeight.Text);

        Perimeter = (Length + Height) * 2;
        Area = Length * Height;

        txtPerimeter.Text = Perimeter.ToString();
        txtArea.Text = Area.ToString();
    }
}

Click the square.aspx.cs tab to access its file and change the event as follows:

using System;
using System.Data;
using System.Configuration;
using System.Collections;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;

public partial class square : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {

    }
    protected void btnCalculate_Click(object sender,
                                      EventArgs e)
    {
        double side = double.Parse(txtSide.Text);
        double Perimeter = side * 4;
        double Area = side * side;

        txtPerimeter.Text = Perimeter.ToString();
        txtArea.Text = Area.ToString();
    }
}

Click the index.aspx tab to access its file
To execute the application, on the main menu, click Debug -> Start Without Debugging
From the index.aspx file, click the Rectangle link and provide some numeric values for the length and the height, then click the Calculate. Here is an example:
Click the Home button
From the index.aspx file, click the Square link and provide some numeric values for the length and the height, then click the Calculate. Here is an example:
Return to your programming environment

Value Formatting

To properly display data in a friendly and most familiar way, you can format it. Formatting specifies what kind of data you are using and how you want it to be displayed to the user. As it happens, you can display a natural number in a common value or, depending on the circumstance, you may prefer to show it as a hexadecimal value. When it comes to double-precision numbers, you may want to display a distance with three values on the right side of the decimal separator and in some cases, you may want to display a salary with only 2 decimal places.

The System namespace provides a specific letter that you can use in the parentheses of ToString() for each category of data to display. To format a value, in the parentheses, between the double-quotes, type the appropriate letter from the following table:

Character		Used For
c	C	Currency values
d	D	Decimal numbers
e	E	Scientific numeric display such as 1.45e⁵
f	F	Fixed decimal numbers
g	G	General and most common type of numbers
n	N	Natural numbers
r	R	Roundtrip formatting
x	X	Hexadecimal formatting
p	P	Percentages

If you leave the parentheses of ToString() empty, the compiler would use a default formatting to display the value.

Data and Time Formatting

As mentioned earlier, when the user enters a date value for a DateTime variable, the compiler adds a time part to the value. Fortunately, if you want to consider only the date or only the time part, you can specify this to the compiler. To support this, the DateTime data type provides a series of letters you can use to format how its value should be displayed to the user. The character is entered in the placeholder of the DateTime variable after the 0 or the incremental numeric value.


Previous	Copyright © 2007 FunctionX, Inc.	Next