Chapter 3: Creating Our First ASP.NET Web Page
By Scott Mitchell
Testing the Financial Calculator
Now that we have completed the HTML and source code portions of our ASP.NET Web page, it's time to test. First make sure that you have saved the ASP.NET Web page since entering the source code in Listing 3.1. Next view the ASP.NET Web page through your browser. When first visiting the page, you should see three empty textboxes and the Compute Monthly Cost button, as shown in Figure 3.11.
When the ASP.NET page is first visited, three textboxes await user input.
Now go ahead and enter some values into the textboxes and then click the Compute Monthly Cost button. When this button is clicked, the monthly cost is displayed beneath the textboxes and button, as shown in Figure 3.12.
The output of the financial calculator is displayed when the Button is clicked.
Testing Erroneous Input
Part of testing is not only testing expected inputs but also testing unexpected ones. For example, what will happen if the user enters into the Mortgage Length textbox a value of "Jisun"? Obviously, this is not a valid number of years. Entering such an erroneous value will cause a run-time error, as shown in Figure 3.13.
A run-time error will occur if the input is not in proper format.
Errors such as those shown in Figure 3.13 are an eyesore. Rather than displaying such error messages when the user enters erroneous input, it would be better to display a simple error message next to the textbox(es) with erroneous input, explaining that the input is not in the right form.
The process of ensuring that user input is in the correct format is known as input validation. Fortunately, input validation is incredibly easy with ASP.NET. We'll examine ASP.NET's input validation features in Hour 12, "Validating User Input with Validation Controls."
Note - Earlier in this hour we discussed the importance of planning the user interface and functionality of an ASP.NET Web page prior to creating the page. Not only is it important to plan how the ASP.NET Web pages should work, but it is also important to plan on how to ASP.NET Web page should behave when things don't necessarily go according to plan.
In this hour we saw how to create our first useful ASP.NET Web page. We started by outlining the features we wanted to include in our ASP.NET Web page, including the output and needed inputs. We then briefly discussed what the user interface should look like.
Next we implemented the user interface by completing the HTML portion of the ASP.NET Web page. Using the Web Matrix Project's WYSIWYG editor, it was simply a matter of typing in the textbox labels and dragging and dropping the needed TextBox, Button, and Label Web controls.
After the HTML portion, the source code portion was entered. The code to perform the calculation was inserted in an event handler for the Compute Monthly Cost button's Click event. This had the effect of having the entered code executed whenever the user clicked the Compute Monthly Cost button.
Finally, we tested the ASP.NET Web page by visiting it with a Web browser and entering some values for the three textboxes.
In this hour we did not spend much time discussing the source code or the specifics of the Button Web control's Click event and corresponding event handler. We will touch upon these issues in detail in the next two hours.
Can I use HTML controls instead of Web controls for the textboxes in the HTML portion of the ASP.NET Web page?
Yes, but I would advise against it, in large part because the Web Matrix Project's Toolbox does not contain support for dragging and dropping HTML controls. Rather, you would have to enter the markup for the HTML controls by hand in the HTML tab. That is, there are no HTML controls in the Web Matrix Project's Toolbox, just Web controls and HTML elements.
Additionally, we will be using Web controls extensively throughout this book, so I would encourage you to familiarize yourself with adding Web controls to an ASP.NET Web page and consider using HTML controls only when an example explicitly mentions their use.
How do I associate "event code" with a Web control that I've placed on a Web Form?
In this hour we saw how to have the Button Web control's Click event associated with an event handler provided in the source code section. We accomplished this by simply double-clicking the Button Web control in the designer. Realize that, behind the scenes, the Web Matrix Project is performing a number of steps when you double-click the Button. Each Web control has a default event. When the Web control is double-clicked in the designer, an event handler is created for this default event. (Note that the Button Web control's default event is the Click event.)
Adding an event handler for an event other than a Web control's default event involves a more thorough discussion than we are ready for at this point. We'll examine adding event handlers for events other than the Web control's default event in the next hour.
What would happen if I placed the financial calculation code in the Page_Load event instead of the button Click event handler?
Recall that the source code in the Page_Load event handler executes every time the ASP.NET Web page is requested. When the page is visited for the first time by the user, the user has yet to enter the loan principal, interest rate, and duration. Therefore, in attempting to compute the calculation, we will get an error.
Because we want to perform the calculation only after the user has provided the required inputs, the source code for the calculation is placed in the button's Click event handler.
Why is the design requirements phase of software development an important one?
How can one add a TextBox Web control to an ASP.NET Web page using the Web Matrix Project?
Why did we add a Label Web control to our ASP.NET Web page's HTML portion?
What will the ASP.NET Web page's output be if the user enters invalid characters into the textboxesfor example, if under the Mortgage Amount textbox, the user enters "Scott"?
How do you add an event handler for a Button Web control's Click event with the Web Matrix Project?
When using a TextBox Web control, what property is referenced to determine the value entered by the user?
The design requirements phase outlines the specific features for the software project and also outlines the user interface. It is an important stage because by enumerating the features, youand your boss and clientcan easily determine the current progress of the project. Furthermore, there is no ambiguity as to what features should and should not be included.
To add a TextBox Web control, simply click the TextBox Web control from the Toolbox and drag it onto the designer.
A Label Web control was added to the ASP.NET Web page's HTML portion to indicate where the output of the financial calculator would appear. Without using a label, we could output the results using only Response.Write() statements. Recall from the previous hour that this would have the effect of omitting the results before the HTML portion of the ASP.NET Web page. By using a Label Web control, then, we have more flexibility over where the output appears in the HTML portion.
If the user provides invalid input, a run-time error will occur.
To add an event handler for a Button Web control's Click event, simply double-click the button that you wish to add an event handler for.
The Text property contains the value entered by the user. To reference this property in an ASP.NET Web page's source code portion, we can use
- In this hour we saw how to use the Web Matrix Project to create an ASP.NET
Web page with TextBox Web controls, a Button Web control, and a Label Web
control. Using this knowledge, let's create an ASP.NET Web page that
will prompt the user for his name and age. Once the user provides this information
and clicks the submit button, the ASP.NET Web page will display a message
whose content depends on the user's age.
This ASP.NET Web page will need to have two TextBox Web controls, a Button Web control, and a Label Web control. Set the TextBox Web controls' ID properties to name and age. The Button Web control should have its Text property set to Click Me. Set the Label Web control's ID property to results and clear out its Text property. You will then need to create an event handler for the Button Web control's Click eventrecall that this is accomplished by simply double-clicking the Button in the designer.
Now, in the Click event handler, you need to determine what message to display, based on the user's age. The code for this will look like
If age.Text < 21 then results.Text = name.Text & ", you are a youngster!" End If If age.Text >= 21 AND age.Text < 40 then results.Text = name.Text & ", you are an adult." End If If age.Text >= 40 then results.Text = name.Text & ", you are over the hill!" End If
Once you have entered the preceding source code into the Button Web control's Click event handler, save the ASP.NET Web page and test it by visiting it through a browser.
For more practice with the Web Matrix Project, take a moment to enhance the user interface of the FinancialCalculator.aspx Web page we created in this hour. A couple suggested enhancements, of many possible, include displaying the TextBox Web control titles in a more appealing font and adding some text at the top of the Web page explaining the purpose of the financial calculator.