Programming ASP.NET

Javascript validator Javascripts

Main Page

↑

5.1 The Basics

In this section, you will create a simple web page, in either C# or VB.NET, in which you will explore many of the properties, events, and methods common to all ASP controls. Example 5-1 shows csASPServerControlBasics1.aspx, the first iteration in C#, and Example 5-2 shows vbASPServerControlBasics1.aspx, the equivalent file in VB.NET. These two examples demonstrate a Label control, an event handler, and properties being set for a control.

Example 5-1. Basic web page in C#, csASPServerControlBasics1.aspx

<%@ Page Language="C#" %>
<script runat="server">
   void lblTime_Init(Object Source, EventArgs E)
   {
      lblTime.Font.Name = "Verdana";
      lblTime.Font.Size = 20;
      lblTime.Font.Underline = true;
      lblTime.Font.Bold = true;
      lblTime.Font.Italic = true;
      lblTime.Font.Overline = true;
      lblTime.Font.Strikeout = true;
      lblTime.Text = DateTime.Now.ToString(  )  
         + ". Font Name: "
         + lblTime.Font.Name;
   }
</script>

<html>
   <body>
   <form runat="server">

      <h1>ASP Controls</h1>
      <h2>Basics 1</h2>

      <asp:label
         id="lblTime"
         onInit="lblTime_Init"
         runat="server" />
   </form>
   </body>
</html>

Example 5-2. Basic web page in VB.NET, vbASPServerControlBasics1.aspx

<%@ Page Language="VB" %>
<script runat="server">
   Sub lblTime_Init(ByVal Sender as Object, _
                    ByVal e as EventArgs)
      lblTime.Font.Name = "Verdana"
      lblTime.Font.Size = new FontUnit(20)
      lblTime.Font.Underline = true
      lblTime.Font.Bold = true
      lblTime.Font.Italic = true
      lblTime.Font.Overline = true
      lblTime.Font.Strikeout = true
      lblTime.Text = DateTime.Now(  ) _
         & ". Font Name: " _
         & lblTime.Font.Name
   End Sub
</script>

<html>
   <body>
   <form runat="server">

      <h1>ASP Controls</h1>
      <h2>Basics 1</h2>

      <asp:label
         id="lblTime"
         onInit="lblTime_Init"
         runat="server" />
   </form>
   </body>
</html>

This is a very simple web page with static text and an ASP Label control. The Label control has been assigned an id of lblTime, which allows the control to be referred to elsewhere in the code.

Of more interest is the onInit attribute, which defines an event handler for the Init event. The Init event, a member of the Control class, is called when a control is initialized. It is the first step in each control's lifecycle. All WebControls, since they are derived from Control, have an Init event.

The Init event in Example 5-1 and Example 5-2 is handled by a method called lblTime_Init, defined in the code block at the top of the .aspx file. The lblTime_Init method sets several properties of the label's font (Name, Size, and so on) and sets the value of the Text property. Notice that the Text property value is a concatenation of the current date and time, a literal string, and the name of the font used. Because the DateTime is a DateTime object, it must be converted to a string in the C# code. In VB.NET, the conversion is implicit (and occurs regardless of the VB Option Strict setting). Also notice the syntax required for setting the font size in VB.NET versus the syntax in C#. (Fonts and their properties will be covered in detail shortly.)

The results, shown in Figure 5-1, are not very pretty but are instructive. The figure shows how several text attributes—bold, italic, overline, underline, and strikeout—can be applied to a label.

Figure 5-1. Output from Example 5-1 or Example 5-2

Fonts deserve special mention. Fonts contain subproperties , which are listed in Table 5-1. When used in HTML, subproperties are accessed declaratively in code in the form:

Font-Italic

When used in code blocks, subproperties are accessed programmatically in the form:

Font.Italic

Table 5-1. Subproperties of the Font object

SubProperty

Type

Values

Description

Bold

Boolean

true, false

Makes the text bold; the default is false.

Italic

Boolean

true, false

Italicizes the text; the default is false.

Name

String

Verdana, Courier, and so on.

Primary font name.

Automatically updates first item in Names property.

Font must be installed and available to the client browser.

Names

String

Times, and so on.

Ordered array of font names. Stores list of available font names.

Name property automatically updated with first item in array.

Strikeout

Boolean

true, false

Puts a line through the text; the default is false.

Underline

Boolean

true, false

Puts a line under the text; the default is false.

Overline

Boolean

true, false

Puts a line over the text; the default is false.

Will not render on downlevel browsers.

Size

FontUnit or String

Small, Smaller, Large, Larger, or an integer representing point size

Uses named sizes or integer point size.

Named sizes only work declaratively as control attributes.

If you use points rather than named sizes for the font size, then it is worth noting that C# and VB.NET have somewhat different syntax. VB.NET requires the explicit instantiation of a FontUnit object, as in:

lblTime.Font.Size = New FontUnit(20)

The C# version of FontUnit provides an implicit conversion operator that takes an int and creates a FontUnit. Thus you can write:

lblTime.Font.Size = 20;

Now create a new .aspx file. To this web page, add a TextBox, a Label, and a Button, along with an event handler for the Button.Click event. Example 5-3 and Example 5-4 show the code in C# and VB.NET, respectively. (Note that the C# code and the VB.NET code are very similar; there are differences in the Page directive and the syntax for defining methods.) When you enter something in the TextBox and click the Button, the contents of the TextBox are assigned to the Label.

Example 5-3. Another basic web page in C#, csASPServerControlBasics2.aspx

<%@ Page Language="C#" %>
<script runat="server">
   void btnBookName_Click(Object Source, EventArgs E)
   {
      lblBookName.Text = txtBookName.Text;
   }
</script>

<html>
   <body>
   <form runat="server">

      <h1>ASP Controls</h1>
      <h2>Basics 2</h2>
      
      Book Name:&nbsp;&nbsp;&nbsp;
      <asp:textBox 
         id="txtBookName" 
         width="50%"
         maxlength="50"
         text="Enter book name."
         enabled= "true"
         readonly="false"
         toolTip="Enter book name here."
         runat="server" />
   
      <asp:button
         id="btnBookName" 
         text="Book Name" 
         onClick="btnBookName_Click" 
         enabled= "true"
         visible="true"
         toolTip="Click here to post the book name."
         runat="server" />
      <br/>
      <br/>
      You entered:&nbsp;&nbsp;
      <asp:label 
         id="lblBookName" 
         Font-Name="Courier"
         Font-Bold= "true"
         Font-Size="Large"
         runat="server"/>
   </form>
   </body>
</html>

Example 5-4. Another basic web page in VB.NET, vbASPServerControlBasics2.aspx

<%@ Page Language="VB" %>
<script runat="server">
   sub btnBookName_Click(Sender as Object, _
                         e as EventArgs)
      lblBookName.Text = txtBookName.Text
   End Sub
</script>

<html>
   <body>
   <form runat="server">

      <h1>ASP Controls</h1>
      <h2>Basics 2</h2>
      
      Book Name:&nbsp;&nbsp;&nbsp;
      <asp:textBox 
         id="txtBookName" 
         width="50%"
         maxlength="50"
         text="Enter book name."
         enabled= "true"
         readonly="false"
         toolTip="Enter book name here."
         runat="server" />
      
      <asp:button
         id="btnBookName" 
         text="Book Name" 
         onClick="btnBookName_Click" 
         enabled= "true"
         visible="true"
         toolTip="Click here to post the book name."
         runat="server" />

      <br/>
      <br/>
      You entered:&nbsp;&nbsp;
      <asp:label 
         id="lblBookName" 
         Font-Name="Courier"
         Font-Bold= "true"
         Font-Size="Large"
         runat="server"/>
   </form>
   </body>
</html>

Three controls (a TextBox, a Button, and a Label control) and an additional event handler method have been added. Both the TextBox and the Button have several properties set in addition to their id and runat attributes.

Figure 5-2 shows the results of running the code contained in Example 5-3 or Example 5-4.

Figure 5-2. Output from Example 5-3 or Example 5-4