Writing the Source Code for the ASP.NET Web Page

Now that we have completed the HTML portion of our ASP.NET web page, all that remains is the source code. The source code will read the user's inputs and perform the necessary calculations to arrive at the monthly cost for the mortgage.

In Hour 2 we looked at the page's Load event and the corresponding Page_Load event handler. This event handler, which you can include in your ASP.NET web page's source code portion, is executed each time the web page is loaded. We will not be placing the source code to perform the monthly mortgage cost calculation in this event handler, though, because we do not want to run the calculation until the user has entered the principal, interest rate, and duration values and has clicked the Compute Monthly Cost button.

Button Web controls have a Click event, which fires when the button is clicked. Therefore, what we want to do is create an event handler that is associated with the Compute Monthly Cost button's Click event. This way, whenever the Compute Monthly Cost button is clicked, the event handler that we provide will be executed. When we have this event handler, all that will remain will be to write the source code that performs the computation inside this event handler.

Creating an event handler for a Button Web control's Click event is remarkably easy to accomplish with Visual Web Developer. The quickest way is to go to the Design view and simply double-click the Button Web control. This will automatically create the necessary event handler and whisk you to the page's source code portion, where you should see the following source code:

[View full width]
Partial Class FinancialCalculator     Inherits System.Web.UI.Page     Protected Sub performCalc_Click(ByVal sender As Object, ByVal e As System.EventArgs)  Handles performCalc.Click     End Sub End Class 

Note that the event handler is named performCalc_Click. More generically, Visual Web Developer names it buttonID_Click, where buttonID is the value of the Button's ID property. (Recall that after adding the Button Web control, we changed its ID from Button1 to performCalc.)

Another way to create this same event handler is to go to the source code portion. At the top you'll find two drop-down lists. From the left drop-down list, select the Button Web control (performCalc) and then, from the right drop-down list, select the Click event. After you select the Click option, an event handler will be automatically created for the performCalc Button's Click event with the same code had you double-clicked the Button in the Design view.

Any code that you write within the event handler will be executed whenever the performCalc button is clicked. Because we want to compute the monthly cost of the mortgage when the performCalc button is clicked, the code to perform this calculation will appear within the performCalc_Click event handler.

Reading the Values in the TextBox Web Controls

To calculate the monthly cost of the mortgage, we must first be able to determine the values the user entered into the three TextBox Web controls. Before we look at the code to accomplish this, let's take a step back and reexamine Web controls, a topic we touched upon lightly in Hour 2.

Recall that when the ASP.NET engine is executing an ASP.NET web page, Web controls are handled quite differently from standard HTML elements. With static HTML content, the markup is passed directly from the ASP.NET engine to the web server without any translation; with Web controls, however, the Web control's syntax is rendered into a standard HTML element. Specifically, what's happening behind the scenes is that an object is created that represents the Web control. The object created is created from the class that corresponds to the specific Web control. That is, a TextBox Web control has an object instantiated from the TextBox class, whereas a Label Web control has an object instantiated from the Label class.

By the Way

Recall that a class is an abstract blueprint, whereas an object is a concrete instance. When an object is created, it is said to have been instantiated. The act of creating an object is often referred to as instantiation.

Each of these Web control classes has various properties that describe the state of the Web control. For example, the TextBox class has a Columns property that indicates how many columns the TextBox has. Both the TextBox and Label classes have Text properties that indicate that Web control's text content.

Did you Know?

A complete list of properties, methods, and events for the Web control classes, along with a description and sample code, can be found in the Visual Web Developer help. If you have enabled Dynamic Help, you can simply click on the Web control that you want to learn more about, and the Dynamic Help window will be populated with technical documentation, articles, and other related information on that particular control.

The primary benefit of Web controls is that their properties can be accessed in the ASP.NET web page's source code section. Because the Text property of the TextBox Web control contains the content of the TextBox, we can reference this property in the Compute Monthly Cost button's Click event handler to determine the value the user entered into each TextBox.

For example, to determine the value entered into the Mortgage Amount TextBox, we could use the following line of code:

loanAmount.Text 

When the ASP.NET engine creates an object for the Web control, it names the object the value of the Web control's ID property. Because loanAmount is the ID of the Mortgage Amount TextBox Web control, the object created representing this Web control is named loanAmount. To retrieve the Text property of the loanAmount object, we use the syntax loanAmount.Text.

By the Way

Don't worry if the syntax for retrieving an object's property seems confusing. We will be discussing the syntax and semantics of Visual Basic in greater detail in Hours 5 through 7.

The Complete Source Code

Listing 4.1 contains the complete source code for our ASP.NET web page. Visual Web Developer has already written some of the codethe class declaration and the event handlerfor you. You will, however, need to enter the code between lines 4 and 35 into the performCalc Button's Click event handler.

Did you Know?

Keep in mind that you should not type in the line numbers shown in Listing 4.1 as well. The line numbers are present in the code listing only to help reference specific lines of the listing when we're discussing the code.

Also, remember that IntelliSense can help expedite entering property names and alert you when there's a problem. For example, when referencing the Text property of the loanAmount TextBox Web control, we use loanAmount.Text. When you type the period (.) after typing in loanAmount, you should see a drop-down list of available properties and methods for the TextBox Web control. You can then type in the first few letters of the property or method you want to use and press the Tab key to autocomplete the rest of the property or method name.

Additionally, if you don't see a drop-down list, something has gone awry. Did you mistype loanAmount? Did you not set the corresponding TextBox Web control's ID to loanAmount?

Listing 4.1. The Computation Is Performed in the performCalc Button's Click Event Handler

[View full width]

 1: Partial Class FinancialCalculator  2:     Inherits System.Web.UI.Page  3:  4:     Protected Sub performCalc_Click(ByVal sender As Object, ByVal e As System .EventArgs) Handles performCalc.Click  5:         'Specify constant values  6:         Const INTEREST_CALCS_PER_YEAR As Integer = 12  7:         Const PAYMENTS_PER_YEAR As Integer = 12  8:  9:         'Create variables to hold the values entered by the user 10:         Dim P As Double = loanAmount.Text 11:         Dim r As Double = rate.Text / 100 12:         Dim t As Double = mortgageLength.Text 13: 14:         Dim ratePerPeriod As Double 15:         ratePerPeriod = r / INTEREST_CALCS_PER_YEAR 16: 17:         Dim payPeriods As Integer 18:         payPeriods = t * PAYMENTS_PER_YEAR 19: 20:         Dim annualRate As Double 21:         annualRate = Math.Exp(INTEREST_CALCS_PER_YEAR * Math.Log(1 + ratePerPeriod)) - 1 22: 23:         Dim intPerPayment As Double 24:         intPerPayment = (Math.Exp(Math.Log(annualRate + 1) / payPeriods) - 1) * payPeriods 25: 26:         'Now, compute the total cost of the loan 27:         Dim intPerMonth As Double = intPerPayment / PAYMENTS_PER_YEAR 28: 29:         Dim costPerMonth As Double 30:         costPerMonth = P * intPerMonth / (1 - Math.Pow(intPerMonth + 1, -payPeriods)) 31: 32: 33:         'Now, display the results in the results Label Web control 34:         results.Text = "Your mortgage payment per month is $" & costPerMonth 35:     End Sub 36: End Class 

An in-depth discussion of the code in Listing 4.1 is provided toward the end of this hour in the "Examining the Source Code" section. For now, simply enter the code as-is, even if there are parts of it you don't understand. One thing to pay attention to, though, is in lines 10 through 12. In these three lines we are reading the values of the three TextBox Web controls and assigning the values to variables.

By the Way

If the source code in Listing 4.1 has you hopelessly lost and confused, don't worry. The point of this hour is to get you creating a useful ASP.NET web page. We will examine the source code for this page in more detail later in this hour. Additionally, we'll spend Hours 5 through 7 investigating the Visual Basic syntax in greater detail.

By the Way

The mathematical equations used to calculate the monthly interest cost can be found at http://www.faqs.org/faqs/sci-math-faq/compoundInterest/. A more in-depth discussion of these formulas can be found at http://people.hofstra.edu/faculty/Stefan_Waner/RealWorld/Summary10.html.