Build Your Own ASP.NET Website Using C# & VB.NET

The HtmlAnchor control creates a server-side HTML <a href="…"> tag.

<a href="somepage.aspx" runat="server">Click Here</a>

This line would create a new hyperlink with the text “Click Here.” Once the link is clicked, the user would be redirected to somepage.aspx as given by the href attribute.

The HtmlButton control creates a server-side HTML <button> tag.

<button id="myButton" OnServerClick="Click" runat="server">Click 
Here</button>

Notice that we’re using events here. On HTML controls, we need to use OnServerClick to specify the ASP.NET handler for clicks on the button, because onclick is reserved for handling clicks with JavaScript on the client side. In this example, the handler subroutine is called Click, and would be declared in a script block with the same form as the Click handlers we looked at for <asp:Button> tags previously:

<script runat="server" language="VB">
Sub Click(s As Object, e As EventArgs)
  Response.Write(myButton.ID)
End Sub
</script>

<script runat="server" language="C#">
void Click(Object s, EventArgs e) {
  Response.Write(myButton.ID);
}
</script>

In this case, when the user clicks the button, the ServerClick event is raised, the Click() subroutine is called to handle it, and the ID of the HtmlButton control is written onto the screen with Response.Write() (the Write() method of the Response object).

The HtmlForm control creates a server-side <form> tag. Most HTML controls, Web controls, etc., must be placed inside an HtmlForm control.

<form runat="server">
<!-- ASP.NET controls in here -->
</form>

The HtmlImage control creates a server-side <img> tag. The following code shows how we might place an HtmlImage control on a page, along with an HtmlButton:

<img id="myimage" src="arrow.gif" runat="server" />
<button id="myButton" runat="server" OnServerClick="Click">Click 
Here</button>

The user could change this image dynamically by pressing the button if we add code as follows:

<script runat="server" language="VB">
Sub Click(s As Object, e As EventArgs)
  myimage.Src = "welcome.gif"
End Sub
</script>

<script runat="server" language="C#">
void Click(Object s, EventArgs e) {
  myimage.Src = "welcome.gif";
}
</script>

What will happen if these controls are placed on a page along with the script block? First of all, the image arrow.gif will appear. When the HtmlButton control is clicked, it changes to welcome.gif. Behind the scenes, the ServerClick event is raised when the button is clicked, thus the Click() subroutine is called, and the Src property of the HtmlImage control is changed from arrow.gif to welcome.gif.

The HtmlGenericControl creates a server-side control for HTML tags that do not have an HTML control associated with them. Perfect examples of this are the <span> and <div> tags. The following example illustrates how you can modify text within a <span> tag to change the content from I like ASP.NET to Why would anyone need PHP? dynamically.

<span id="myGenericControl" runat="server">I like ASP.NET</span>
<br />
<button id="myButton" runat="server" OnServerClick="Click">Click 
Here</button>

We simply add the following code to respond to the ServerClick event and change the text:

<script runat="server" language="VB">
Sub Click(s As Object, e As EventArgs)
  myGenericControl.InnerText = "Why would anyone need PHP?"
End Sub
</script>

<script runat="server" language="C#">
void Click(Object s, EventArgs e) {
  myGenericControl.InnerText = "Why would anyone need PHP?";
}
</script>

The HtmlInputButton control creates a server-side <input type="submit">, <input type="reset">, or <input type="button"> HTML tag.

<input type="submit" value="Click Here" runat="server" />

<input type="reset" value="Click Here" runat="server" />

<input type="button" value="Click Here" runat="server" />

As with HtmlButton, you can assign a server-side event handler to controls of this type with the OnServerClick attribute.

The HtmlInputCheckBox control creates a server-side <input type="checkbox"> HTML tag.

<input type="checkbox" id="cb1" value="ASP.NET" runat="server"
  />ASP.NET<br />
<input type="checkbox" id="cb2" value="PHP" runat="server"
  />PHP<br />
<input type="checkbox" id="cb3" value="JSP" runat="server"
  />JSP<br />
<input type="checkbox" id="cb4" value="CGI" runat="server"
  />CGI<br />
<input type="checkbox" id="cb5" value="Coldfusion" runat="server"
  />Coldfusion<br>

The HtmlInputCheckBox control is the perfect choice when you want to allow your users to select multiple items from a list.

The HtmlInputFile control creates a server-side <input type="file"> tag in the HTML. This displays a text box and Browse button to allow users to upload files from ASP.NET pages. There is no Web control equivalent for this tag, so it’s typically required when working with file uploads—even with Web Forms (which we’ll discuss shortly).

<input type="file" id="fileUpload" runat="server" />

The HtmlInputHidden control creates a server-side <input type="hidden"> tag.

<input type="hidden" id="hiddenField" runat="server" />

Try viewing the source of any one of your ASP.NET pages from your browser, and you’re likely to find this tag being used to store view state information.

The HtmlInputImage control creates a server-side <input type="image"> tag.

<input type="image" id="imgMap" runat="server"
  src="ButtonImage.jpg" />

This tag provides an alternative to the HtmlInputButton control. They both function in the same way; the difference is that the HtmlInputImage control uses a custom image rather than the beveled gray Windows-style button. The mouse coordinates are also sent along with the form submission when the user clicks a control of this type.

The HtmlInputRadioButton control creates a server-side radio button. The following code, for instance, offers a choice of Male or Female:

Gender?<br />
<input type="radio" id="radio1" runat="server" />Male<br />
<input type="radio" id="radio2" runat="server" />Female

Similar to the HtmlInputCheckBox control, the HtmlInputRadioButton control creates a list of items for users to choose from. The difference, however, is that the user is only able to select one item at a time.

The HtmlInputText control creates a server-side <input type="text"> or <input type="password"> tag.

Please Login<br />
Username:<br />
<input type="text" id="username" runat="server" /><br />
Password:<br />
<input type="password" id="password" runat="server" />

The preceding code creates a typical login screen layout.

The HtmlSelect control creates a server-side version of the <select> tag for creating drop-down lists or list boxes. The following code creates a drop-down menu:

Select your favorite movie:<br />
<select id="selectMovie" runat="server">
<option>Star Wars</option>
<option>Spider Man</option>
<option>The Godfather</option>
<option>Lord of the Rings</option>
</select>

The following code creates a multiple-selection list box:

Which of these movies do you like?<br />
<select id="selectMovie" runat="server" multiple="true" size="4">
<option>Star Wars</option>
<option>Spider Man</option>
<option>The Godfather</option>
<option>Lord of the Rings</option>
</select>

You’ll notice the <option> tag within the main <select> tag; this is used to denote each item to appear in the list box or drop-down menu.

The HtmlTable, HtmlTableRow, and HtmlTableCell controls create server-side versions of the <table>, <tr>, <td>, and <th> tags. The following code creates a server-side table:

<table id="myTable" border="1" cellspacing="0" cellpadding="0" 
runat="server"> 
<tr runat="server" id="row1">
<td runat="server" id="cell1">Table Data 1</td>
<td runat="server" id="cell2">Table Data 2</td>
</tr>
<tr runat="server" id="row2">
<td runat="server" id="cell3">Table Data 3</td>
<td runat="server" id="cell4">Table Data 4</td>
</tr>
</table>
<button id="myButton" OnServerClick="Click" runat="server">Click 
Here</button>

You could add the following code to respond to the Click event raised by the HtmlButton control and change the content of the first cell to read "Hello World."

<script runat="server" language="VB">
Sub Click(s As Object, e As EventArgs)
  cell1.InnerText = "Hello World"
End Sub
</script>

<script runat="server" language="C#">
void Click(Object s, EventArgs e) {
  cell1.InnerText = "Hello World";
}
</script>

The HtmlTextArea control creates a server-side version of the <textarea> tag.

<textarea cols="60" rows="10" runat="server"></textarea>

We’ve glanced only briefly over the HTML controls, as they should all be fairly familiar from your experience with HTML. But if you’d like more information on the HTML controls including the properties, methods, and events for each, see Appendix A, HTML Control Reference.

The basic Web controls perform the on-screen layout of a Web page, and mirror in many ways the HTML controls that are based on regular HTML. However, they offer some new refinements and enhancements, and should be used in place of HTML whenever possible. In this section, we’ll look at the controls in this group, namely:

<asp:Label id="lblMessage" Text="" runat="server" />

Public Sub Page_Load()
  lblMessage.Text = "Hello World"
End Sub

public void Page_Load() {
  lblMessage.Text = "Hello World";
}

<p>Username:
<asp:TextBox id="txtUser" TextMode="SingleLine" Columns="30" 
    runat="server" /></p>
<p>Password:
<asp:TextBox id="txtPassword" TextMode="Password" Columns="30" 
    runat="server" /></p>
<p>Comments:
<asp:TextBox id="txtComments" TextMode="MultiLine" Columns="30" 
    Rows="10" runat="server" /></p>

<asp:Button id="btnSubmit" Text="Submit" runat="server" 
    OnClick="WriteText" />
<asp:Label id="lblMessage" runat="server" />

Public Sub WriteText(s As Object, e As EventArgs)
  lblMessage.Text = "Hello World"
End Sub

public void WriteText(Object s, EventArgs e) {
  lblMessage.Text = "Hello World";
}

<asp:Image id="myImage" ImageUrl="mygif.gif" runat="server"
    AlternateText="description" />

<asp:ImageButton id="myImgButton" ImageUrl="myButton.gif"
    runat="server" />

<asp:LinkButton id="myLinkButon" Text="Click Here" runat="server"
    />

<asp:HyperLink id="myLink" NavigateUrl="http://www.example.com/" 
    ImageUrl="myButton.gif" runat="server">My Link</asp:HyperLink>

<asp:RadioButton id="radSanDiego" GroupName="City"
    Text="San Diego" runat="server" />
<asp:RadioButton id="radBoston" GroupName="City" Text="Boston" 
    runat="server" />
<asp:RadioButton id="radPhoenix" GroupName="City" Text="Phoenix" 
    runat="server" />
<asp:RadioButton id="radSeattle" GroupName="City" Text="Seattle" 
    runat="Server" />

<asp:RadioButtonList id="radlFavColor" runat="server">
  <asp:ListItem Text="Red" Value="red" />
  <asp:ListItem Text="Blue" Value="blue" />
  <asp:ListItem Text="Green" Value="green" />
</asp:RadioButtonList>

<asp:CheckBox id="chkQuestion" Text="I like .NET!" runat="server"
  />

<asp:CheckBoxList id="chklFavDrinks" runat="server">
  <asp:ListItem Text="Pizza" Value="pizza" />
  <asp:ListItem Text="Tacos" Value="tacos" />
  <asp:ListItem Text="Pasta" Value="pasta" />
</asp:CheckBoxList>

<asp:DropDownList id="ddlFavColor" runat="server">
  <asp:ListItem Text="Red" value="red" />
  <asp:ListItem Text="Blue" value="blue" />
  <asp:ListItem Text="Green" value="green" />
</asp:DropDownList>

<asp:ListBox id="listTechnologies" runat="server"
    SelectionMode="Multiple">
  <asp:ListItem Text="ASP.NET" Value="aspnet" />
  <asp:ListItem Text="JSP" Value="jsp" />
  <asp:ListItem Text="PHP" Value="php" />
  <asp:ListItem Text="CGI" Value="cgi" />
  <asp:ListItem Text="Coldfusion" Value="cf" />
</asp:ListBox>

<asp:Panel id="pnlMyPanel" runat="server">
  <p>Username:
    <asp:TextBox id="txtUsername" Columns="30" runat="server" />
  </p>
  <p>Password:
    <asp:TextBox id="txtPassword" TextMode="Password" 
        Columns="30" runat="server" /></p>
</asp:Panel>
<asp:Button id="btnHide" Text="Hide Panel" OnClick="HidePanel" 
    runat="server" />

Public Sub HidePanel(s As Object, e As EventArgs)
  pnlMyPanel.Visible = False
End Sub

public void HidePanel(Object s, EventArgs e) {
  pnlMyPanel.Visible = false;
}

<asp:PlaceHolder id="phMyPlaceHolder" runat="server" />

Public Sub Page_Load()
  Dim btnButton As HtmlButton = New HtmlButton()
  btnButton.InnerText = "My New Button"
  phMyPlaceHolder.Controls.Add(btnButton)
End Sub

public void Page_Load() {
  HtmlButton btnButton = new HtmlButton();
  btnButton.InnerText = "My New Button";
  phMyPlaceHolder.Controls.Add(btnButton);
}

The HyperLink control creates a simple HTML hyperlink on a page. Once it’s clicked, the user is redirected to the page specified by the NavigateUrl property. For instance:

<asp:HyperLink id="hlAddToCart" NavigateUrl="viewcart.aspx" 
    runat="server" Text="View Cart" />

Here, the NavigateUrl property specifies that this link leads to the page called viewcart.aspx. Figure 4.3 shows how the HyperLink control is rendered in the browser.

Figure 4.3. The HyperLink control renders similar to the anchor tag in the browser.

However, once we’ve arrived at the new page, it has no way of accessing the information from the first page. If we need to provide the user some continuity of information, we need something else.

The previous example rendered a simple control similar to the HTML anchor tag. Once the link is followed, however, we have no record of the previous page or any data it contained (the Web is a stateless technology).

If we wish to pass information from one page to the next, we can use one of the three methods listed below to create the link between the pages:

The easiest and quickest way to redirect your users from the viewcatalog.aspx page to the viewcart.aspx page would be using Reponse.Redirect():

Sub linkClk(s As Object, e As EventArgs)
  Response.Redirect("viewcart.aspx")
End Sub

void linkClk(Object s, EventArgs e) {
  Response.Redirect("viewcart.aspx");
}

You could then use the LinkButton control to call this subroutine as follows:

<asp:LinkButton id="lbAddToCart" Text="Add To Cart" 
    OnClick="linkClk" runat="server"/>

This time, when you click the LinkButton control, the Click event is raised, the subroutine is called, and Response.Redirect() is called with the name of the page we want to link to as a parameter. In this way, we’re redirecting to the new page directly from the code, rather than by using a particular tag. This enables us to pass information to the new page in the query string.

The query string is a list of variables and their respective values that we can append to a page’s URL, allowing us to retrieve those variables and values from that page’s code.

As an illustration, imagine you have a drop-down list that contains the following product information:

<p><asp:DropDownList id="ddlProducts" runat="server">
  <asp:ListItem Text="Pants" />
  <asp:ListItem Text="Shirt" />
  <asp:ListItem Text="Hat" />
  <asp:ListItem Text="Socks" />
</asp:DropDownList></p>
<p><asp:LinkButton id="lbAddToCart" Text="Add To Cart" 
    OnClick="linkClk" runat="server" /></p>

The code you use to handle link clicks will need to find the item selected in the drop-down list and append it to the query string of the URL to which the user is to be redirected, as follows:

Sub linkClk(s As Object, e As EventArgs)
  Dim strQueryStr As String = "?Product=" & _
    Server.UrlEncode(ddlProducts.SelectedItem.Text)
  Response.Redirect("viewcart.aspx" & strQueryStr)
End Sub

void linkClk(Object s, EventArgs e) {
  string strQueryStr = "?Product=" +
    Server.UrlEncode(ddlProducts.SelectedItem.Text);
  Response.Redirect("viewcart.aspx" + strQueryStr);
}

Note the use of the Server.UrlEncode() method, which converts characters not allowed in query string values (e.g. &) to URL-safe character codes (e.g. %26) that the browser will understand. You should always use this method when adding arbitrary values to query strings.

When a user selects an item from the drop-down list and clicks the LinkButton control, the viewcart.aspx page is opened with the selected product appended as a parameter of the query string. This is illustrated in Figure 4.4.

Figure 4.4. Append the selected item to the query string.

Now that you’ve passed the product to the viewcart.aspx page, you have to grab it from the query string in the new page. We get hold of variables from the query string by accessing the Request.QueryString collection, like so:

Sub Page_Load()
  lblResult.Text = Request.QueryString("Product")
End Sub

void Page_Load() {
  lblResult.Text = Request.QueryString["Product"];
}

Here, we simply display the value of the Product query string parameter, as we see in Figure 4.5.

Figure 4.5. Set the text property of the label control within a Page_Load event handler to accept the new parameter value.

Now, when you select a product and add it to the cart, the result is displayed in the redirected page on a label with an id of lblResult. Now sure, a real product catalog and shopping cart has a lot more to it, but in this section we’ve uncovered an important building block.

There are three different ways of associating styles to elements of a particular Web page. I’ve already mentioned the first, and usually the best, which is an external file:

CSS style rules create styles that are applied to elements of a page in one of two ways^[4]:

Whether you’re building external, document-wide, or inline style sheets, properties for classes and tag redefinitions use the same syntax. To create a class within an external style sheet file, you’d use the following syntax:

.myClass {
  font-family: arial;
  font-size: 10pt;
  color: red;
}

This would then be saved in a file with a .css extension, such as styles.css, and linked into the Web Form with the following line in the <head> tag of your document:

<link href="styles.css" rel="stylesheet" />

Similarly, to define a class within a document-wide style sheet, you would use the following syntax:

<head>
<style type="text/css">
  .myClass {
    font-family: arial;
    font-size: 10pt;
    color: red;
  }
</style>
</head>

When you’re using inline styles, use the following syntax:

<span style="font-family: arial; font-size: 10pt; color: red;">My 
Stylized Text</span>

For inline styles, simply add all properties to the tag in question with the style attribute. Above, we’ve used the <span> tag, but the principle remains the same for the other tags.

Now that you have a basic understanding of some of the fundamental concepts behind CSS, let’s look at the different types of styles that can be used within our ASP.NET applications.

There are many different types of properties that you can modify using style sheets. Below is a list of the common types:

These categories provide a list of what can generally be modified using CSS. As we progress through the book, the many types of properties will become evident.

Once you have defined a class in a style sheet (be it external or internal), you’ll want to begin associating that class with elements in your Web Forms. You can associate classes with ASP.NET Web controls using the CssClass property. The following example uses classes defined within a document-wide style sheet:

<html>
<head>
<style type="text/css">
  .dropdownmenu {
    font-family: Arial;
    background-color: #0099FF;
  }
  .textbox {
    font-family: Arial;
    background-color: #0099FF;
    border: 1px solid;
  }
  .button {
    font-family: Arial;
    background-color: #0099FF;
    border: 1px solid;
  }
  .text {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 10px;
  }
</style>
</head>
<body>
<form runat="server">
<p class="text">Please select a product:</p>
<p><asp:DropDownList id="ddlProducts" CssClass="dropdownmenu"
    runat="server">
  <asp:ListItem Text="Shirt" selected="true" />
  <asp:ListItem Text="Hat" />
  <asp:Listitem Text="Pants" />
  <asp:ListItem Text="Socks" />
</asp:DropDownList></p>
<p><asp:TextBox id="txtQuantity" CssClass="textbox" runat="server"
    /></p>
<p><asp:Button id="btnAddToCart" CssClass="button" runat="server"
    Text="Add To Cart" /></p>
</form>
</body>
</html>

While most books give you a series of simple, isolated examples to illustrate particular techniques, this book is a little different. Many of the examples provided in these pages will involve work on a single project—an intranet application for the fictional Dorknozzle company. We’ll build on this application as we go along, illustrating the many different concepts that are important to developers of any type of Web application. The intranet application we’ll develop will offer the following functionality:

Before we can begin creating all these smaller applications, we must build the framework that will act as a template across the site. In this section, we’ll accomplish the following introductory tasks for the development of our intranet application:

Once it’s complete, our fictitious intranet application will have modules for an IT helpdesk, employee store, newsletter archive, employee directory, address book, and admin console. Obviously, we’re going to need some kind of navigation menu to make those sub-applications simple to find. Throughout this chapter, we’ve studied numerous ways of navigating from page to page, and we could use any of these methods here. We’ve discussed controls such as the Button control, HyperLink control, and LinkButton control, and we’ve explored various objects and methods for navigating from code. Although all these would work to a certain degree, in this case, only one makes the most sense in terms of performance and practicality.

Before we begin, you’ll want to obtain the necessary files from the code archive for this book. The files for this chapter include a starting template that you can use for this project, as well as the complete version in case you run into problems.

Because we’re not submitting any data for processing, we can eliminate the Button and LinkButton controls; each involves extra work from the server in order to process the Click event it raises. As we only want to link from one page to the next, and don’t care about performing any tasks programmatically, we can use the simpler HyperLink control instead. Remember, we add a HyperLink control to the page by inserting the following code inside the form:

<asp:HyperLink NavigateUrl="index.aspx" runat="server" 
    Text="Home" />

This would add a link that showed the text “Home.”

Open up your text editor and create a new file with the standard HTML tags required by ASP.NET pages, including an empty form with a runat="server" attribute. Inside this form, add the HyperLink controls for helpdesk, employee store, newsletter archive, employee directory, address book, and admin tools, like so:

<!-- HyperLink controls for navigation -->
<img src="Images/book_closed.gif" width="16" height="16" alt="+"
    />
<asp:HyperLink NavigateUrl="index.aspx" runat="server" Text="Home"
    />
<br /> 
<img src="Images/book_closed.gif" width="16" height="16" alt="+"
    />
<asp:HyperLink NavigateUrl="helpdesk.aspx" runat="server"
    Text="HelpDesk" />
<br />
<img src="Images/book_closed.gif" width="16" height="16" alt="+"
    />
<asp:HyperLink NavigateUrl="employeestore.aspx" runat="server"
    Text="Employee Store" />
<br />
<img src="Images/book_closed.gif" width="16" height="16" alt="+"
    />
<asp:HyperLink NavigateUrl="newsletterarchive.aspx" runat="server"
    Text="Newsletter Archive" />
<br />
<img src="Images/book_closed.gif" width="16" height="16" alt="+"
    />
<asp:HyperLink NavigateUrl="employeedirectory.aspx" runat="server"
    Text="Employee Directory" />
<br />
<img src="Images/book_closed.gif" width="16" height="16" alt="+"
    />
<asp:HyperLink NavigateUrl="addressbook.aspx" runat="server"
    Text="Address Book" />
<br /><br />
<img src="Images/book_closed.gif" width="16" height="16" alt="+"
    />
<asp:HyperLink NavigateUrl="admintools.aspx" runat="server"
    Text="Admin Tools" />
<!-- End HyperLink controls -->

Once the links have been added to the page and you’ve placed the book_closed.gif file in a subdirectory called Images, you could save your work (as index.aspx) and view the results in your browser. At this stage, however, it would look fairly bland. What we need is a few pretty graphics to provide visual appeal! Although modern Web design practices would have us use CSS for our page layout and visual design, we’ll resort to HTML tables here in order to stay focused on the server-side aspects of our application.

Open index.aspx and create the following two regular (i.e. not server-side) HTML tables at the very start of the page body:

<body>
<form runat="server">
<table width="100%" border="0" cellspacing="0" cellpadding="0"
    background="Images/header_bg.gif">
  <tr>
    <td><img src="Images/header_top.gif" width="450" height="142"
        alt="the official dorknozzle company intranet"
        /></td>
  </tr>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td width="157"><img src="Images/header_bottom.gif"
        width="157" height="37" alt="" /></td>
    <td></td>
  </tr>
</table>

We’ll want to place our links in a table too. While we’re there, we’ll add some news items to the main index page. Open up index.aspx once more, and place the following HTML table around the links we’ve already added:

<table width="100%" border="0" cellspacing="0" cellpadding="10">
  <tr> 
    <td valign="top" width="160">
      <!-- HyperLink controls for navigation -->
      …
      <!-- End HyperLink controls -->
    </td>
    <td valign="top">
      <h1>Company News:</h1>
      <p>We'll add some news later.</p>
      <h1>Company Events:</h1>
      <p>We'll add company events later.</p>
    </td>
  </tr>
</table>
</form>
</body>
</html>

The result will look similar to Figure 4.7.

Figure 4.7. Add HyperLink controls for the Intranet navigation menu.

Isn’t it amazing the difference some well-chosen graphics can make? Don’t forget to place the pictures from the download in the Images subdirectory. You can, of course, find the completed source in the code archive, although I do recommend you type the code in yourself as we progress, for practice value.

If you don’t mind the ordinary look of standard Web pages, then you can skip this section. If, however, you don’t like standard blue hyperlinks, black, Times New Roman text, and beveled form controls, this section is for you.

As you’ve already read, style sheets provide developers with flexibility and control over the "look" of Web applications. In this section, we’ll explore the addition of a customizable style sheet to our fictitious intranet application. We will define styles for the following elements within our application:

You can start by creating the CSS file that the styles will reside in. I’ve opened Notepad and immediately saved the file as styles.css within the root directory of the application, as shown in Figure 4.8.

Figure 4.8. Open Notepad and save the file as styles.css within the root directory of the application folder.

Now, let’s apply some style properties to the following tags:

You’ll notice the a:link and a:hover items in this list, which are not strictly-speaking tags. In the world of CSS, these are known as a pseudo-elements. a:link narrows the selection to <a> tags that are links (as opposed to <a name="…"> tags, which are targets). Assigning properties to a:hover will apply those properties only to links over which the user is hovering the mouse.

We’ll also define a few classes for certain Web controls that don’t map directly to a particular HTML tag:

Below is the code for the CSS rules that will apply the desired basic formatting to our site. Type the following just as it appears into your styles.css file:

body {
  background: #FFFFFF;
  color: #000000;
  margin: 0;
  padding: 0;
}
p {
  font-family: Arial;
  font-size: 12px;
}
h1 {
  font-family: Arial;
  font-size: 14px;
  color: #000000;
}
a:link {
  font-family: Arial;
  font-size: 12px;
  color: #000000;
} 
a:hover { 
  font-family: Arial;
  font-size: 12px;
  color: #FF0000;
}
.textbox {
  font-family: Arial;
  font-size: 12px;
  border: 1px solid black;
}
.button {
  font-family: Arial;
  border: 1px solid black;
  background-color: #CCCCCC;
}
.dropdownmenu {
  font-family: Arial;
  font-size: 12px;
  background-color: #CCCCCC;
}

Now that the style sheet file has been created, we can link the style sheet file to index.aspx by inserting the following line into the <head> tag of the document:

<link href="styles.css" rel="stylesheet" />

We’ll need to assign the CSS classes we have defined (textbox, button, and dropdownmenu) to relevant controls as we create them, but for now our simple HTML template will automatically benefit from the tags we have redefined.

Remember, we’re not limited to these styles. If, throughout the development of our application, we decide to add more styles, we’ll simply need to open the styles.css file and add them as necessary.

You can save your work at this point, and view it in the browser.

The last part of the project is to add the employee Helpdesk request Web Form. This will be a Web page that allows our fictitious employees to report hardware, software, and workstation problems. The Web Form will be arranged as a series of simple steps that users can follow to report their problems:

Rather than creating a new, blank page and retyping all the code, you can simply copy index.aspx and rename it helpdesk.aspx (or save a copy with the new name if it’s already open in your editor). The only portion of the code that will change to accommodate the HelpDesk interface is the last table in the body—the one that contains the news items on index.aspx. Everything else stays the same, because we want to have a single look for all our pages^[5]. Change the final column in the table to create two drop-down lists, a multiline text box, and a button, as shown:

      <!-- End HyperLink controls -->
    </td>
    <td valign="top">
      <h1>Employee HelpDesk Request</h1>
      <p>Problem Category:<br />
        <asp:DropDownList id="ddlCategory" CssClass="dropdownmenu"
            runat="server" /></p>
      <p>Problem Subject:<br />
        <asp:DropDownList id="ddlSubject" CssClass="dropdownmenu"
            runat="server" /></p>
      <p>Problem Description:<br />
        <asp:TextBox id="txtDescription" CssClass="textbox"
            Columns="40" Rows="4" TextMode="MultiLine"
            runat="server" /></p>
      <p><asp:Button id="btnSubmit" CssClass="button"
            Text="Submit Request" runat="server" /></p>
    </td>

Notice how we’ve applied our CSS classes to the appropriate controls here.

Don’t worry that the DropDownList controls don’t have items associated with them—the categories and subjects will be predefined within database tables. Later, we’ll bind these database tables to their respective controls.

When you’re finished, save your work and view it in a browser.