Computing & Information Systems    Department Search CIS Site      Tutorials

## A Web App with a Calculation Procedure

### The Goals for this Example

One goal is to review items that you have already learned, such as how to use text boxes and buttons. Another is to see how to write a sub procedure in Visual Basic .NET 2005. A few additional items are introduced as well, such as how program code can make an item on a form visible or invisible, how to read a stack trace to assist in handling a run-time error, and how to handle an exception in your code.

### Creating the Example

#### What the App Should Do

 We will create a web app that translates any reasonable binary number entered by the user into its decimal equivalent. Note that the initial view of the web app shows an input box for a binary number, but does not show the output box for the corresponding decimal number (nor its label). Once the Convert button is clicked, the output view of the web app shows all that was on the screen before plus the output information.

#### The Click Handler

 Double click the Convert button on your form. This will give you the outline of a procedure that will run whenever the user clicks on this button. Add your code so that the section between the lines containing `Sub` and `End Sub`, the beginning and end of the procedure, are as follows:
 `````` Dim DecimalNumber As Int32 DecimalLabel.Visible = True DecimalTextBox.Visible = True BinaryToDecimal(BinaryTextBox.Text, DecimalNumber) DecimalTextBox.Text = DecimalNumber.ToString ``````

 To see how this looks on screen, you can go to this picture of the code in the Visual Studio editor. In the procedure there is one local variable, DecimalNumber, an integer in which we place the answer. Note how we make the text box and label visible: by assigning True into the Visible field of each item. (In a similar way, you can write code that makes the Visible field False.) The BinaryToDecimal line is a procedure call, a call of a procedure that you will write below. (If you look carefully at the last image, you will notice a blue underlining of this procedure name. This indicates that Visual Studio could not find any definition for this procedure. That's because we have not yet written it.) Passed in as a parameter to this procedure is the text from the first text box. The second parameter is used to return the answer, the decimal version of the number in question. This decimal number is then converted to a string which is placed into the text box that displays our answer.

 As mentioned above, you need to write the BinaryToDecimal procedure. This picture of the code in the Visual Studio editor shows this procedure. The exact code for this procedure is as follows:
 `````` Private Sub BinaryToDecimal(ByVal BinNum As String, ByRef DecNum As Int32) Dim k As Int32 DecNum = 0 For k = 0 To BinNum.Length - 1 DecNum = 2 * DecNum If BinNum.Substring(k, 1) = "1" Then DecNum = DecNum + 1 End If Next End Sub ``````

 You can copy the above code and paste it into the editor in Visual Studio. Copy it after the Button1_Click procedure and before the End Class line. The algorithm used to convert from binary to decimal is known as Horner's method. Although this algorithm will not be explained here, more information can be found in a number of books on algorithms. We simply examine here some of the coding used. Obviously the BinNum parameter is the string of 1's and 0's that we want to convert to decimal form and the DecNum parameter is the resulting decimal number as an integer (not a string). The ByVal on the first parameter indicates that the value of the string used in the procedure call is copied into the BinNum parameter. Thus, the BinaryToDecimal procedure uses a copy of the original bit string. The second parameter is marked as ByRef to indicate that it is a reference parameter, one in which an answer can be returned. There is an integer local variable k which is used as a loop control variable. The second parameter, the one that will hold the answer, is initialized to 0. The For..Next loop takes us through the bits in the input string one by one, from left to right. Notice how it looks up the Length of the string. Each time around the loop, the value of DecNum is multiplied by 2 and stored back into DecNum. To look at the current bit in the string, the substring starting at index k and having length 1 is examined. This yields a string that holds a single character, which is then compared to a string containing just 1. If a match for a 1 is found, DecNum has the number 1 added to it. Note that you can create procedures of your own whenever you have useful chunks of code to package up.

 Click on the Save All button in Visual Studio or use File, Save All. Then use Build, Build Bits (or whatever you named your application). If the build succeeds, the Output window will give you a message to that effect. If not, fix any problems.

### Testing and Debugging The App

#### Finding Errors

 Use Debug, Start Without Debugging to run your web app locally. Put a binary number into the first text box and click the Convert button to see if your app works correctly. For example, the input of 1101 should produce 13. If the app does not produce the desired results, check your code carefully to see that it matches what was given above. If your app works well for small numbers, try larger ones. This picture with a large input number shows everything working fine. However, by making the input a little larger, we get a runtime error shown in the browser. This error message clearly tells you that your code had an unhandled exception for overflow on some arithmetic operation, probably the one shown in red. Essentially we tried to put something too big into DecNum. Note the stack trace at the bottom, showing what line of code called what procedure, which called what other procedure, and so on when the error occurred. The last procedure called is the one on top, BinaryToDecimal in this case. The code that caused the overflow, that line in red, is within the BinaryToDecimal procedure. Unfortunately, there is no easy way to fix the problem so that the application can handle a binary number of any length. Sooner or later we will overflow any number variable. However, we can adjust our code so that it handles the overflow situation more gracefully, as the next section explains.

#### Handling an Exception

 Start by adding a red error label to your form as shown in this picture. Have the text of the label read "Overflow error: the binary number was too large to handle." Set the ID of this label to ErrorLabel so that we can easily refer to it later in our code. Change the font of the label to Medium, the foreground color to Red, and make the Visible property False. We don't want this error label to appear unless an overflow error occurs. Then go to your corresponding code file and change it as shown in this view of Visual Studio. Note that, besides changing the code, we added a comment stating what the BinaryToDecimal procedure does. Here is the complete section of code after the changes:
 `````` Private Sub Button1_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) _ Handles Button1.Click Dim DecimalNumber As Int32 DecimalLabel.Visible = True DecimalTextBox.Visible = True ErrorLabel.Visible = False BinaryToDecimal(BinaryTextBox.Text, DecimalNumber) DecimalTextBox.Text = DecimalNumber.ToString End Sub ' Uses Horner's method to convert the binary number contained in the string ' BinNum to the decimal equivalent, DecNum. Private Sub BinaryToDecimal(ByVal BinNum As String, ByRef DecNum As Int32) Dim k As Int32 DecNum = 0 Try For k = 0 To BinNum.Length - 1 DecNum = 2 * DecNum If BinNum.Substring(k, 1) = "1" Then DecNum = DecNum + 1 End If Next Catch exception As OverflowException DecNum = 0 ErrorLabel.Visible = True End Try End Sub ``````

 Note that the Button1_Click procedure sets the Visible property of the above label to false. This is to guarantee that the error label starts as initially invisible when the click handler runs. Even though the Visible property of the label on the form is False, the label could be made visible later by an overflow error. If the user changes the input and clicks on the Convert button, the error label should go away (assuming that the input is now short enough). This line of code makes the error label go away in this situation. In the BinaryToDecimal function, a Try...Catch..End Try construct has been added around the section of code that does the arithmetic. If an overflow exception is caught, the DecNum answer is set to 0 and the error label is made visible. Save all of your files, build the project, and then try Debug, Start Without Debugging. Make sure that the error label appears for really long binary numbers but not for shorter ones.

#### Input Validation

 You might think that we are done now. However, we should also check other types of bad input. For example, try typing 1 1 (with a space between the two 1's) into the text box for the binary number. What answer did you get? Yes, 5, as shown here. Surely 11 is the binary for 3, not 5. However, the space got interpreted as a zero because of the way we checked for single character substrings containing 1 in our conversion code above. What other bad input could we give? Try something like 1AA1. This also gives 9 as the answer, as the A is also interpreted as 0. You might also try an empty string in that binary number text box. Sure, it converts this to 0. This is somewhat reasonable, though there is really no input number. We might want to force the user to enter something into the input box. Obviously, we need a way to validate the user input so as to ensure that only reasonable binary numbers are entered into this text box. We might also want to ensure that the input box is not empty. Happily, Visual Studio provides various types of validators to handle this type of thing.

#### Using a Regular Expression Validator

 A regular expression validator can be used to verify that the data in our input text box fits a certain pattern. In this case the pattern is all 1's and 0's. Drag a regular expression validator from the Validation section of the Toolbox onto your form, just to the right of the text box for the binary number. Your form should then look like this. Change the ErrorMessage property for this validator to "Error: use only 0's and 1's". Change the font size to Medium. Click in the ControlToValidate field and select BinaryTextBox from the drop down list. This is how you specify which text box this validator will check. The only other property that we need to supply is the ValidationExpression. The way to write any number of 0's and 1's is [01]* using what is called a regular expression. The regular expression can be typed into the ValidationExpression field in Properties or you can click on the ... button to see sample regular expressions for zip codes, phone numbers, etc. The dialog box brought up by this button also lets you type in your own regular expression in the bottom text box. Be careful not to enter any spaces as part of your regular expression as this will cause it to not work correctly. You can find more information about regular expressions by using Visual Studio's help system. Click on Help, Search. Then type "regular expression" as the item for which to search. Although some of the matches will not be helpful, look for ones that refer to Visual Basic or .NET itself. In fact, you can limit the search results by specifying Visual Basic in the language drop-down box. Save your work, build the project, and then try it out in a browser. Now if you enter 1AA1 or other bad data as input, the validator's error message should appear, but legitimate binary numbers should work fine.

#### Using a Required Field Validator

 Drag a RequiredFieldValidator from the Toolbox to your form. Place it just above the regular expression validator. Change the ErrorMessage property for this validator to "Error: you must supply input". Change the font size to Medium. Change the ControlToValidate field to BinaryTextBox. This tells the validator to be sure that there is data in this text box. Here is a picture of what we have at this point. Save your work, build the project, and try it out in your browser. Verify that the new error message appears if you leave the binary number box empty when you click the Convert button. Option: Note that you can put a ValidationSummary control on your form and make the text in your required field validator and regular expression validator to not be visible. The Validation Summary control will display the error messages produced from any of these validators that are on the form.

### Alternate Design

#### Postback or Not Postback?

 It is sometimes worthwhile to look at alternate ways to design a program solution. In this case, instead of using a click handler we could have a section of code to handle what is called a postback. A postback happens when a user submits data. This will happen automatically when the user clicks on a submit button unless there is a click handler that does something else. When the web page is initially loaded the PostBack property is False. After a postback, the PostBack property becomes True. Thus we can use the PostBack property in our app to decide whether or not to calculate the decimal equivalent of a binary number. Here is a picture of the revised code, which is also shown below:
 `````` Private Sub Page_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) _ Handles MyBase.Load 'Put user code to initialize the page here DecimalLabel.Visible = True DecimalTextBox.Visible = True ErrorLabel.Visible = False If IsPostBack Then Dim DecimalNumber As Int32 BinaryToDecimal(BinaryTextBox.Text, DecimalNumber) DecimalTextBox.Text = DecimalNumber.ToString End If End Sub ' Uses Horner's method to convert the binary number contained in the string ' BinNum to the decimal equivalent, DecNum. Private Sub BinaryToDecimal(ByVal BinNum As String, ByRef DecNum As Int32) Dim k As Int32 DecNum = 0 Try For k = 0 To BinNum.Length - 1 DecNum = 2 * DecNum If BinNum.Substring(k, 1) = "1" Then DecNum = DecNum + 1 End If Next Catch exception As OverflowException DecNum = 0 ErrorLabel.Visible = True End Try End Sub ``````

 Note that the BinaryToDecimal procedure is unchanged, but the click handler procedure is now gone. Instead we have the Page_Load procedure take over its job. In all cases, whether we have a postback or not, Page_Load sets the various controls to be visible or not as desired. If we have a postback, Page_Load also calls upon BinaryToDecimal to figure out the decimal equivalent to the given binary number and then displays the answer in the appropriate text box. If you want to try this coding alternative, you can either change your existing project's code or you can copy your project folder with My Computer. Then open the copy and change the code in it. After changing the code, save your work, build the project, and try running the revised app. It should behave in the same way as the previous version of this project, except that we always have the label and text box for the decimal number visible.

#### Back to the main page for ASP .NET Web Apps

Author: Br. David Carlson
Last updated: October 07, 2008
Disclaimer