Web Forms - building blocks of an Asp.Net application (Part 1)

See More About:

Web Forms - building blocks of an Asp.Net application (Part 1)

Examining Web Form Pages - the central elements of development in Asp.Net. Taking a look from a Delphi developer's perspective: What is a Web Form? How do I design a Web Form? What is the link between the aspx file and the code-behind file? ...

Join the Discussion

"Post your views and comments to this chapter of the free Asp.Net Delphi Programming Course"
Discuss!

Related Resources

• A Beginner's Guide to Asp.Net Programming for Delphi developers.TOC

Elsewhere on the web

• Delphi + Asp.Net: LIVE

Welcome to the fifth chapter of the FREE online programming course:
A Beginner's Guide to Asp.Net Programming for Delphi developers.
Taking a look from a Delphi developer's perspective: What is a Web Form? How do I design a Web Form? What is the link between the aspx file and the code-behind file? ...

Hi! It seems I didn't frighten you enough in the last chapter :)

Let's first recall that our objective in this Course is to learn how to build a "real-world" Asp.Net Web application using Delphi for .Net. Our goal is to create an application that looks and operates like the BDSWebExample (explore it live) demo that ships with Delphi.

We have a long road ahead, time to take the second step...

What is a Web Form?

If you are used to building Windows (desktop) application with Delphi then you are familiar with the TForm objects - the building blocks of Win32 (or VCL.Net) applications. In the Asp.Net context, Web Forms Pages are building blocks of an Asp.net Web application. Similar to TForm objects, Web Forms provide the visual interface of your Web applications; each web form is a combination of programming logic and user interface that gets rendered as an HTML page in the user's browser.
Again, analogous to TForm objects, a Web form is a class that is compiled and executed at runtime, providing properties, methods and events which the Asp.Net framework will call during the process of responding to a request from a browser.

In the last chapter, we successfully created our first Asp.Net Web application. It turned out that the Web Forms page contained HTML and ASP.NET server controls (something not found on a "standard" TForm). Let's see "why"...

Web Form Structure

When you create Asp.Net Web applications using Delphi for .Net, Web forms are made of two files: the visual portion (*.aspx file) and a separate file (code behind file: *.pas) that contains the code logic that interacts with the visual components and ASP.NET server controls in your Web Forms page. Oh, there's also a third file, a .resx file that stores some additional information (which we will discuss in some future chapter).

The Web Forms page works as a container for the static text (classic HTML controls) and any web controls you want to display. Using the Delphi Web Forms Designer along with ASP.NET server controls, you can design the form as you would in an "ordinary" Win32 application.

Single File Web Forms Pages
Note: a Web Form can be created as a single .aspx file that contains both the visual elements and the code. The code for such a page is not compiled into a separate class (remember TWebForm1 from the last chapter) - the code is in <script> blocks in the same .aspx file that contains the HTML and web controls. In general, you should avoid creating single file web forms, here's why:

You cannot directly create a single-file Web Forms page from within the Delphi for .Net IDE,

When the page is deployed (on a web server), the source code is deployed along with the Web Forms page, because it is physically in the .aspx file. However, the users (who request the page with their browser) do not see the code, only the resulting HTML that gets rendered when the page is processed.

Other restrictions include: you cannot add non-visual components (such as data components) to the page by dragging them from the Tool Palette; you must attach event handling procedures to events manually; the (scripting) code in the page is not compiled into the assembly, compile-time errors are not caught until the page runs.

Most importantly: in the current version, Delphi language is NOT supported as a scripting language for single file web forms. You would have to code in C# (or VB.Net).

Designing a Web Form

In general, an Asp.Net web application will comprise many different pages (web forms), just as any "ordinary" desktop application contains many forms (that get displayed as a response to user actions; and a program logic).
Note that when you create a new Asp.Net application using Delphi (as we have done in the previous chapter), an "empty" web form is already added to the project. This web form is by default named "WebForm1.aspx", again recall from the last chapter that it is preferable to give your web forms some more descriptive name (like: Register.aspx, or SearchResults.aspx, or ManageProducts.aspx, etc...) depending on the purpose of the form.

Note: the best way would be to start Delphi and open the "DelphiAspNetTEST" project we created in the last chapter. The fastest way to open a recent project, after you start Delphi, is to locate the project name under "Recent Projects" on the "Welcome Page":

Note: you can also point to File - Reopen ... and pick from the list of recent projects. Or, you can select File - Open Project and locate the project (.bdsproj or .dpr) on your system (asp.net projects are most likely to be found under c:\InetPub\WWWRoot\...)

Once you open a project, Delphi displays your web form in an HTML Designer. At the bottom of the IDE, you should see three tabs: "WebForm1.aspx", "WebForm1.pas" (if you have used the default name for your page) and "Design" - the Design tab should be active.
To help you build a user interface, Delphi enables you to design your web forms in the same way as you would design an ordinary TForm in a desktop project. What's more, the HTML designer provides a Tag Editor for editing HTML tags alongside the visual representation of the web form page.

Web form designer supports two views: "Design" view and "*.aspx" view. Design view shows the content of the web form graphically, while "aspx" view shows the auto-generated html elements, tags and attributes.

The design view is most likely to be used frequently by beginners and while defining the initial look of the web form. However, you might prefer working in the "aspx" view (or in the Tag Editor) because it provides a greater degree of control, the preferred way for fine tuning. Note that the "aspx" view is "pure" HTML. As you become more familiar with Asp.Net you are probably going to spend most of your time in the "aspx" view. To be honest, I'm using the Design view *only* to create event handlers for web controls ...

Delphi Web Form HTML Designer: aspx View

The aspx or HTML view

As stated above, when you add components to a Web Form (using Design view) the generated HTML is auto-maintained by Delphi. Each web form contains an HTML <form> element. Any web controls, html controls or additional tags and elements (should) go within the <form> and </form> tags (elements). Anything you add to a web form using the Design view is actually converted and stored as HTML elements. If you are familiar with HTML (the better your knowledge of HTML the faster you'll grasp the Asp.Net) you'll find familiar much of the contents of the aspx view familiar. Some tags have a non-standard HTML format like:

<asp:button id=Button1 runat="server" text="Button"></asp:button>

As introduced in the last chapter this represents a Button web control, an element that will render into a more "appropriate"

when the page is displayed in the browser. Again, we'll be discussing web controls in the coming chapters.

WebForm1.pas ... TWebForm1 ... WebForm1.aspx ...
Before we move on, take a quick look at the "WebForm1.pas" (codebehind) file. For the moment only note that this unit defines a class named TWebForm1 that derives (inherits) from System.Web.UI.Page.

The link between the aspx file and the code-behind file

The code in the .pas file represents a class (along with event handlers in the implementation section, "exposed" elements in the interface section, etc...) that inherits the base System.Web.UI.Page class. The association between the .aspx file and its code behind file is defined by a special Inherits attribute entered (created and maintained automatically by Delphi) in the Page directive at the top of the aspx file.

<%@ Page language="c#" 
    Debug="true" 
    Codebehind="WebForm1.pas" 
    AutoEventWireup="false" 
    Inherits="WebForm1.TWebForm1" %>
<html>
...
</html>

Although a Web Forms page consists of two separate files, they form a single unit when your application is run. The code-behind class files for all Web Forms in a project are compiled into the dynamic-link library (.dll) file produced by the project.

Library (DLL) = Assembly
The entire asp.net application is in fact a library (DLL). If you select Project - View Source you'll get the projects source in the code editor. Note the first line: "library DelphiASPNETTest;". This tells the Delphi compiler that the project should be compiled into a DLL (an assembly in the .Net world). Warning: you should not modify this file manually - except when stated differently inside its source. Again, the discussion of the project file comes very much later...

Because the .aspx file is compiled dynamically when a user browses the page, its relationship to the code-behind file is established with script directives at the top of the page.
The use of two distinct but associated classes allows you to keep the program logic (code-behind) separate from the Web Form's visual content (design).
The aspx file remains in the text form after you deploy your web application (even after the final compilation). This allows you to make changes to the visual interface without having to recompile the entire project (if you have NOT added new web controls - only pure HTML changes are allowed).

The Codebehind, Inherits, and Language attributes
As stated, the relationship between the aspx file and the .pas file is provided with the @Page directive at the top of the .aspx file. The @ Page directive contains attributes that specify the relationship.

The Inherits attribute identifies the class from which the page derives. In our case the WebForm1.aspx (class) inherits from TWebForm1 defined in the unit WebForm1.pas.

The CodeBehind attribute references the name of a file that contains the class for the page. This attribute is used only by Delphi's HTML Designer. It tells the designer where to find the page class so that the designer can create an instance of it for you to work with. The attribute is not used at run time.

The Language attribute specifies the language used when compiling any code declaration blocks within the page. Note that in Delphi Asp.Net applications this is set to "C#" - provided with the fact that in the current version scripting of web forms using Delphi language is not supported (as discussed above)

The AutoEventWireup (defaults to false) indicates whether the page's events are autowired. Note: you should always leave this set to False. Setting AutoEventWireup to True would require that the page event handlers have specific names. This limits your flexibility in how you name your event handlers. Finally, the Debug attribute indicates whether the page should be compiled with debug symbols. Note that this is True by default. You should set this to False before you compile your project for the last time prior to deploying your application.

There are many more attributes you can add manually to the @Page directive, we'll discuss some more specifically in the later chapters.

To the next chapter: A Beginner's Guide to Asp.Net Programming for Delphi developers

That's it for today, in the coming chapters we'll explore the content of a web form: HTML controls, Web control ... and who knows what else :) Stay tuned!

If you need any kind of help at this point, please post to the Delphi Programming Forum where all the questions are answered and beginners are treated as experts.

A Beginner's Guide to Asp.Net Programming for Delphi developers: Next Chapter >>
>> Implementing Dialog Boxes in Asp.net web applications

Zarko Gajic
Delphi Programming Guide

Sign up for my Newsletter

About.com Special Features

Holiday Central

What to eat, where to go, fun things to do and how to save money on the perfect gifts. More >

Family Tech Center

Stay connected and entertained with reviews on tips on the latest HDTVs, cellphones and more. More >

Delphi Programming