Web Forms


Visual Basic .NET Unleashed
By Paul Kimmel
Table of Contents
Chapter 19.  ASP.NET Web Programming

Web Forms

Web Forms are one of the new, exciting features in Microsoft's .NET initiative. Web Forms are instances of the System.Web.UI.Page class. The benefit is that Web Forms support WYSIWYG user interface design and your favorite .NET programming language as the code behind the form. The result is that programming in ASP.NET is a lot like programming Windows Forms.

ASP.NET takes the design view in the .aspx, combined with the code behind the form in the .aspx.vb module, and automatically renders HTML. The automatically rendered HTML is browser- agnostic for styles and layout, or you can target a specific browser and version.

Web Forms Designer

The Web Forms Designer has two views: the design view and the raw HTML format view. You can toggle between views by clicking the tabs at the bottom of the designer (see Figure 19.1).

Figure 19.1. Switch between the WYSIWYG design view and the raw HTML format.


You can perform as much design as you want in either format. For Visual Basic programmers, the design view may be more intuitive than the HTML view, but in the latter you can manually enter code in raw HTML format. Alternatively, the .aspx file may contain XML, WML, HTML, and ECMAScript (JScript and JavaScript). Thus far I have found that a combination of the design and HTML views allows me to achieve the greatest ease of use and flexibility.

Choosing Grid or Flow Control Mode

You can toggle the Page.PageLayout property between GridLayout and FlowLayout. The GridLayout will be familiar to Visual Basic developers. GridLayout paints dots on the page during design mode, making it easy to place controls in precise locations. Although you can place controls anywhere on a page by dragging and dropping in GridLayout mode, you cannot directly enter text.


Page properties are modified by selecting the DOCUMENT object in the Properties window.

If you want to directly enter text on the page, you need to switch to FlowLayout mode. In FlowLayout mode you can type text directly on the page, but any Web Forms controls or HTML controls will be left-justified.

You can switch back and forth between GridLayout and FlowLayout at any time during design. As an alternative to switching to FlowLayout mode to add text to a page, you can elect to use a Web Forms Label control to place text on a page.

Adding a Web Forms Control to a Web Form

Listing 19.1 contains the obligatory Hello World example application, which is available on this book's Web site. The HelloAspDotNet.sln contains a single Web Forms button. When the button is clicked, text is written to the page (see Figure 19.2).

Figure 19.2. HelloAspDotNet. sln demonstrates basic Web Forms design.


To create the Web application shown in Figure 19.2, follow these steps:

  1. Ensure that you have IIS 5.0 or greater available on your PC or network. You will need IIS 5.0 running to create and run the Web application.

  2. Run Visual Studio .NET. Choose File, New, Project. In the New Project dialog box, select ASP.NET Web Application. The application will be created on your PC's IIS server by default (see Figure 19.3).

    Figure 19.3. Creating an ASP.NET Web application.


  3. Click OK. An ASP.NET project will be created in your root directory. For example, if IIS is running on your PC, the default directory will be c:\ inetpub\ wwwroot \ [ web application ], where web application is the folder containing your ASP.NET application files.

  4. In the toolbox, click the Web Forms tab and drag a Button control to the design view of the .aspx page.

Web Forms Code Behind the Form

Just as you would when designing a Windows application, you can double-click controls in the Web Forms designer to generate event handlers. We want to add code that displays the "Hello ASP.NET World!" text as shown in Figure 19.2.

Listing 19.1 shows the code behind the Web Form, and Listing 19.2 shows the raw HTML code generated by the designer after the button is placed on the page.

Listing 19.1 The code behind a Web Forms Page
  1:  Public Class WebForm1  2:  Inherits System.Web.UI.Page  3:  Protected WithEvents Button1 As System.Web.UI.WebControls.Button  4:   5:  #Region " Web Form Designer Generated Code "  6:   7:  'This call is required by the Web Form Designer.  8:  <System.Diagnostics.DebuggerStepThrough()> _  9:  Private Sub InitializeComponent()  10:   11:  End Sub  12:   13:  Private Sub Page_Init(ByVal sender As System.Object, _  14:  ByVal e As System.EventArgs) Handles MyBase.Init  15:  'CODEGEN: This method call is required by the Web Form Designer  16:  'Do not modify it using the code editor.  17:  InitializeComponent()  18:  End Sub  19:   20:  #End Region  21:   22:   23:  Private Sub Button1_Click(ByVal sender As System.Object, _  24:  ByVal e As System.EventArgs) Handles Button1.Click  25:   26:  Response.Write("Hello ASP.NET World!")  27:   28:  End Sub  29:   30:  End Class 

A quick glance at the listing and you will note many similarities between Windows Forms code and Web Forms code. Both Windows and Web applications use common object-oriented idioms. For example, both are implemented as classes. Both Windows and Web applications have designer-generated code, including the use of attributes and initialization code. Both kinds of applications use event handlers. If you look closely at line 23, you will see that a Button.Click event handler in an ASP.NET page is identical to the signature of a click handler in a Windows Forms application.

The code in ASP.NET applications is CLR code. You might not use all of the same classes when building Web Forms as when building Windows Forms, but the language is exactly the same. ASP.NET provides all of the benefits of the .NET Framework, including inheritance, managed code, and visual design.

Listing 19.2 Raw HTML generated by the designer
[View full width]
  1:  <%@ Page Language="vb" AutoEventWireup="false"  2:  Codebehind="WebForm1.aspx.vb" Inherits="HelloAspDotNet.WebForm1"%>  3:  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">  4:  <HTML>  5:  <HEAD>  6:  <title>WebForm1</title>  7:  <meta name="GENERATOR" content="Microsoft Visual Studio.NET 7.0">  8:  <meta name="CODE_LANGUAGE" content="Visual Basic 7.0">  9:  <meta name="vs_defaultClientScript" content="JavaScript">  10:  <meta name="vs_targetSchema" content="http://schemas.microsoft.com/intellisense/ graphics/ccc.gif ie5">  11:  </HEAD>  12:  <body MS_POSITIONING="GridLayout">  13:  <form id="Form1" method="post" runat="server">  14:  <asp:Button id="Button1" style="Z-INDEX: 101; LEFT: 75px; POSITION: absolute; graphics/ccc.gif TOP: 60px"  15:  runat="server" Text="Push Me" Width="119px" Height="32px"></asp:Button>  16:  </form>  17:  </body>  18:  </HTML> 

When you are visually designing your Web Forms, the designer is generating the HTML code for you. The benefit is that you do not have to type the terse HTML code; the Web Forms Designer takes care of this for you.

If you have worked with HTML or ASP in the past, you might recognize many of the elements in Listing 19.2. The <HTML></HTML> tags define the content of the HTML document on lines 4 and 18. A <HEAD></HEAD> section is defined on line 5 through 11, and the body of the document is defined on lines 12 through 17.

Lines 13 through 16 represent the pagebounded by the <form> tagand the button is rendered as the <asp:Button> tag on lines 14 and 15. Clearly, it is easier to drag a button on the design view of the form than it is to remember this code.

The Codebehind attribute on line 2 indicates the file that contains the code behind the form (see Listing 19.1).

Building and Running the ASP.NET Application

When you build the ASP.NET application, all of the source files are compiled into a .DLL. In the example, HelloAspDotNet.dll is compiled, and consists of .aspx, .aspx.vb, and global.asax files.

You can run the application by pressing F5 or browsing to the .aspx file in your browser. Enter http://localhost/HelloAspDotNet/WebForm1.aspx in the Address field of your browser to run the Web application.


Visual BasicR. NET Unleashed
Visual BasicR. NET Unleashed
Year: 2001
Pages: 222

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net