CIS Logo SVC Logo

   Computing & Information Systems
   Department

 

Schoology Facebook        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.

Familiar Items First

  • Refer back to the directions for the first web application as needed throughout the construction of this new web app.
  • Begin as usual by creating a new Visual Basic project of type ASP .NET web application. Choose a suitable location for this project, such as your M drive, and name the project Bits. See this image of the New Project window to guide you in this step.
  • Rename your Default.aspx web form to Bits.aspx by changing the name in Solution Explorer.
  • Make sure that absolute positioning is in use. Look under Layout, Position, Auto-position Options. If you can't find this, make sure that the Show All Settings box is checked.
  • At the same place, you might want to check the box that says "Snap pixel-based positions and sizes to the following settings:" as this forces the controls to fit to grid lines a certain number of pixels apart. This makes it easier to line them up.
  • Change the title of the project to "Binary to Digital Converter".
  • Then add items to the resulting new web form to produce something close to this image of the completed web form .
  • Note that this uses familiar items such as labels, text boxes, images, etc.
  • Although the image at the top of the form is not necessary, if you want to include it you can either copy it from here or if you are in CS 305 at Saint Vincent College, you can copy cis.jpg in My Computer from the Images folder in your course network drive and then paste it into Solution Explorer by right clicking on the project and selecting Paste. Of course, you still need to add an image control to your form and set its ImageUrl to point to cis.jpg.
  • Adjust the font size, foreground color, etc. for the labels to achieve the effect shown in the completed web form above (or something similar that is to your own liking).
  • Under Properties, change the IDs of the first and second text boxes to BinaryTextBox and DecimalTextBox respectively.
  • In the same way, change the ID of the label just above the second text box to DecimalLabel. We do this because we want an easy way to refer to this label in the code that we will write later. The IDs on the other labels do not matter as we will not reference them in our code.
  • Change the Visible property for the second text box and its label to false so that we will not initially see these 2 items.
  • Also change the ReadOnly property for this second text box to true so that the user cannot change what appears in it.
  • Change the properties for the button so that the background color is green, the foreground color is yellow, and the font uses bold and italics. You can also experiment with the border style and color if you like.
  • Add a hyperlink for the standard disclaimer at the bottom of your form. See the directions used in our first web app.
  • Save your work so far by using File, Save All.

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.

Writing Your Own Procedure


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.

Build Your App

  • 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.

Publishing The Web App

  • You may wish to publish this project to a web server, as in the previous web app.
  • Once the app is working, use Build, Publish. Choose to publish All Project Files to be sure that the image gets included. In CS 305 at Saint Vincent College, you can publish to your W drive, which is your web folder on the cis2.stvincent.edu server. Click on the Create Folder button to make a new folder to hold your web app. Use a name such as Bits for the folder.
  • Remember that you need to ask your web server administrator to convert your project folder (the one published to the web server) to an IIS web application.
  • Try looking at your web app by going to the appropriate URL for the above web page. For the example described above, the correct URL would be http://cis2.stvincent.edu/studentj/Bits/Bits.aspx, where we assume that your username (and hence your web folder) on cis2.stvincent.edu is studentj and that your form is named Bits.aspx.

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