Build Your Own ASP.NET Website Using C# And VB.NET, Chapter 4 - Web Forms and Web Controls

A Navigation Menu and Web Form for the Intranet Application

Now that you have a solid foundation in HTML controls, Web Forms, Web controls, Page Interaction, Navigation, and Style Sheets, you're ready to begin working on the project that we'll build on throughout the remainder of this book. With the Dorknozzle Intranet Application, I hope to introduce you to real world development in simple stages, as we work through the following chapters together.

Introducing the Dorknozzle Intranet Application

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:

Welcome

Displays company event information to the user of the Web application.

Helpdesk

Allows any Dorknozzle employees to submit a problem as a helpdesk ticket to an IT administrator regarding issues they experience with software, hardware, or their computer.

Employee Store

Employee stores boost company morale. By building an online store, we'll allow Dorknozzle employees to buy life-enriching items such as mugs, shirts, and mouse pads. All will proudly bear the Dorknozzle logo, of course!

Newsletter Archive

Another way to improve morale is to keep employees informed of company events and news. Each month, the Dorknozzle HR Manager will send out a company newsletter to all employees.

Employee Directory

Employees will likely want to call each other to discuss important, company-related affairs… such as last night's television viewing! The employee directory should let employees find other staff members' details.

Address Book

While the employee directory houses handy information for use by staff, the purpose of the address book is to provide more detailed information about all of the employees within the company

Admin Tools

Administrators will need a way to modify closed helpdesk tickets, delete the records of fired employees, create newly hired employees' profiles, modify information on current employees, and more. The admin tools section will provide the interface for this.

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:

• Build the navigation menu.
• Create the style sheet.
• Design the template and Web Form for the helpdesk application.

Building the Navigation Menu

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:

Example 4.6. index.aspx (excerpt)

<!-- 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:

Example 4.7. index.aspx (excerpt)

<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:

Example 4.8. index.aspx (excerpt)

<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.

Create the Corporate Style Sheet

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:

• Hyperlinks
• Text (including body text and headings)
• Boxed controls (including text boxes and drop-down menus)

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:

• body
• p
• h1
• a:link
• a:hover

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:

.textbox

For <asp:TextBox> controls, which become <input type="text"> and <textarea> tags when sent to the browser.

.button

For <asp:Button> controls, which become <input type="button">, <input type="submit">, and <input type="reset"> tags.

.dropdownmenu

For <asp:DropDownList> controls, which become <select> tags.

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.

Design the Web Form for the Helpdesk Application

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:

• Pick from a predefined category of potential problem areas. (DropDownList control)
• Pick from predefined subjects within the categories. (DropDownList control)
• Type a description of the problem. (Multiline TextBox control)
• Submit the request. (Button control)

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 (We'll see better ways to do this in later chapters…). 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.

Summary

In this chapter, we discussed HTML controls, Web Forms, and Web controls. We also explored how to link between pages, and how to add style to controls. You even built your first project, putting together the information you've learned in this and previous chapters.

Your Web application efforts will focus predominantly on Web controls. In the next chapter, we'll learn how to check user input on those Web controls through the use of the ASP.NET validation controls...

That's it for the first four chapters of SitePoint's Build Your Own ASP.NET Website Using C# & VB.NET. This complete guide to building your very own ASP.NET Website is available now. Click here for more information.

The book contains not only the four chapters you just read, but thirteen more chapters that cover Web forms, validation controls, database design, ADO.NET, building a shopping cart, error handling, security and authentication, XML Web services, and more. The book also includes a fantastic set of references that make it an indispensible desk reference as you pursue Web development in ASP.NET. For more information, see the book page.