How to Test a Web Application

The Visual Basic code for the Future Value form

Figure 2-17 presents the complete Visual Basic code for the code-behind file of the Future Value form. It consists of three event handlers that handle the Load event for the page and the Click events of the Calculate and Clear buttons. This code also includes a function procedure named FutureValue that is called by the event handler for the Click event of the Calculate button.

In this code, I’ve highlighted the two page properties that are commonly tested in the code for web forms. The first one is the IsPostBack property that’s used in the Page_Load procedure. If it is True, it means that the page is being posted back from the user. If it is False, it means that the page is being requested by the user for the first time.

As a result, the statements within the If statement in the Page_Load procedure are only executed if the page is being requested for the first time. In that case, the values 50 through 500 are added to the drop-down list. For all subsequent requests by that user, the IsPostBack property will be True so the values aren’t added to the drop-down list.

The other page property that’s commonly tested is the IsValid property. It’s useful when the user’s browser doesn’t support the script for the validation controls. In that case, the application has to rely on the validation that’s always done on the server. Then, if IsValid is True, it means that all of the input data is valid. But if IsValid is False, it means that one or more controls contain invalid input data so the processing shouldn’t be done.

In the btnCalculate_Click procedure, you can see how the IsValid test is used. If it isn’t True, the processing isn’t done. But otherwise, this procedure gets the years and interest rate values from the text boxes and converts them to monthly units. Then, it uses the SelectedValue property of the drop-down list to get the value of the selected item, which represents the investment amount. Last, it calls the FutureValue function to calculate the future value, uses the FormatCurrency method to format the future value, and puts the formatted value in the label of the form. When this procedure ends, the web form is sent back to the user’s browser.

With the exception of the IsPostBack and IsValid properties, this is all standard Visual Basic code so you shouldn’t have any trouble following it. But if you do, you can quickly upgrade your Visual Basic skills by getting our latest Visual Basic book.

The Visual Basic code for the Future Value form

Partial Class _Default
    Inherits System.Web.UI.Page

    Protected Sub Page_Load(ByVal sender As Object, _
            ByVal e As System.EventArgs) Handles Me.Load
        If Not IsPostBack Then
            For i As Integer = 50 To 500 Step 50
              ddlMonthlyInvestment.Items.Add(i)
            Next
        End If
    End Sub

    Protected Sub btnCalculate_Click(ByVal sender As Object, _
            ByVal e As System.EventArgs) Handles btnCalculate.Click
        Dim months As Integer
        Dim interestRate, monthlyInvestment As Decimal
        Dim futureValue As Decimal
        If IsValid Then
            months = txtYears.Text * 12
            interestRate = txtInterestRate.Text / 12 / 100
            monthlyInvestment = ddlMonthlyInvestment.SelectedValue
            futureValue = Me.FutureValue(months, interestRate, _
                          monthlyInvestment)
            lblFutureValue.Text = FormatCurrency(futureValue)
        End If
    End Sub

    Private Function FutureValue(ByVal months As Integer, _
            ByVal interestRate As Decimal, _
            byVal monthlyInvestment As Decimal) As Decimal
        For i As Integer = 1 To months
            FutureValue = (FutureValue + monthlyInvestment) _
               * (1 + interestRate)
        Next
    End Function

    Protected Sub btnClear_Click(ByVal sender As Object, _
            ByVal e As System.EventArgs) Handles btnClear.Click
        ddlMonthlyInvestment.Text = 50
        txtInterestRate.Text = ""
        txtYears.Text = ""
        lblFutureValue.Text = ""
    End Sub

End Class

--------------------------------------------Figure 2-17  The Visual Basic code for the Future Value form

How to test a web application

After you design the forms and develop the code for a web application, you need to test it to be sure it works properly. Then, if you discover any errors in the application, you can debug it, correct the errors, and test it again.

In chapter 4, you’ll learn all the skills you need to test and debug a web application. For now, I just want to show you how to run a web site with the built-in development server so you can test any applications that you develop for this chapter. Then, I’ll show you the HTML code that’s sent to the browser so you can see how that works.

How to run a web site with the built-in development server

When you run a file-system web site by using one of the techniques in figure 2-18, Visual Studio 2008 compiles the application. If the application compiles without errors, Visual Studio automatically launches the built-in ASP.NET Development Server and displays the starting page of the web site in your default browser. Then, you can test the application to make sure that it works the way you want it to.

However, if any errors are detected as part of the compilation, Visual Studio opens the Error List window and displays the errors. These can consist of errors that have to be corrected as well as warning messages. In this figure, five errors are displayed in the Error List window. These errors occurred because I set the Option Strict option on.

To fix an error, you can double-click on it in the Error List window. This moves the cursor to the line of code that caused the error in the Code Editor. By moving from the Error List window to the Code Editor for all of the messages, you should be able to find the coding problems and fix them.

Note that the code that caused the errors is also identified with a wavy underline in the Code Editor. In fact, the errors shown here were highlighted before I compiled the application. Visual Studio doesn’t detect some errors until the application is compiled, though.

If a bar appears at the right end of the wavy underline that identifies an error, it means that the Smart Compile Auto Correction feature is available. Then, you can place the mouse pointer over this bar to display a smart tag, and you can click the drop-down arrow that appears to display an Error Correction Options window like the one shown in this figure. This window includes a description of the error, suggestions for correcting the error, and a preview of how the code will look if you apply the corrections. If you like a suggested correction, you can just click on it to apply it.

As you’re testing an application with the development server, exceptions may occur. If an exception isn’t handled by the application, ASP.NET switches to the Code Editor window and highlights the statement that caused the exception. In this case, you can end the application by clicking on the Stop

An ASP.NET project with the Error List window displayed

How to run an application

1. Click on the Start button in the Standard toolbar or press F5. Then, the project is compiled and the starting page is displayed in your default browser.
   
2. The first time you run an ASP.NET application, a dialog box will appear asking whether you want to modify the web.config file to enable debugging. Click the OK button to proceed.

How to stop an application

• Click the Close button in the upper right corner of the browser. Or, if an exception occurs, click the Stop Debugging button in the Debug toolbar or press Shift+F5.

How to fix syntax errors

1. If any errors are detected when the project is compiled, an Error List window is opened and a list of errors is displayed along with information about each error. To display the source code that caused an error, double-click on the error in the Error List window.
   
2. Syntax errors are highlighted in the Code Editor window with a wavy underline. If a bar appears at the right end of the underline, you can place the mouse pointer over the bar, then over the smart tag that’s displayed, and click the drop-down arrow to display the Error Correction Options window. 
    
3. To correct an error, you can click the appropriate “Replace…” link in the Error Correction Options window, or you can enter the correction yourself.

--------------------------------------------Figure 2-18   How to run a web site with the built-in development server

Debugging button in the Debug toolbar or using the Debug->Stop Debugging command. Then, you can fix the problem and test again.

In chapter 4, you’ll learn all of the debugging skills that you’ll need for more complex applications. For simple applications, though, you should be able to get by with just the skills you have right now.

How to review the HTML that’s sent to the browser

To view the HTML for a page that’s displayed in a browser, you can use the Source command in your browser’s View menu. To illustrate, figure 2-19 presents the HTML that’s sent back to the browser after I selected a new value from the drop-down list, entered new values into the text boxes, and clicked the Calculate button. Although you’ll rarely need to view this code, it does give you a better idea of what’s going on behind the scenes.

First, you’ll see that this code doesn’t include any asp tags. That’s because these tags are rendered to standard HTML so the controls they represent can be displayed in the browser. For instance, the asp tag for the drop-down list in the first row of the table has been converted to an HTML select tag.

Second, you can see that the view state data is stored in a hidden input field named _VIEWSTATE. Here, the value of this field is encrypted so you can’t read it. Because the data in view state is passed to and from the browser automatically, you don’t have to handle the passing of this data in your code.

Third, you can see that the data that I selected from the drop-down list is included in the HTML. Although you can’t see it, the data that was entered into the text boxes is included as well. This illustrates that you don’t need view state to save the information that’s entered by the user. Instead, view state is used to maintain the state of properties that have been set by code. For example, it’s used to maintain the values that are loaded into the drop-down list the first time the user requests the form.

Keep in mind that this HTML is generated automatically by ASP.NET, so you don’t have to worry about it. You just develop the application by using Visual Studio in the way I’ve just described, and the rest of the work is done for you.

The HTML for the Future Value form after a post back

Description

1. To view the HTML for a page, use the View->Source command in the browser’s menu.
   
2. The HTML that the browser receives consists entirely of standard HTML tags because all of the ASP.NET tags are converted to standard HTML when the page is rendered. 
    
3. View state data is stored in a hidden input field within the HTML. This data is encrypted so you can’t read it. 
    
4. If the page contains validation controls and client scripting is enabled for those controls, the HTML for the page contains script to perform the validation on the client if the client supports DHTML. 
    
5. Values that the user enters into a page are returned to the browser as part of the HTML for the page.

--------------------------------------------Figure 2-19   How to review the HTML that’s sent to the browser

Perspective

The purpose of this chapter has been to teach you the basic skills for creating one-page ASP.NET applications with Visual Studio. If you’ve already used Visual Studio and Visual Basic to develop Windows applications, you shouldn’t have any trouble mastering these skills. You just need to get used to HTML and the properties and events for web server controls and validation controls.

Terms  

Exercise 2-1  Build the Future Value application

This exercise guides you through the development of the Future Value application that’s presented in this chapter.

Start, close, and open the application

1. Start a new file-system web site as shown in figure 2-1 named FutureValue in the C:\ASP.NET 3.5 VB directory.
   
2. Add a folder named Images to your project and add the Murach logo to it, as shown in figure 2-3. You can find the logo in the Images folder of the C:\ASP.NET 3.5 VB\Ch01Cart directory. 
    
3. Close the web site using the technique in figure 2-4, and reopen it using one of the three techniques in that figure. Then, switch to Design view.
   
   Use Design view to build the form
   
4. Drag the logo from the Images folder in the Solution Explorer to the top of the web form. When the Accessibility Properties dialog box is displayed, enter “Murach” for the alternate text but leave the long description blank. Then, use the techniques in figure 2-6 to enter and format the text for the heading in figure 2-5.
   
5. Use the techniques in figure 2-7 to add and format a table that provides for the six rows shown in figure 2-5. Then, add the text shown in figure 2-5 to the first four rows in the first column of the table. 
    
6. Use the techniques in figure 2-8 to add the drop-down list, text boxes, label, and buttons shown in figure 2-5 to the table. Then, adjust the size of the columns, rows, and controls, so the table looks the way it does in figure 2-5. 
    
7. Use the techniques of figure 2-8 and the summary in figure 2-9 to set the properties of the controls so they look like the ones in figure 2-5.
   
   Use Source view to modify the aspx code
   
8. Switch to Source view, and change the title of the form to Future Value using the technique of figure 2-10.
   
9. Press F5 to run the application. When the dialog box asks whether you want to modify the web.config file to enable debugging, click the OK button. Now, test to see what works by clicking on the controls. Also, check to make sure that the web form looks the way it’s supposed to when it’s displayed in the default browser. 
    
10. To end the application, click the Close button in the upper right corner of the browser. Then, switch to Split view, adjust the design of the form as necessary, and test it again.
    
    Add the validation controls
    
11. Add the validation controls for the interest rate and years text boxes as shown in figures 2-13 and 2-14.
    
12. Press F5 to run the application. Then, test the field validators by leaving fields blank or entering invalid data. The validation will be done when the focus leaves a text box or when you click on a button. 
     
13. To end the application, click the browser’s Close button. Then, fix any problems and test again. If, for example, validation is done when you click the Clear button, you can fix that by setting its CausesValidation property to False.
    
    Add the Visual Basic code and test as you go
    
14. Use one of the techniques in figure 2-15 to open the Code Editor for the form. Then, use the tab at the top of the window to switch to Design view.
    
15. Double-click on a blank portion of the form to switch to the Code Editor and start a procedure for the Load event. Next, write the code for this procedure, which should be like the code in figure 2-17. Then, press F5 to compile and test this procedure. If any errors are detected as you enter code or when the application is compiled, use the techniques in figure 2-18 to fix them.
      
16. Switch back to Design view, and double-click on the Clear button to start a procedure for the Click event of that button. Next, write the code for this procedure, which should be like the code in figure 2-17. Then, compile and test this procedure, and fix any errors.
    
17. Write the FutureValue function from scratch as shown in figure 2-17. After you enter the signature for the function, Visual Studio should add the End Function line that ends the function.  
    
18. Switch back to Design view, and double-click on the Calculate button to start a procedure for the Click event of that button. Next, write the code for this procedure, which should use the FutureValue function and be like the code in figure 2-17. Then, compile and test, and fix any errors. 
    
    Do more testing and experimenting
    
19. Set the EnableViewState property of the drop-down list to False, and test the application to see what happens. When an exception occurs, click the Stop Debugging button in the Debugging toolbar. Then, reset the property. 
     
20. Set the EnableClientScript property for the validators of the first text box to False so this validation will only be done on the server. Then, test the application to make sure that the validation still works.  
    
21. Run the application again, and use the technique in figure 2-19 to review the HTML that’s sent to the browser. When you’re through, close the project.