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.
This exercise guides you through the development of the Future Value application that’s presented in this chapter.
Start a new file-system web site as shown in figure 2-1 named FutureValue in the C:\ASP.NET 3.5 VB directory.
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.
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
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.
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.
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.
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
Switch to Source view, and change the title of the form to Future Value using the technique of figure 2-10.
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.
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
Add the validation controls for the interest rate and years text boxes as shown in figures 2-13 and 2-14.
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.
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
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.
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.
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.
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.
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
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.
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.
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.
| DISCLAIMER: The content provided in this article is not warranted or guaranteed by Developer Shed, Inc. The content provided is intended for entertainment and/or educational purposes in order to introduce to the reader key ideas, concepts, and/or product reviews. As such it is incumbent upon the reader to employ real-world tactics for security and implementation of best practices. We are not liable for any negative consequences that may result from implementing any information covered in our articles or tutorials. If this is a hardware review, it is not recommended to open and/or modify your hardware. |
/ 3 
