Figure 1

  • Article

Figure 1 MCalc.html

  <html>
  <head>
    <title>Mortgage Calculator</title>
  </head>
  <body>
    <h1>Mortgage Calculator</h1>
    <hr>
    <form>
      <table cellpadding=8 bgcolor="#ccccff">
        <tr>
          <td>Principal:</td>
          <td><input type="text" name="Principal"></td>
        </tr>
        <tr>    
          <td>Interest Rate:</td>
          <td><input type="text" name="Rate"></td>
        </tr>
        <tr>    
          <td>Months:</td>
          <td><input type="text" name="Months"></td>
        </tr>
      </table>
      <br>
      <td><input type="submit" value="Calculate"></td>
    </form>
    <hr>
  </body>
</html>

Figure 3 MCalc.asp

  <html>
  <head>
    <title>ASP Mortgage Calculator</title>
  </head>
  <body>
    <h1>ASP Mortgage Calculator</h1>
    <hr>
    <form method="post" action="MCalc.asp">
      <table cellpadding=8 bgcolor="#ccccff">
        <tr>
          <td>Principal:</td>
          <td><input type="text" name="Principal"></td>
        </tr>
        <tr>    
          <td>Interest Rate:</td>
          <td><input type="text" name="Rate"></td>
        </tr>
        <tr>    
          <td>Months:</td>
          <td><input type="text" name="Months"></td>
        </tr>
      </table>
      <br>
      <td><input type="submit" value="Calculate"></td>
    </form>
    <hr>

    <script language="VBScript" runat="server">
      Principal = Request ("Principal")
      Rate = Request ("Rate")
      Months = Request ("Months")

      If Len (Principal) > 0 AND Len (Rate) > 0 AND _
          Len (Months) > 0 Then
          Tmp = (1 + (CDbl (Rate) / 12)) ^ Months
          Payment = Principal * (((CDbl (Rate) / 12) * Tmp) / _
              (Tmp - 1))
          Response.Write ("<h3>Monthly Payment = " + _
              FormatCurrency (Payment) + "</h3>")
      End If
    </script>

  </body>
</html>

Figure 5 MCalc2.asp

  <html>
  <head>
    <title>ASP Mortgage Calculator v2</title>
  </head>
  <body>
    <h1>ASP Mortgage Calculator v2</h1>
    <hr>
    <form method="post" action="MCalc2.asp">
      <table cellpadding=8 bgcolor="#ccccff">
        <tr>
          <td>Principal:</td>
          <td><input type="text" name="Principal"
               value="<%= Server.HTMLEncode (Request("Principal")) 
               %>"></td>
        </tr>
        <tr>    
          <td>Interest Rate:</td>
          <td><input type="text" name="Rate"
               value="<%= Server.HTMLEncode (Request("Rate")) %>"></td>
        </tr>
        <tr>    
          <td>Months:</td>
          <td><input type="text" name="Months"
               value="<%= Server.HTMLEncode (Request("Months")) %>"></td>
        </tr>
      </table>
      <br>
      <td><input type="submit" value="Calculate"></td>
    </form>
    <hr>

    <script language="VBScript" runat="server">
      Principal = Request ("Principal")
      Rate = Request ("Rate")
      Months = Request ("Months")

      If Len (Principal) > 0 AND Len (Rate) > 0 AND _
          Len (Months) > 0 Then
          Tmp = (1 + (CDbl (Rate) / 12)) ^ Months
          Payment = Principal * (((CDbl (Rate) / 12) * Tmp) / _
              (Tmp - 1))
          Response.Write ("<h3>Monthly Payment = " + _
              FormatCurrency (Payment) + "</h3>")
      End If
    </script>

  </body>
</html>

Figure 7 MCalc.aspx

  <html>
  <head>
    <title>ASP.NET Mortgage Calculator</title>
  </head>
  <body>
    <h1>ASP.NET Mortgage Calculator</h1>
    <hr>
    <form runat="server">
      <table cellpadding=8 bgcolor="#ccccff">
        <tr>
          <td>Principal:</td>
          <td><asp:TextBox ID="Principal" RunAt="Server" /></td>
        </tr>
        <tr>    
          <td>Interest Rate:</td>
          <td><asp:TextBox ID="Rate" RunAt="Server" /></td>
        </tr>
        <tr>    
          <td>Months:</td>
          <td><asp:TextBox ID="Months" RunAt="Server" /></td>
        </tr>
      </table>
      <br>
      <asp:Button Text="Calculate" OnClick="OnCalculate"
        RunAt="Server" />
    </form>
    <hr>
    <h3><asp:Label ID="Output" RunAt="Server" /></h3>
  </body>

  <script language="C#" runat="server">
    void OnCalculate (Object sender, EventArgs e)
    {
        string strPrincipal = Principal.Text;
        string strRate = Rate.Text;
        string strMonths = Months.Text;

        if (strPrincipal.Length > 0 && strRate.Length > 0 &&
            strMonths.Length > 0) {
            double dbPrincipal = strPrincipal.ToDouble ();
            double dbRate = strRate.ToDouble ();
            double dbMonths = strMonths.ToDouble ();
            double dbTmp = System.Math.Pow (1 + (dbRate / 12),
                dbMonths);
            double dbPayment = dbPrincipal * (((dbRate / 12) *
                dbTmp) / (dbTmp - 1));
            string strResult = dbPayment.Format ("c", null);
            Output.Text = "Monthly Payment = " + strResult;
        }
    }
  </script>

</html>

Figure 9 ASP.NET Page-level Directives

Directive
 Description
@ Page
 Defines attributes used to compile ASP.NET pages
@ Control
 Defines attributes used to compile user controls
@ Import
 Imports namespaces from the .NET Framework class library
@ Register
 Defines aliases, tags, and other parameters for custom and user controls
@ Assembly
 Identifies additional assemblies to link to this page
@ OutputCache
 Defines HTML output caching parameters

Figure 10 MCalc2.aspx and MCalc2.cs

MCalc2.aspx 

<%@ Page Inherits="CalculatePage" Src="MCalc2.cs" %>


<html>
<head>
<title>ASP.NET Mortgage Calculator with Code-Behind</title>
</head>
<body>
<h1>ASP.NET Mortgage Calculator</h1>
<hr>
<form runat="server">
<table cellpadding=8 bgcolor="#ccccff">
<tr>
<td>Principal:</td>
<td><asp:TextBox ID="Principal" RunAt="Server" /></td>
</tr>
<tr>

<td>Interest Rate:</td>
<td><asp:TextBox ID="Rate" RunAt="Server" /></td>
</tr>
<tr>

<td>Months:</td>
<td><asp:TextBox ID="Months" RunAt="Server" /></td>
</tr>
</table>
<br>
<asp:Button Text="Calculate" OnClick="OnCalculate"
RunAt="Server" />
</form>
<hr>
<h3><asp:Label ID="Output" RunAt="Server" /></h3>
</body>
</html>
MCalc2.cs FakePre-0b7c3617101c4b36a7337c064c7c7529-526b950930534f1382ad1ceaa5fdeb11 Figure 12 HTML Controls and the Corresponding Tags

Control Type
 HTML Tag
HtmlAnchor
 <a>
HtmlButton
 <button>
HtmlSelect
 <select>
HtmlTextArea
 <textarea>
HtmlInputButton
 <input type="button">
HtmlInputCheckBox
 <input type="check">
HtmlInputRadioButton
 <input type="radio">
HtmlInputText
 <input type="text"> and <input type="password">
HtmlInputHidden
 <input type="hidden">
HtmlInputImage
 <input type="image">
HtmlInputFile
 <input type="file">
HtmlForm
 <form>
HtmlImage
 <img>
HtmlTable
 <table>
HtmlTableRow
 <tr>
HtmlTableCell
 <td>
HtmlGenericControl
 Any other unmapped tag, such as <span> and <div>

Figure 14 Properties Inherited from WebControl

Property
 Description
BackColor
 Gets or sets the control's background color
BorderColor
 Gets or sets the control's border color
BorderStyle
 Gets or sets the control's border style
BorderWidth
 Gets or sets the control's border width
Font
 Gets or sets the control font
ForeColor
 Gets or sets the control's foreground color
Height
 Gets or sets the height of the control
ID
 Gets or sets the control ID
TabIndex
 Gets or sets the control's tab index
ToolTip
 Gets or sets the tooltip to display for the control
Visible
 Gets or sets the control's visibility state
Width
 Gets or sets the width of the control

Figure 15 CheckBox Example

  <asp:CheckBox Text="Check me" ID="MyCheckBox"
  OnCheckedChange="OnToggle" AutoPostBack="true"
  RunAt="server" />
    •••
<script language="C#" runat="server">
  void OnToggle (Object sender, EventArgs e)
  {
      if (MyCheckBox.Checked)
          // Checked
      else
          // Not checked
  }
</script>

Figure 16 Enumerating a Multiple Selection

  int[] GetSelectedIndices (ListBox lb)
{
    int i=0;
    ArrayList a = new ArrayList ();
    foreach (ListItem item in lb.Items) {
        if (item.Selected)
            a.Add (i);
        i++;
    }
    int [] indices = new int[a.Count];
    a.CopyTo (indices, 0);
    return indices;
}

Figure 18 CalenderDemo.aspx

  <html>
  <head>
    <title>Calendar Demo</title>
  </head>
  <body>
    <form runat="server">
      <h1>Calendar Demo</h1>
      <br><br>
      <asp:Label Text="Selected Date:"
        ID="IntermediateResult" RunAt="server" />
      <asp:Calendar ID="MyCal"
        OnSelectionChanged="OnDayChanged"
        DayNameFormat="FirstLetter"
        ShowGridLines="true"
        BackColor="beige"
        ForeColor="darkblue"
        SelectedDayStyle-BackColor="red"
        SelectedDayStyle-ForeColor="white"
        SelectedDayStyle-Font-Bold="true"
        TitleStyle-BackColor="darkblue"
        TitleStyle-ForeColor="white"
        TitleStyle-Font-Bold="true"
        NextPrevStyle-BackColor="darkblue"
        NextPrevStyle-ForeColor="white"
        DayHeaderStyle-BackColor="red"
        DayHeaderStyle-ForeColor="white"
        DayHeaderStyle-Font-Bold="true"
        OtherMonthDayStyle-BackColor="white"
        OtherMonthDayStyle-ForeColor="lightblue"
        Width="256px"
        RunAt="Server">
      </asp:Calendar>
      <br>
      <asp:Button Text="Submit" OnClick="OnSubmit" RunAt="server" />
      <br><br><hr><br>
      <h3><asp:Label ID="Result" RunAt="server" /></h3>
    </form>
  </body>

  <script language="C#" runat="server">
    void OnDayChanged (Object sender, EventArgs e)
    {
        IntermediateResult.Text = "Selected Date: " +
            MyCal.SelectedDate.ToShortDateString ();
    }

    void OnSubmit (Object sender, EventArgs e)
    {
        Result.Text = "You selected " +
            MyCal.SelectedDate.ToLongDateString ();
    }
  </script>

</html>

Figure 20 DataGrid1.aspx

  <%@ Import Namespace="System.Data" %>
<%@ Import Namespace="System.Data.SQL" %>

<html>
  <head>
    <title>DataGrid Demo 1</title>
  </head>
  <body>
    <h1>DataGrid Demo 1</h1>
    <hr>
    <form runat="server">
      <asp:DataGrid ID="MyDataGrid" RunAt="server" />
    </form>
    <hr>
    <h3><asp:Label ID="Output" RunAt="server" /></h3>
  </body>

  <script language="C#" runat="server">
    void Page_Load (Object sender, EventArgs e)
    {
        if (!IsPostBack) {
            // Create and initialize a DataSet
            SQLConnection conn =
new SQLConnection ("server=localhost;uid=sa;pwd=;database=pubs");
            SQLDataSetCommand cmd =
new SQLDataSetCommand ("select * from titles", conn);
            DataSet ds = new DataSet ();
            cmd.FillDataSet (ds, "Titles");

            // Bind
            MyDataGrid.DataSource = ds.Tables["Titles"].DefaultView;
            MyDataGrid.DataBind ();
        }
    }
  </script>
</html>

Figure 22 DataGrid2.aspx

  <%@ Import Namespace="System.Data" %>
<%@ Import Namespace="System.Data.SQL" %>

<html>
  <head>
    <title>DataGrid Demo 2</title>
  </head>
  <body>
    <h1>DataGrid Demo 2</h1>
    <hr>
    <form runat="server">
      <asp:DataGrid ID="MyDataGrid"
        AutoGenerateColumns="false"
        BorderWidth="1"
        BorderColor="lightblue"
        CellPadding="2"
        CellSpacing="0"
        Font-Name="Verdana"
        Font-Size="8pt"
        GridLines="vertical"
        Width="90%"
        OnItemCommand="OnItemAction"
        RunAt="server">

        <!— Define columns —>
        <property name="Columns">
          <asp:BoundColumn HeaderText="Title" DataField="title" />
          <asp:BoundColumn
            HeaderText="Price"
            DataField="price"
            DataFormatString="{0:c}"
            ItemStyle-HorizontalAlign="right"
          />
          <asp:ButtonColumn
            HeaderText="Action"
            Text="Add to Cart"
            ItemStyle-HorizontalAlign="center"
            CommandName="AddToCart"
          />
        </property>

        <!— Define Header, Item, and AlternatingItem styles —>
        <property name="HeaderStyle">
          <asp:TableItemStyle BackColor="darkblue"
            ForeColor="white" Font-Bold="true" />
        </property>

        <property name="ItemStyle">
          <asp:TableItemStyle BackColor="white" ForeColor="darkblue" />
        </property>

        <property name="AlternatingItemStyle">
          <asp:TableItemStyle BackColor="beige" ForeColor="darkblue" />
        </property>

       </asp:DataGrid>
    </form>
    <hr>
    <h3><asp:Label ID="Output" RunAt="server" /></h3>
  </body>

  <script language="C#" runat="server">
    void Page_Load (Object sender, EventArgs e)
    {
        if (!IsPostBack) {
            // Create and initialize a DataSet
            SQLConnection conn =
new SQLConnection ("server=localhost;uid=sa;pwd=;database=pubs");
            SQLDataSetCommand cmd =
new SQLDataSetCommand ("select * from titles", conn);
            DataSet ds = new DataSet ();
            cmd.FillDataSet (ds, "Titles");

            // Bind
            MyDataGrid.DataSource = ds.Tables["Titles"].DefaultView;
            MyDataGrid.DataBind ();
        }
    }

    void OnItemAction (Object sender, DataGridCommandEventArgs e)
    {
        if (e.CommandName == "AddToCart") {
            // e.Item represents the row that was clicked
            Output.Text = "Added one copy of \"" +
              e.Item.Cells[0].Text + "\" to cart";
        }
    }
  </script>
</html>

Figure 24 MCalc3.aspx

  <html>
  <head>
    <title>ASP.NET Mortgage Calculator v2</title>
  </head>
  <body>
    <h1>ASP.NET Mortgage Calculator v2</h1>
    <hr>
    <form runat="Server">
      <table cellpadding=8 bgcolor="#ccccff">
        <tr>
          <td>Principal:</td>
          <td><asp:TextBox ID="Principal" RunAt="Server" /></td>
          <td>
            <asp:RequiredFieldValidator
              ControlToValidate="Principal"
              Display="dynamic"
              RunAt="server">
              * Error: Required field
            </asp:RequiredFieldValidator>
            <asp:RegularExpressionValidator
              ControlToValidate="Principal"
              ValidationExpression="[0-9]*"
              Display="dynamic"
              RunAt="server">
              * Error: Invalid entry
            </asp:RegularExpressionValidator>
          </td>
        </tr>
        <tr>    
          <td>Interest Rate:</td>
          <td><asp:TextBox ID="Rate" RunAt="Server" /></td>
          <td>
            <asp:RequiredFieldValidator
              ControlToValidate="Rate"
              Display="dynamic"
              RunAt="server">
              * Error: Required field
            </asp:RequiredFieldValidator>
            <asp:RegularExpressionValidator
              ControlToValidate="Rate"
              ValidationExpression="[0-9]*\.[0-9]*"
              Display="dynamic"
              RunAt="server">
              * Error: Invalid entry
            </asp:RegularExpressionValidator>
          </td>
        </tr>
        <tr>    
          <td>Months:</td>
          <td><asp:TextBox ID="Months" RunAt="Server" /></td>
          <td>
            <asp:RequiredFieldValidator
              ControlToValidate="Months"
              Display="dynamic"
              RunAt="server">
              * Error: Required field
            </asp:RequiredFieldValidator>
            <asp:RegularExpressionValidator
              ControlToValidate="Months"
              ValidationExpression="[0-9]*"
              Display="dynamic"
              RunAt="server">
              * Error: Invalid entry
            </asp:RegularExpressionValidator>
          </td>
        </tr>
      </table>
      <br>
      <asp:Button Text="Calculate" OnClick="OnCalculate"
        RunAt="Server" />
    </form>
    <hr>
    <h3><asp:Label ID="Output" RunAt="Server" /></h3>
  </body>

  <script language="C#" runat="Server">
    void OnCalculate (Object sender, EventArgs e)
    {
        double dbPrincipal = Principal.Text.ToDouble ();
        double dbRate = Rate.Text.ToDouble ();
        double dbMonths = Months.Text.ToDouble ();
        double dbTmp = System.Math.Pow (1 + (dbRate / 12),
            dbMonths);
        double dbPayment = dbPrincipal * (((dbRate / 12) *
            dbTmp) / (dbTmp - 1));
        string strResult = dbPayment.Format ("c", null);
        Output.Text = "Monthly Payment = " + strResult;
    }
  </script>

</html>

Figure 26 Headline.aspx and Headline.cs

Headline.aspx 

<%@ Register TagPrefix="demo" Namespace="MSDNMagControls" %>


<html>
<head>
<title>Custom Control Demo</title>
</head>
<body>
<h1>Custom Control Demo</h1>
<hr>
<form runat="server">
<demo:Headline Text="Hello, world" RunAt="server" />
</form>
<hr>
</body>
</html>
Headline.cs FakePre-7197d5737aab4551b37d365e8ecdac83-761e368cef5e47a3af60c504b1947400 Figure 28 Login.aspx and Login.ascx

Login.aspx 

<%@ Register TagPrefix="demo" TagName="LoginForm" src="Login.ascx" %>


<html>
<head>
<title>User Control Demo</title>
</head>
<body>
<h1>User Control Demo</h1>
<hr>
<form runat="server">
<demo:LoginForm ID="LoginForm" BackColor="#ccccff"
RunAt="server" />
</form>
<hr>
<h3><asp:Label ID="Output" RunAt="server" /></h3>
</body>


<script language="C#" runat="server">
void Page_Load (Object sender, EventArgs e)
{
if (IsPostBack) {
Output.Text = "Welcome, " + LoginForm.UserName;
}
}
</script>


</html>
Login.ascx FakePre-d84ef6d516e047158b3506ec58c43c11-245930d2e9a048b8bb99b3b4858eb877