BUILDING A WEB APPLICATION 1021

meant for people who are new to ASP programming, and it should help you understand how clients interact with servers. The interaction model is totally different from the one used in Windows applications, and it’s essential to understand it before you start using the visual tools of Visual Studio to build ASP.NET applications.

Building a Web Application

In this section, you’ll build a Web application similar to the RegisterForm application of the preceding section. The first difference you will note between the two applications is that the new one displays the results on the same page. Typical Web applications don’t let you display new information on the same page that submitted the data to the server (the reason being that it’s much easier to create a new page, rather than reconstruct the page that submitted the request). ASP.NET makes it very easy to display the results of the processing on the same page that invoked the script. The control on which the results are displayed is a Label control, which is initially empty.

Start a new ASP.NET Web Application and name it Register. The project will be created in the Register folder under the Web server’s root folder, which is c:\Inetpub\wwwroot by default. A Web project isn’t compiled to an EXE file that can be executed by double-clicking its icon. You must start Internet Explorer, connect to the Web server where the Web application resides, and open its startup page, which is a file with extension ASPX.

Several items will be added to the Solution Explorer automatically, one of them being the WebForm1 item. This is the equivalent of a Windows form, and it’s the page users will see on their browser. The main pane of the IDE shows the WebForm1.aspx form in design view. You can open the Toolbox and select controls to place on the form. The Toolbox contains two tabs with controls you can use on a Web page: the Web Controls tab and the HTML Controls tab. The Web controls are a superset of the HTML controls, and you’ll hardly ever use the plain HTML controls. You can actually turn any HTML control into a Web control by right-clicking the instance of the control on the form and selecting the Run At Server option.

Designing a WebForm is no different than designing a Windows form: just place controls on the form, size and align them, and set their properties, and you have built the Web application’s user interface. The Web controls don’t have as many properties as their Windows counterparts, but they have many more properties than the HTML controls. One property that’s common to all Web controls is the EnableViewState property, which is True by default. This property determines whether the control’s state is automatically saved during round trips to the server. Leave this property to True so that each time the page is returned to the client, the controls will retain their values. For example, if the user forgets to supply a value to a required field, don’t make them retype everything. The controls will maintain their values, and the user can edit the one that’s in error.

When you work with Web forms, the Toolbox displays the controls of the Web Controls tab. These are the controls you can use on a Web form. In addition to the Web controls, you can also place HTML controls on the form, but there’s no good reason to do so. Web controls provide more properties and are easier to program. Add the appropriate controls to create the page of Figure 23.6. At the bottom of the page is a Label control, where we’ll display the data entered by the user on the form. The Label control is invisible the first time the page is opened, because it has the same background color as the page. You can also set its Visible property to False and turn it back on when you want to display something on the control.

1022 Chapter 23 INTRODUCTION TO WEB PROGRAMMING

Figure 23.6

This page is similar to the one shown in Figure 23.4, only it was designed with Visual Studio.

When you design a page visually in the IDE, you see a grid and you can align the controls to the grid. The page has a property called pageLayout, which has two settings: GridLayout and FlowLayout. The default setting allows you to position controls anywhere on the form and use the alignment tools of the Format menu. The FlowLayout setting takes you back to plain HTML, where controls are placed next to one another. If you switch to the FlowLayout mode, you won’t be able to precisely position your controls on the form.

Now we must add some code behind the Register button. When this button is clicked, the values entered by the user on the form are submitted to the server. All you have to do is read these values and display them on the Label control at the bottom of the form (the Values label). Our application won’t process the values, but once you know how to read them, you can store them in a database, prepare a new page with the specified settings, and so on. Double-click the button on the form and you will see the declaration of the Click event:

Private Sub Button1_Click(ByVal sender As System.Object, _

ByVal e As System.EventArgs) Handles Button1.Click

End Sub

This is clearly VB code. With ASP.NET, the code running on the server is no longer VBScript; you can write VB code, which will be compiled and executed as needed. The Click event of the Button1 control isn’t fired when the user clicks the button on his browser. It will be fired when a request from this page arrives to the server. ASP.NET simply lets you program the Click event of the Button Web

BUILDING A WEB APPLICATION 1023

control as if it were a Windows Button control. Insert the statements of Listing 23.4 in the Click event handler, which will display the parameter values on a Label control. The Label control is another Web control that can render HTML code.

Listing 23.4: Displaying the Parameters Passed to the WebForm

Private Sub Button1_Click(ByVal sender As System.Object, _

ByVal e As System.EventArgs) Handles Button1.Click Values.Text = “LAST NAME “ & txtLName.Text

Values.Text = Values.Text & “<BR>” & “FIRST NAME “ & txtFName.Text Values.Text = Values.Text & “<BR>” & “EMAIL “ & txtEMail.Text Values.Text = Values.Text & “<BR>” & “COMPUTER “ & _

radioHardware.SelectedItem.ToString Values.Text = Values.Text & “<BR>” & “BROWSER “ & _

radioBrowser.SelectedItem.ToString Dim i As Integer

Values.Text = Values.Text & “<BR><B>Preferences</B>” For i = 0 To chkView.Items.Count - 1

If chkView.Items(i).Selected Then

Values.Text = Values.Text & “<BR>” & chkView.Items(i).Value.ToString End If

Next End Sub

As you can see, this is straight Visual Basic (and it could have been any other language running in the Visual Studio environment, from C# to COBOL and FORTRAN). You’re programming Web pages as if they were Windows forms. Of course, this is an illusion. Let’s see what’s sent down to the client. Press F5 to run the application, and Internet Explorer will pop up showing the page you designed. Before filling out the form, open the View menu and select Source. The page’s source code will be displayed on Notepad. I will not repeat the code here, but it’s plain HTML code that describes the contents of the page. The first TextBox control is inserted on the page with the following tag:

<INPUT NAME=”txtLast” TYPE=”text” ID=”txtLast” TABINDEX=”1” STYLE=”z-index: 102; left: 120px; position: absolute; top: 12px” />

The TABINDEX attribute determines the position of the control in the Tab order (some browsers may not interpret this attribute) and the STYLE attribute determines the dimensions and position of the control.

Enter values on the controls and click the Register button. The form will be submitted to the server, where the VB code will prepare the new page. The new page isn’t created from scratch. The code will send out the same page, but this time the Label control at the bottom of the form will contain the values submitted to the server.

If you view the new page’s source code, the tag of the first TextBox has become:

<INPUT NAME=”txtLast” TYPE=”text” VALUE=”Doe” ID=”txtLast” TABINDEX=”1” STYLE=”z-index: 102; left: 120px; position: absolute; top: 12px” />

1024 Chapter 23 INTRODUCTION TO WEB PROGRAMMING

The only difference is that the VALUE attribute was added. This is what the EnableViewState property does: it causes the various controls to retain their values when a page is updated. If you refresh the page by pressing F5, the controls will be reset to their initial values.

Interacting with a Web Application

Here’s what goes on when a Web application is executed. The first time a user connects to the server and requests the application’s startup Web page, the VB code is compiled—that’s why it takes several seconds for the page to be displayed. The compilation won’t take place in subsequent requests. VB generates a new class that handles the interaction with the browser. This class reads the parameter values sent by the browser along with the request, processes them, and emits HTML code, which is sent to the client. You can create a new page and send it to the client, or you can change the values of the controls on the same page. This model of client/server interaction is closer to a Windows application. With ASP, it was easier to generate a new page with the results, rather than add a few more elements on the same page. The reason was that programmers had to generate all the elements of the current page from within their script and then add the new elements—and of course, it was simpler to create a new page with the new elements only. If this were a Windows application, you wouldn’t display the results on a different form. Why do it with Web applications? It’s a subtle departure from the traditional Web model, and it doesn’t cost you anything. It’s all done by the class that handles the request, and this class is generated and compiled on-the-fly; it doesn’t even appear in the Solution Explorer.

Building a Web application is, in many ways, similar to building a Windows application. Of course, you should be aware of the limitations of the Web and not expect that a Web application will have the same capabilities and responsiveness as a Windows application. You should also keep in mind that the Web application’s code runs on the server and “sees” the values of the controls only when the client submits them (that is, when the user clicks a button that submits the form to the server). While the form is open on the client’s browser, the application doesn’t even execute on the server. This is probably the most important difference between Web and Windows applications: the Web application isn’t running at all times on the server. It starts every time the client submits a request to the server. It runs for a second (or many seconds), generates a new page, and then terminates. It doesn’t remain inactive; it simply dies when it’s done. And this raises the following question: what if we want to maintain the values of some variables between consecutive invocations of the server application?

This is a good point at which to overview the structure of Web applications. A Web application consists of a Web form (or multiple Web forms, as you will soon see). Each Web form consists of HTML tags and VB statements. The HTML part of the page is transmitted as is to the client, where it’s rendered by the browser. In the context of this book, the HTML part is the form on which users enter data—I’m assuming another member of the team is responsible for generating a pretty page.

Another way to look at a Web application is to think of it as a Windows application written in VB, which is executing in the browser. The application’s code is executed on the server, of course, but the application’s interface is displayed on the browser. This is the very essence of a Web application: a visually rich application that appears to be executing in the browser.

Why execute an application in the environment of the browser? First, it’s the simplest type of application to install—you don’t install it. To use it, you just enter a URL in the browser’s Address