How to Build a Web Form for a One-Page Web Application
(Page 1 of 4 )
Welcome to the second part of a five-part article series on developing a one-page web application with ASP.NET. In this part you'll learn how to add a table and server controls to a form, and a lot more. This article is an excerpt from chapter two of
Murach's ASP.NET 3.5 Web Programming with VB 2008, written by Anne Boehm (Murach, 2008; ISBN: 1890774472).
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 defined by a standard HTML element. Because you can’t refer to standard HTML elements in code, you won’t typically use them in web applications. Like the element in this application, though, they can occasionally be useful.
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 validate the data the user enters in the form, 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
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 a standard HTML element 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.
--------------------------------------------Figure 2-5 The design of the Future Value form
Next: How to use flow layout >>
More ASP.NET Articles
More By Murach Publishing
|
 This article is an excerpt from chapter two of Murach's ASP.NET 3.5 Web Programming with VB 2008, written by Anne Boehm (Murach, 2008; ISBN: 1890774472). Check it out today at your favorite bookstore. Buy this book now.
|
|
