You want to develop a Web Forms application in ASP.NET that converts between the Fahrenheit, Celsius, and kelvin temperature systems.
Sample code folder: Chapter 01\Web Version
Create a new Web Forms application, and use ASP.NET development tools and coding methods to craft your application. First, read through Recipe 1.1 for background information on using Visual Studio and on converting between the various temperature systems.
Start Visual Studio 2005, and then create a new web site (not a "New Project"). You can use either the Create Web Site link on the Start Page or the File New Web Site menu command. The New Web Site dialog appears, as shown in Figure 1-8.
Figure 1-8. Visual Studio's New Web Site dialog
Make sure that ASP.NET Web Site is selected in the list of templates, choose File System for the location type, enter the new directory name (or just use the default, although we're going to use "WebConvertTemp" as the final directory component), naturally select Visual Basic as the programming language, and then click the OK button.
Visual Studio does a little work and then presents you with a blank page. This is a web page document on which you will place your various web display elements. By default, it acts like a word processing document, in which added elements flow left to right, top to bottom. You can opt to place elements at specific locations, but we'll stick with the default placement mode for this program.
If it's not already in view, display the Toolbox through the View Toolbox menu command. No doubt youve already seen the Toolbox used in Windows Forms applications. The tools displayed now are similar, although they are for specific use by ASP.NET applications only.
As with Windows Forms applications, Visual Studio presents the user interface to you, secretly writing the code behind the scenes. The generated code in Windows Forms is all Visual Basic code; you can write an entire Windows Forms application in Notepad using only Visual Basic statements. ASP.NET applications use Visual Basic for core logic and "code behind" event handlers, but the user interface is defined through an HTML/XML mix. You can modify this HTML yourself (click on the Source button at the bottom of the web page window to see the HTML generated so far) and have the changes reflected in the user interface.
For this project, let's take things easy and simply use the Toolbox to add display elements. Make sure you are in Design view (instead of HTML Markup/Source view). Type the following text into the web page document, and then press Enter:
Add the following usage text below this, and press Enter again:
Select the source temperature system, enter the value, and then click the Convert button.
The text is somewhat plain, so let's do a little formatting. Highlight the word "Convert" in the usage text, and press the Control-B key combination to make the text bold, just as you would in most word processors.
I think the title line would also look better as a heading. Switch into HTML mode by clicking on the Source button at the bottom of the page or selecting the View Markup menu command. You should see the following HTML code, or something pretty close to it:
<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="_Default" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <head runat="server"> <title>Untitled Page</title> </head> <body> <form runat="server"> <div> Convert Temperature<br /> Select the source temperature system, enter the value, and then click the <strong>Convert</strong> button.<br /> </div> </form> </body> </html>
If you've written HTML in the past, this should mostly look familiar. Modify the "Convert Temperature" line to include <h1> (heading level #1) tags around the text, removing the <br> tag:
Return to the user interface designer by clicking on the Design button at the bottom of the page or using the View Designer menu command.
Next, we need to add a selector for the three different temperature systems. To add an instance of the RadioButtonList control to the end of the web page, click at the bottom of the web page and then double-click on the RadioButtonList item in the Toolbox. A default single-item list appears. This list includes a "task pane," as shown in Figure 1-9 (Visual Studio includes such "smart tags" and task panes for many user interface elements). Click on the Edit Items link in this pop up.
Figure 1-9. Convenient features for user interface elements
Use the ListItem Collection Editor that appears to add each temperature system. Table 1-3 contains the data you need to enter your selections. When you are done, close the ListItem Collection Editor window.
Since we'll be interacting with this radio button list in code, we need to give it a meaningful name. In the Properties window, set the (ID) property to "SourceType."
Back in the web page designer, start a new line with the text "From Temperature:" and follow it with a TextBox control from the Toolbox. Name the control (that is, set its (ID) field to) "SourceValue."
On yet another line, add a Button control, name it "ConvertNow," and set its Text property to "Convert." A click on this button is destined to generate the converted temperatures.
That's it for the data-entry portion, though we still need a place to display the results. We'll use a simple table presentation. First, set off the results visibly by adding a Horizontal Rule control. This is actually a standard HTML element, so you'll find it in the HTML section of the Toolbox. After that, add a title that reads "Temperature Results" (add the <h1> tags if you wish).
Now add a table through the Layout Insert Table menu command. When the Insert Table form (Figure 1-10) prompts you for a table size, specify three rows and two columns, and then click OK. When the table appears, enter the names of the three temperature systems in the left-most cells: Fahrenheit, Celsius, and kelvin.
Figure 1-10. Inserting a new table on a web page
ASP.NET table cells can include names, and we will use such names to update the right-most cells with converted temperature data. As you click in each right-column cell, the Properties window displays the details for each related <td> element. Update the (ID) property of each cell to use the following cell names, from top to bottom: "ResultFahrenheit," "ResultCelsius," and "ResultKelvin."
Let's make one final change to the presentation. In Visual Studio's Properties window, select DOCUMENT from the list of objects at the top of the panel. Modify the Title property, which currently contains "Untitled Page," to read "Convert Temperature" instead. This is the title that appears in the browser's titlebar when running the application.
That's it for the user interface design. You should now have a web-page display similar to Figure 1-11.
Figure 1-11. A beautiful ASP.NET Web Forms application
Let's move on to the source code. Visual Studio has generated all of the HTML markup on our behalf, but we need to supply the temperature conversion logic. Click on the View Code button in the Solution Explorer, or select the View Code menu command. Although its not much, Visual Studio wrote a little bit of this code, too:
Partial Class _Default Inherits System.Web.UI.Page End Class
The only code we need to add is the event handler for the Convert button that performs the actual conversion. Add this code to the project. You can double-click on the Convert button in the designer to have Visual Studio add the event handler template:
Protected Sub ConvertNow_Click(ByVal sender As Object, _ ByVal e As System.EventArgs) Handles ConvertNow.Click ' ----- The conversion occurs here. Dim origValue As Double If (IsNumeric(SourceValue.Text) = True) Then ' ----- The user supplied a number. Convert it. origValue = CDbl(SourceValue.Text) If (SourceType.SelectedValue = "F") Then ' ----- From Fahrenheit. ResultFahrenheit.Text = CStr(origValue) ResultCelsius.Text = CStr((origValue - 32) / 1.8) ResultKelvin.Text = CStr(((origValue - 32) / 1.8) + _ 273.15) ElseIf (SourceType.SelectedValue = "C") Then ' ----- From Celsius. ResultFahrenheit.Text = CStr((origValue * 1.8) + 32) ResultCelsius.Text = CStr(origValue) ResultKelvin.Text = CStr(origValue + 273.15) Else ' ----- From kelvin. ResultFahrenheit.Text = CStr(((origValue - 273.15) * _ 1.8) + 32) ResultCelsius.Text = CStr(origValue - 273.15) ResultKelvin.Text = CStr(origValue) End If Else ' ----- Unknown source value. ResultFahrenheit.Text = "???" ResultCelsius.Text = "???" ResultKelvin.Text = "???" End If End Sub
If you've already read the other recipes in this chapter, this code should look some-what familiar. It simply applies the standard temperature-conversion formulas to the source number based on the type of source temperature selected, then puts the results in the output display fields.
The code you use to develop ASP.NET applications is not exactly the same as the code you use for desktop applications, but it's close. Event handlers in ASP.NET look like event handlers in Windows Forms applications, although the timing of the events is a little different. Functions that exist for calculation purposes only and that have no direct interaction with the user or the user interface may be moved freely between Windows Forms and Web Forms applications, but some of the code is very much tied to the ASP.NET programming model. Still, that's what you would expect given that half of a Web Forms application's user-interface code is written in HTML instead of Visual Basic.
The HTML code that is included is a little nonstandard. Take a look at the HTML markup associated with the application (select View Markup when the designer is in view). Although there are the standard <body> and <table> tags throughout the page, there are also some tags that begin with asp:, as in <asp:RadioButtonList>. Each tag represents a Web Forms Server Control and is directly tied to a .NET Frameworkcoded class (a class you can instantiate and manipulate just like any other .NET class). The RadioButtonList class, for instance, is found in the System.Web.UI.WebControls namespace, along with most of the other ASP.NET-specific controls.
When ASP.NET processes a web page with these embedded web controls, the control class emits standard HTML code in place of the <asp:RadioButtonList> tag set.
Fortunately, you don't need to know how the internals of these classes work or exactly what kind of HTML they emit. You can simply add the controls to your web page using drag-and-drop, and interact with each control through its events and properties. And that's what we did here. We added a couple of controls to a form, adjusted their properties, and then responded to a single event. These actions resulted in a complete web-based application. ASP.NET even adjusts the emitted HTML for the user based on the flavor of the browser being used.
The recipes in this chapter should be read together to gain a full understanding of general .NET application development concepts.