Figure 1
Figure 1
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
using System;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

public class CalculatePage : Page
{
    protected TextBox Principal;
    protected TextBox Rate;
    protected TextBox Months;
    protected Label Output;

    public 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;
        }
    }
}
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
using System;
using System.Web;
using System.Web.UI;

namespace MSDNMagControls
{
    public class Headline : Control
    {
    protected String _Text;

        public String Text
        {
            get { return _Text; }
            set { _Text = value; }
        }

        protected override void Render (HtmlTextWriter writer)
        {
            writer.Write ("<h1>" + _Text + "</h1>");
        }
    }
}
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
<asp:Table CellPadding=8 ID="LogonTable" RunAt="server">
  <asp:TableRow>
    <asp:TableCell>
      User Name:
    </asp:TableCell>
    <asp:TableCell>
      <asp:TextBox ID="UserNameBox" RunAt="server" />
    </asp:TableCell>
    <asp:TableCell>
      <asp:RequiredFieldValidator
        ControlToValidate="UserNameBox"
        Display="dynamic"
        RunAt="server">
        &lt— Required field
      </asp:RequiredFieldValidator>
      <asp:RegularExpressionValidator
        ControlToValidate="UserNameBox"
        ValidationExpression="[a-zA-Z0-9]{5,}"
        Display="dynamic"
        RunAt="server">
        &lt— Invalid user name
      </asp:RegularExpressionValidator>
    </asp:TableCell>
  </asp:TableRow>
  <asp:TableRow>	
    <asp:TableCell>
      Password:
    </asp:TableCell>
    <asp:TableCell>
      <asp:TextBox ID="PasswordBox" TextMode="password"
        RunAt="server" />
    </asp:TableCell>
    <asp:TableCell>
      <asp:RequiredFieldValidator
        ControlToValidate="PasswordBox"
        Display="dynamic"
        RunAt="server">
        &lt— Required field
      </asp:RequiredFieldValidator>
      <asp:RegularExpressionValidator
        ControlToValidate="PasswordBox"
        ValidationExpression="[a-zA-Z0-9]{8,}"
        Display="dynamic"
        RunAt="server">
        &lt— Invalid password
      </asp:RegularExpressionValidator>
    </asp:TableCell>
  </asp:TableRow>
  <asp:TableRow>
    <asp:TableCell>
    </asp:TableCell>
    <asp:TableCell Align="right">
      <asp:Button Text="Log In" RunAt="server" />
    </asp:TableCell>
  </asp:TableRow>
</asp:Table>
<br>

<script language="C#" runat="server">
  public System.Drawing.Color BackColor
  {
    get { return LogonTable.BackColor; }
    set { LogonTable.BackColor = value; }
  }

  public string UserName
  {
    get { return UserNameBox.Text; }
    set { UserNameBox.Text = value; }
  }

  public string Password
  {
    get { return PasswordBox.Text; }
    set { PasswordBox.Text = value; }
  }
</script>

MSDN Magazine Blog

MSDN Magazine Right Rail

14 Top Features of Visual Basic 14: The Q&A
Leading off the feature in the January issue of MSDN Magazine is Lucian Wischik’s fantastic look at Visual Basic .NET 14. As Wischik writes, the newes... More...
Wednesday, Jan 7
Big Start to the New Year at MSDN Magazine
Folks, things are hopping over here at MSDN Magazine. We are kicking off the new year with a pair of issues: Our regularly scheduled January issue and... More...
Friday, Jan 2

More MSDN Magazine Blog entries >


Receive the MSDN Flash e-mail newsletter every other week, with news and information personalized to your interests and areas of focus.