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.