Building a Web Form in ASP.NET
(Page 1 of 5 )
Before you can build your first ASP.NET application, there are certain skills you need to master. This article, the second of three parts, gets you started with building a web form. It is excerpted from the book
Murach's ASP.NET 2.0 Web Programming with VB2005, written by Doug Lowe (Murach, 2006; ISBN: 1890774324).
How to use Design view to build a web form
Now that you know how to start, open, and close a web site, you’re ready to learn how to build a web form. To start, I’ll show you the web form that you’re going to build. Then, I’ll show you how to build it.
The design of the Future Value form
Figure 2-5 presents the design of a Future Value web form that calculates the future value of a fixed monthly investment. This form has enough features to give you a realistic idea of what’s involved in the development of a form, but it’s so simple that you won’t be overwhelmed by detail. In this case, the entire application consists of this single form.
If you study the form, you can see that it contains six web server controls. These controls are derived from ASP.NET classes, and they have special features that make them suitable for web applications. This form contains one drop-down list, two text boxes, one label, and two buttons. These controls are analogous to the ones that you use for Windows applications.
When you click on a button in a web form, it automatically starts a postback to the server. When you click the Calculate button, for example, the application calculates the future value based on the values in the drop-down list and two text boxes. The result is displayed in the label when the form is returned to the browser. When you click on the Clear button, the text boxes and label are cleared and the value in the drop-down list is reset to 50.
In contrast to the web server controls, the image at the top of this page (the Murach logo) is stored in an HTML server control. This is a second type of server control that you can use on a web form. The third type is a validation control, which you’ll learn about later in this chapter.
The arrangement of the web server controls on this web form is done through an HTML table. Above the table, a heading has been entered and formatted. In the first column of the first four rows of the table, text has been entered that describes the data in the second column. The fifth row of the table contains no text or controls. And the six row contains the two buttons.
In the rest of this chapter, you’ll learn how to build this web form, how to add validation controls to it, and how to write the code for its code-behind file. Then, you’ll learn how to test a web application. At the end of this chapter, you’ll find exercises that will walk you through the development of this Future Value application and help you experiment with other features of Visual Studio.
Throughout this chapter, please note that the term page is sometimes used to refer to a web form. That’s because a web form represents a page that’s sent to a browser.
The Future Value web form in a browser
Figure 2-5. The design of the Future Value form
The six web server controls used by the Future Value form
- The drop-down list can be used to select a monthly investment value ranging from 50 to 500.
- The two text boxes are used to enter values for the annual interest rate and the number of years that the monthly payments will be made.
- The label is used to display the future value that is calculated.
- The Calculate and Clear buttons are used to post the form back to the server and initiate the processing that needs to be done.
Description
- Besides the web server controls, the Future Value form uses an HTML server control to display the image at the top of the form, and it uses text to display the heading below the image. It also uses an HTML table to align the text and web server controls below the image and heading.
- When the user clicks on the Calculate button, the future value is calculated based on the three user entries and the results are displayed in the label control.
- When the user clicks on the Clear button, the two text boxes and the label are cleared and the drop-down list is reset to a value of 50.
- To end the application, the user can click the Close button in the upper right corner of the browser window.
Next: How to use flow layout >>
More ASP.NET Articles
More By Murach Publishing
|
 This article is excerpted from the book Murach's ASP.NET 2.0 Web Programming with VB2005, written by Doug Lowe (Murach, 2006; ISBN: 1890774324). Check it out today at your favorite bookstore. Buy this book now.
|
|
/ 35 
