Building a Loan Payment Calculator using ASP.NET 2.0

This type of loan requires you to pay back equal installments over the period of the loan. In the early part of your loan you will be paying more interest and less principal, and towards the end of the loan period more principal and less interest. There is a plethora of financial loan products apart from this kind of loan. What is assumed in the fixed interest loan is that the rate does not vary during the life of the loan.

In this tutorial we will be asking the question, suppose one borrows $10,000.00 at an interest of eight percent per annum (per year), to be paid back in 10 months -- what will the monthly payment be? Since banks and loan companies want you to pay on a fixed date each month, your payment may vary depending on whether you make the payment at the beginning of the pay period or the end.

The interest rate, present value of a loan, future value of a loan, the agreed-to number of payments and the payment per payment period are all inter-related. These are represented by functions in Microsoft Visual Basic. The graphic user interface packages this function in an application with some validation.

The Financial Web Site

Start a new web site from the file menu. In this tutorial it is called the Financials, at http://localhost/Financials. Add a web page. This page will be named finPMT.aspx and is the container for your loan payment calculator. In ASP.NET 2.0, in addition to other system namespaces you also have the Microsoft.VisualBasic. The various financial variables used in this application can all be located on the Object Browser as shown in this picture. The highlighted object is the PMT function that will be used. There is a lengthy explanation of how this function works. The arguments that go into this function are clearly explained.

The PMT Function basics

The definition of this function as seen in the object browser is as follows:

Public Function Pmt (ByVal Rate As Double, 
ByVal Nper As Double, 
ByVal PV As Double, 
Optional ByVal FV As Double = 0.0
Optional ByVal Due As           
Microsoft.VisualBasic.DueDate = _
EndOfPeriod) As Double

The graphic user interface will take the input from the text boxes for the Rate, Nper, PV, FV, and DueDate. This is inserted into the above formula and the result is the payment (PMT) that must be paid each period. Since the values that are entered into text boxes are of the string type you will need to convert them to the proper data type. Hence some data conversions are necessary.

The description of the payment calculator

The design view of the finPMT.aspx page is shown in the next picture. In order to enter the arguments for the function there are text boxes; these are all placed in table cells. After inserting the Table control from the Toolbox, you can change the number of rows and columns, add a border, color the body of the table, and so forth. Also by highlighting columns or rows to be merged, you can merge columns and rows from the drop-down menu which pops up when you click the Table menu item in the main menu.

The future value has been taken as optional since we all wish our loan to be completely paid off. Also whether you pay at the beginning of the month or at the end of the month makes some difference. But all these points will be included in our calculator. At run time you enter values for Rate, Nper, present (PV) and future (FV) values, pick a method of payment and click the button to get your answer. Loan and annuity are interchangeably used.

In the design view, you also see various items in the messages column as well as below the button. These will be described a little later in the tutorial. Also you see a set of test values that you can use to test your calculator. If things are working right, these test input values should give the loan payment shown

The code behind the finPMT.aspx page

This code file is called the finPMT.aspx.vb. It contains the code for the events that are invoked by the finPMT.aspx page, like loading the page, clicking the mouse, and so forth. The next paragraph shows the code that is executed when the button is clicked.

Partial Class finPMT
Inherits System.Web.UI.Page
Protected Sub Button1_Click(ByVal sender As Object, ByVal _
e As System.EventArgs) Handles Button1.Click
Dim dfpmt As Double
If rbStart.Checked Then
dfpmt = Pmt(CDbl((txtRate.Text) * (0.01 / 12)), _
CDbl(txtNper.Text), CDbl(txtPV.Text), _
CDbl(txtFV.Text), DueDate.BegOfPeriod)
Else
If rbEnd.Checked Then
dfpmt = Pmt(CDbl((txtRate.Text) * (0.01 / 12)), _
CDbl(txtNper.Text), CDbl(txtPV.Text), _
CDbl(txtFV.Text), DueDate.EndOfPeriod)
End If
End If
TextBox1.Text = Format(dfpmt, "$##,######.00")
End Sub
End Class

Testing the page

Right click the finPMT.aspx in the solution explorer and click on the drop-down menu item named View in Browser. This brings up the aspx page in the IE browser. For starters just insert the test values and verify that the payment from the payment calculator matches the one shown under Test Values.

Use of validation controls

Validation controls have been added to the design view to make sure values are inserted into the required text boxes and inserted values do not violate some basic rules. The validator controls can be dragged and dropped into the required cells in the Messages column of the table.

RequiredFieldValidators

In the design view of the finPMT.aspx page you may see a number of validation controls in the Messages column. For example, "Enter a number" for all the text boxes relates to the RequiredFieldValidators. Although they read "Enter a number," what is really meant by the RequiredFieldValidator is that the text boxes should not be empty. These are checked as you enter the values. To test them just hit the button without making entries to any of the boxes. You will be asked to enter a number before you can proceed. The properties of the RequiredFieldValidator1 in the first row are as shown in the next picture.

RegularExpressionValidator

You will find this validator in the first row, which has the error message, "Only numbers allowed." The reason for this is that, since this text box takes a rate, some users may enter something like 7% instead of 7. This validator would caution the user to change it to a number. The w in the Validator Expression property would trigger any violation of this rule. The regular expression for number is w. If you need to know more about regular expressions that you can use in the VS 2003 IDE you need to look up the regex classes located in the namespace System.Text.RegularExpressions.

RangeValidator

In the second row in the design view, in addition to a RequiredFieldValidator there is an additional RangeValidator. This calculator is configured for a loan life of 30 years which is 360 pay periods. Its value can range from 1 to 360. Any other number in this text box will not be validated. The RangeValidator property in the second row is shown in the next picture.

Source code for the finPMT.aspx page

<%@ Page Language="VB"  
AutoEventWireup="false" 
CodeFile="finPMT.aspx.vb" 
Inherits="finPMT" %>
<!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><h2 style="color:Navy;">Periodic Payment on a Loan</h2>
<form id="form1" runat="server">
<table style="width: 506px; height: 312px; font-weight: bold; 
color: #009999; background-color: #ccffff;" 
border="1" cellpadding="1" cellspacing="2" 
title="Periodic Payment on a Loan">
<tr>
<td style="width: 260px">
Loan related item</td>
<td style="width: 25px">
Entries / <span style="color: #ff0066">Result</span>

</td>
<td style="width: 82px">
Messages</td>
</tr>
<tr>
<td style="width: 260px">
Rate of interest per period</td>
<td style="width: 25px">
<asp:TextBox ID="txtRate" runat="server">

</asp:TextBox></td>
<td style="width: 82px">
<asp:RequiredFieldValidator ID="RequiredFieldValidator1" 
runat="server" ControlToValidate="txtRate"
ErrorMessage="Enter a number">
</asp:RequiredFieldValidator>
<asp:RegularExpressionValidator 

ID="RegularExpressionValidator1" 
runat="server" ControlToValidate="txtRate"
ErrorMessage="Only numbers allowed" 
ValidationExpression="w">
</asp:RegularExpressionValidator></td>
</tr>
<tr>
<td style="width: 260px">
Total number of payment periods in an annuity (Loan)

</td>
<td style="width: 25px">
<asp:TextBox ID="txtNper" runat="server">

</asp:TextBox></td>
<td style="width: 82px">
<asp:RequiredFieldValidator ID=

"RequiredFieldValidator2" 
runat="server" ControlToValidate="txtNper"
ErrorMessage="Enter a number">
</asp:RequiredFieldValidator>
<asp:RangeValidator ID="RangeValidator1" runat="server" 
ControlToValidate="txtNper"
ErrorMessage="Should be between 1 and 360" 

MaximumValue="360"  
MinimumValue="1">
</asp:RangeValidator></td>
</tr>
<tr>
<td style="width: 260px">
Present Value of annuity (Loan)</td>
<td style="width: 25px">
<asp:TextBox ID="txtPV" runat="server">

</asp:TextBox></td>
<td style="width: 82px">
<asp:RequiredFieldValidator ID=

"RequiredFieldValidator3" 
runat="server" ControlToValidate="txtPV"
ErrorMessage="Enter a number" Width="100px">
</asp:RequiredFieldValidator></td>
</tr>
<tr>
<td style="width: 260px">
Future value of annuity (Loan)</td>
<td style="width: 25px">
<asp:TextBox ID="txtFV" runat="server">

</asp:TextBox></td>
<td style="width: 82px">
<asp:RequiredFieldValidator ID=

"RequiredFieldValidator4" 
runat="server" ControlToValidate="txtFV"
ErrorMessage="Enter a number">

</asp:RequiredFieldValidator></td>
</tr>
<tr>
<td style="width: 260px">
When payment due, at the beginning or end of pay 

period</td>
<td colspan="2">
<asp:RadioButton ID="rbStart" runat="server" 

Checked="True" 
GroupName="opt" Text="Start" /><br />
<br />
<asp:RadioButton ID="rbEnd" runat="server" 
GroupName="opt" Text="End" /></td>
</tr>
<tr>
<td style="width: 260px">
<asp:Label ID="Label1" runat="server" 
Text="Payment per Period" Width="161px" 
ForeColor="#C00000">
</asp:Label></td>
<td colspan="3">
<asp:TextBox ID="TextBox1" runat="server" 
Width="256px">
</asp:TextBox></td>
</tr>
</table>
<br />
<asp:Button ID="Button1" runat="server" 
Text="What is the payment per period?" /><br />
<br />
<br />
 
<br />
</form>
<span style="color:red; font-weight:bold; text-decoration:underline">
Test Values<br />
</span>
<span style="color:blue;font-weight:300">
Rate of Interest 7%<br />
Present Value of Loan: 165000<br />
Future value of Loan: 0.0<br />
Number of Payments (30 Years): 360<br />
DueDate: End<br />
<span style="color: red">
Payment=1097.75<br />
</span>
</span>
</body>
</html> 

Summary

In ASP.NET 2.0 you can directly use Microsoft's Visual Basic functions, of which the Financials is a subset. Some validation controls are implemented; these are by no means complete as one cannot foresee all kinds of user inputs. The calculator must function as designed. These functions may also be implemented as a web service.