IS 360
ASP.NET Lab
EKEDAHL
ABSTRACT:
In this lab, you will create a simple ASP.NET application having the following characteristics:



Create an ASP.NET Web Site with multiple Web Forms
Use ASP.NET controls
Write server-side code in either VB or C#.
HANDS-ON ACTIVITY – CALCULATING A LOAN PAYMENT.
In this part of the lab, you will create an ASP.NET page to calculate the payment on a loan. The input
values include the loan amount, interest rate, and loan term. You can complete this assignment in
either VB or C#. My code snippets appear in Visual Basic. This is a similar program to one that you
created for your assignment in JavaScript. This lab shows a different alternative.
Note that this tutorial was created in Visual Studio 2012. There might be slight variations in Visual Studio
2013.
1. Start Visual Studio and create a new empty ASP.NET project. To do this, click File, New Web
Site. You will see a dialog box similar to the following: Set the project location as you see fit.
Name the Web site as you see fit. You can create the project in Visual Basic or C#. Make sure
that you have selected and ASP.NET Empty Web Site.
Make sure that you create an ASP.NET Empty Web Site. If you create an ASP.NET Web Site,
several files will be created as part of a more complicated template. These files are beyond the
scope of this lab and are discussed in detail in IS 460.
1|Page
Next, you need to add an ASP.NET Web form to the project.
1. Click WebSite, Add New Item to display the following dialog box:
2. Make sure that Web form is selected. By default, the Web Form is created having the name
Default.aspx. This is similar to creating a Web Page named index.html as your home page. Click
Add to add the Web form to the project. Note that the Web form appears in the Solution
Explorer as shown in the following figure:
2|Page
The following list describes the relevant files in the site and their purpose:

The file Default.aspx.vb contains the VB code. (The File will be named Default.aspx.cs if you
are using C#.

The file Default.aspx contains the HTML 5 code where you create the user interface.

This file appears in the editor.
o The Source tab displays the HTML 5 source code.
o The Design tab displays a visual interface.
o The Split tab is used to split the above windows.
If you do not see the Design, Split, and Source tabs, you will need to reset the default Editor. Right-click
on the file named default.aspx in the Solution Explorer. The following dialog box will appear. Select Web
Forms Editor. Click Set as Default. Then Click OK.
3|Page
If you are using C#, you must add a reference to the Visual Basic library because, the PMT function
resides in that library. If you are writing your code in Visual Basic, you should not need to add a
reference to this library.
1. On the menu bar, click Website, Add Reference to display the Add Reference dialog. Click the
.NET tab, if necessary. Select Microsoft.VisualBasic as follows:
2. Click OK to add the library reference.
3. If you look at the web.config file, you will see that the Microsoft.VisualBasic assembly was added
to the project as shown in the following figure. Do not modify the Web.config file by hand. Any
errors in this file will prevent the program from compiling.
1. Create the user interface for the application as follows: Use the Standard toolbox controls to
create the user interface.

I suggest viewing both the Design and Source windows.
4|Page

Make sure that you create all of the controls inside the region of the <form> tag.
Remember that an ASP.NET application can have only one <form> tag designated
runat=”server”.

Use text boxes for the input values. Create descriptive labels to the left of the text boxes.

Looking at the following code, make sure that you correctly set the ID property. If you do
not, code that you will write later in the lab will not work correctly.

Finally create a Label and corresponding prompt to display the output value (Loan
payment).

Create a button on the form that will postback the page. (Set the PostBackUrl property
to the name of the page, which is ~/Default.aspx). Set the Text property to Calculate
Payment. Use the Properties window to set these properties. Again, make sure to use the
ASP button rather than the HTML button.

Here is some sample code and a corresponding image of what the form should look like:
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:Label ID="Label1" runat="server" Text="Loan Amount"></asp:Label>
<asp:TextBox Width="300px" ID="txtLoanAmount"
runat="server"></asp:TextBox><br />
<asp:Label ID="Label2" runat="server"
Text="Interest Rate (Annual)"></asp:Label>
<asp:TextBox width="300px" ID="txtIR" runat="server"></asp:TextBox> <br />
<asp:Label ID="Label3" runat="server" Text="Loan Term (Years)"></asp:Label>
<asp:TextBox width="300px" ID="txtTerm" runat="server"></asp:TextBox> <br />
<asp:Button ID="Button1" runat="server" Text="Button" />
</div>
</form>
</body>
</html>
5|Page
3. All of the coding will take place in the button’s Click event handler. You use the same Code
Editor that you used to create the event handlers for desktop applications. To create the event
handler, select the button in the designer, and press F4 to display the Properties window. Select
the Events pane (the button that looks like a lightning bolt). Double-click the Click event.
4. The Code Editor should be activated. To activate the Code Editor, select the page (Default.aspx) in
the Solution Explorer. Then, click View Code on the menu bar. The following figures show the Code
Editor for VB and C# respectively
6|Page
5. Next, create the code to calculate the payment of the loan. Attached to the lab is a copy of the
Help page for the PMT function. Note that the FV is 0 because the loan will be paid back at the
end of the term. Here is some code to get you started. This code should appear inside of the
button’s Click event handler:
Dim
Dim
Dim
Dim
LoanAmount As Double
LoanTerm As Double
InterestRate As Double
Payment As Double
LoanAmount = System.Convert.ToDouble(txtLoanAmount.Text)
7|Page
LoanTerm = System.Convert.ToDouble(txtTerm.Text)
InterestRate = System.Convert.ToDouble(txtIR.Text)
' Calculate the monthly interest rate and loan term.
LoanTerm = LoanTerm * 12
InterestRate = InterestRate / 12
' Calculate the payment.
Payment = Microsoft.VisualBasic.Financial.Pmt(InterestRate, _
LoanTerm, LoanAmount, 0);
' Display the output result.
txtOutput.Text = Payment.ToString();
The following code segment shows the same code written in C#:
Double
Double
Double
Double
LoanAmount;
LoanTerm;
InterestRate;
Payment;
LoanAmount = System.Convert.ToDouble(txtLoanAmount.Text);
LoanTerm = System.Convert.ToDouble(txtTerm.Text);
InterestRate = System.Convert.ToDouble(txtIR.Text);
LoanTerm = LoanTerm * 12;
InterestRate = InterestRate / 12;
Payment = Microsoft.VisualBasic.Financial.Pmt(InterestRate, LoanTerm,
LoanAmount, 0);
txtOutput.Text = Payment.ToString();
6. Test the program by pressing F5. You might see the following window: Set the option as shown
in the following figure:
7. You will see the application compile and then appear in a browser window as follows. Enter the
values shown in the following figure and click the button. The results appear in the output
8|Page
control.
8. Close the browser window and end the program.
9. Modify the program to deal with a loan that is not paid off at the end of the term. Here, the user
will need to enter a value for the FV argument. You will need to create another input field.
Modify the code accordingly.
HANDS-ON ACTIVITY: CREATING A TABLE
In the next part of the lab, you will create a second form that will utilize a table and a loop.
1. Click Website, Add New Item. In the Add New Item dialog box, create a Web Form named
SalesTaxTable.aspx.
2. Using the Toolbox’s Standard tab, create a Table on the form. The code should look like the
following. Make sure to set the ID property to tblTax.
3. Activate the Code Editor for the form, and enter the following in the Page’s Load event handler.
This event handler should already be created.
9|Page
public partial class SalesTaxTable : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
TableRow tr = new TableRow();
TableCell tc = new TableCell();
tc.Text = "Property Value";
tr.Cells.Add(tc);
tc = new TableCell();
tc.Text = "Tax Amount";
tr.Cells.Add(tc);
tblTax.Rows.Add(tr);
for (int x = 100000; x <= 200000; x+=10000)
{
tr = new TableRow();
tc = new TableCell();
tc.Text = x.ToString();
tr.Cells.Add(tc);
tc = new TableCell();
tc.Text = (x * 0.015).ToString("f2");
tr.Cells.Add(tc);
tblTax.Rows.Add(tr);
}
}
}
If you are working in VB, all of the code will be identical with the example of the procedure
declaration itself, and the code for the for loop.
4. Run the program again. The tax table should appear in the browser window.
5. Enhance the program so that the above code will execute when the user clicks a button. You will
need to create this button. Allow the user to enter the minimum and maximum value. Use this
user input to control the repetition counters in the loop. Allow the user to enter a specific tax
rate.
10 | P a g e