Home

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:

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 LearningPractical Learning: Introducing Data Reading
  1. Start Microsoft Visual Studio or Microsoft Visual Web Developer
  2. To create a web site, on the main menu, click File -> New -> Web Site... (or File -> New Web Site)
  3. 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
  4. Change it to geometry4
  5. Click OK
  6. In the Solution Explorer, right-click C:\...\geometry4\ and click New Folder
  7. Type images as the name of the new folder and press Enter
  8. Copy each of the following pictures to your My Documents folder:
     
    Rectangle Square
  9. On the main menu, click Web Site -> Add Existing Item...
  10. Locate the folder where you saved the pictures, select each and press Enter
  11. In the Solution Explorer, right-click Default.aspx and click Rename
  12. Change the name to index.aspx and press Enter
  13. To create a CSS file, on the main menu, click Web Site -> Add New Item...
  14. In the Templates list, click Style Sheet
  15. Set the name to geometry and press Enter
  16. 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;
}
  17. To add a new web page, on the main menu, click Web Site -> Add New Item...
  18. Make sure Web Form is selected.
    Set the Name to rectangle and click Add
  19. 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/rectangle.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 © 2012 NetConsulting, Inc.</p>
    </td>
  </tr>
  <tr>
    <td colspan="2">
      <hr />
    </td>
  </tr>
</table>
    
    </div>
    </form>
</body>
</html>
  20. To add a new web page, on the main menu, click Web Site -> Add New Item...
  21. Make sure Web Form is selected.
    Set the Name to square and click Add
  22. 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/square.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 © 2012 NetConsulting, Inc.</p>
    </td>
  </tr>
  <tr>
    <td colspan="2">
      <hr />
    </td>
  </tr>
</table>

</body>
</html>
  23. Save the files

Number Request

Everything the user types is primarily considered a string. Therefore, if you want to get a number from the user, first get the string that represents the value. Here is an example:

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

<script runat="server">
private void Calculate()
{
    string strLength;

    strLength = txtLength.Text;
}
</script>

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

<form id="frmExercise" method="post" runat="server">
  <table>
    <tr>
      <td>Length:</td>
      <td>
	<asp:TextBox id="txtLength" AutoPostBack="True" runat="server">
  	</asp:TextBox>
      </td>
    <tr>
  </table>
</form>

</body>
</html>

After getting the string, you must convert it to a number. To perform this conversion, each data type of the .NET Framework is a class in its own right. Each of these classes is equipped with a method named Parse. To use the Parse() method, pass the string that you got from the user. Here is an example:

<script runat="server">
private void Calculate()
{
    string strLength;
    double length = 0.00;

    strLength = txtLength.Text;
    Length = double.Parse(strLength);
}
</script>

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:

<script runat="server">
private void Calculate()
{
    double length = 0.00;

    Length = double.Parse(txtLength.Text);
}
</script>

Practical LearningPractical Learning: Reading Numeric Values
  1. 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
  2. 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 = 0.00;
	double perimeter, area;

	side = double.Parse(txtSide.Text);
        perimeter = side * 4;
        area = side * side;
    }
}
  3. 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
  4. 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 = 0.00;
        double height = 0.00;
        double perimeter;
        double area;

        length = double.Parse(txtLength.Text);
        height = double.Parse(txtHeight.Text);

        perimeter = (length + height) * 2;
        area = length * height;
    }
}
  5. 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. Here is an example:

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

<script runat="server">
private void CheckTimeSheet()
{
    DateTime StartDate;

    StartDate = DateTime.Parse(txtStartDate.Text);
}
</script>

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

<form id="frmExercise" method="post" runat="server">
  <table>
    <tr>
      <td>Start Date:</td>
      <td>
	<asp:TextBox id="txtStartDate" AutoPostBack="True" runat="server">
  	</asp:TextBox>
      </td>
    <tr>
  </table>
</form>

</body>
</html>

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.

  
 
 
 

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 is equipped with a method named ToString.

To convert a value of a primitive data type to a string, pass it to the ToString() method.

Practical LearningPractical Learning: Converting to String
  1. 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 = 0.00;
        double height = 0.00;
        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();
    }
}
  2. 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();
    }
}
  3. Click the index.aspx tab to access its file
  4. Change its content as follows:
      
    <%@ Page Language="C#"
         AutoEventWireup="true"
         CodeFile="index.aspx.cs" 
         Inherits="_Default" %>

<!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</title>
</head>
<body>
   
<h3>Geometric Figures</h3>

<p><a href="rectangle.aspx">Rectangle</a></p>
<p><a href="square.aspx">Square</a></p>

<table border="0" width="660">
  <tr>
    <td>
      <hr />
    </td>
  </tr>
  <tr>
    <td align="center" style="height: 18px">
      &nbsp;<p class="centered">Copyright © 2009 NetConsulting, Inc.</p>
    </td>
  </tr>
  <tr>
    <td>
      <hr />
    </td>
  </tr>
</table>
    
</body>
</html>
  5. To execute the application, on the main menu, click Debug -> Start Without Debugging
  6. From the index.aspx file, click the Rectangle link and provide some numeric values for the length and the height
     
    Rectangle
  7. Then click Calculate. Here is an example:
     
    Rectangle Calculation
  8. Click the Home button
  9. From the index.aspx file, click the Square link and provide a numeric value for the side, then click Calculate
  10. Click Home
  11. Return to your programming environment

Value Formatting

Formatting specifies the kind of data you are using and how you want it to be displayed to the web page visitor.

The System namespace provides a specific letter that you can use in the parentheses of the ToString() method 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.45e5
  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.

 

Practical LearningPractical Learning: Formating a Value
  1. 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 = 0.00;
        double height = 0.00;
        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("F");
        txtArea.Text = area.ToString("F");
    }
}
  2. 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("F");
        txtArea.Text = area.ToString("F");
    }
}
  3. Save all files
  4. Return to the browser and refresh
  5. From the index.aspx file, click the Square link and provide a value for the side:
     
    Square
  6. Then click Calculate
     
    Square
  7. Return to your programming environment

Data and Time Formatting
 

If you want to consider only the date or only the time part of a DateTime value, 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.
 
 
   
 
Home Copyright © 2009-2016, FunctionX, Inc.