We'll now build a simplest asp.net application, along the process we'll explore the parts of a Web form.

Your first Asp.Net web application

The "New ASP.Net Application" dialog gets displayed, enabling you to select the name of your application, by default Delphi will name asp.net applications with "WebApplicationX". When you hit OK, a new web (virtual) folder under IIS is created to host your asp.net application. I suggest you to always give meaningful names to your asp.net application - name this one "DelphiASPNETTest".

When you hit OK, a new asp.net application is created consisting of several "standard" files. Those files include "web.config", "global.asax" and a "WebForm1.aspx"; all the files have some skeleton code already assigned. The WebForm1.aspx is the name of your Web Form. For the moment we'll focus on "WebForm1".

WebForms are the primary building blocks of an Asp.Net web application. As much as TForm objects are the heart and soul of your Delphi Win32 applications, WebForms are the user interface elements that give your Web application its look and feel. In the same way as TForm objects provide properties and events, WebForms provide properties, methods and events for the (web) controls that are placed on them.
When you create a new web form, Delphi 8 IDE, creates two files: the visual portion (the aspx file) and the code-behind file with the .pas extension. The aspx file describes what will be rendered (UI - user interface) by your Browser, and the code-behind file is used to handle web form and web control events and properties (UI logic). Building a single page from two files in this manner allows you to completely separate the code and content.

Of to a fast start...
What you should now see in Delphi 8 IDE, is the design view of a Web Form named "WebForm1". At the bottom of the IDE, you should see three tabs: "WebForm1.aspx", "WebForm1.pas" and "Design" - the Design tab should be active.

We'll now place several web controls on the WebForm1. Locate the "Tool Palette" and find the "Web Controls" group. Drop a TextBox (think of a "TEdit"), a Button ("TButton") and a Label ("TLabel") control on a form. The simplest way to add controls to a form is to simply double-click 'em.
For the moment do not get confused about the web control names, we'll discuss web controls in the coming chapters.

Now double click the Button component, as you might expect we are to write the code that will handle the Button OnClick event. So, double click it!
First note that the "Design" tab is not selected, the selection has moved to "WebForm1.pas" - thus it seems we are looking at an ordinary Delphi unit ... and yes we are!

procedure TWebForm1.Button1_Click(sender: System.Object; 
                                       e: System.EventArgs);
begin
  Label1.Text := 'Hello:' + TextBox1.Text;
end;

Now, add a line like the one in the red above. This all should be familiar to you if you've used Delphi before. Ok, the "Sender" is here, we are writing the code for the component named Button1, the event is "Click", there is an extra "e: System.EventArgs" parameter in the procedure header, but who cares.
Let's see what happens when you hit "F9" - if this is Delphi (and it is) the application should start - ok, I now this is a web application not a standard Delphi Win32 application with forms, but we'll hit that F9 key and see what happens...

Run .. F9
F9 .. and the new IE instance is created looking like:

Now write your name in the Text box and hit the button ... here it is "Hello: Zarko"!

How simple, isn't it? Unfortunately it isn't :(
But hey, if creating such a small working example was not a too heavy task then creating a more complex application should not be any larger problem ;))

What happened?
The WebForm1.pas file defines the code for the TWebForm1, a class that inherits from System.Web.UI.Page - the "main" class that all the web forms derive from. When you press F9, Delphi compiles your TWebForm1 class into a DLL (and the rest of the files included in the application). When you browse to this page (webform1.aspx), ASP.NET loads the layout information (UI) from the aspx page as well as the code from the compiled DLL. This separation provides great flexibility - you can update the HTML code (to some point) look of the .aspx page without the need to recompile the project.

When you have clicked the Button, the web form is posted back to the server, the server recomposes the page using the data you entered in the TextBox and returns the *new* page to the browser. Finally, the browser renders this page into a pure HTML.

Web Form

<%@ Page language="c#" 
    Debug="true" 
    Codebehind="WebForm1.pas" 
    AutoEventWireup="false" 
    Inherits="WebForm1.TWebForm1" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
  <head>
    <title></title>
    <meta name="GENERATOR" 
          content="Borland Package Library 7.1">
  </head>
  <body ms_positioning="GridLayout">
  <form runat="server">
    <asp:textbox id=TextBox1 runat="server">
    </asp:textbox>
    <asp:button id=Button1 runat="server" text="Button">
    </asp:button>
    <asp:label id=Label1 runat="server">Label</asp:label>
  </form>
</body>
</html>

An Asp.Net web form page is a "simple" text file with the extension .aspx. An ASP.NET Web Forms looks like a regular HTML Form with an extra tag Runat='Server'. This tag makes it a server side form - processed on the server.

Let's see what is it made of:
For the moment, the most interesting part of this Web Form is the first line. In the @ Page directive Delphi automatically specifies an Inherits property and a CodeBehind property. Asp.Net provides a number of @ directives - processing instructions that give the runtime and the compiler additional information about how you want your code to run. For the moment, you should only notice that the "CodeBehind" attribute points to "WebForm1.pas" - the name of the unit where all the web form (event) handling code is located; the "Inherits" points to "WebForm1.TWebForm1" the name of the class defined in the WebForm1.pas that inherits System.Web.UI.Page (similar to TForm1 = class(TForm), only that our form is called WebForm1 and it inherits from the System.Web.UI.Page .Net class).
Note: Don't be confused about seeing the 'Language=C#' attribute - for the moment, Delphi 8 does not support writing Delphi code directly inside the aspx page - only code-behind is allowed.

Between the <form> and </form> tags locate the 3 web controls we dropped on the form. For example:

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

represents the Button component, the ID (name) property (attribute) is set to "Button1", the Text property (Caption) is set to "Button" and it has the standard runat="server" attribute.

Back to the Design view
Before we finish this chapter, activate the Design tab. Locate the Object Inspector (should be positioned left to the Editor window). This is the "same" Object Inspecotr you are used to working with in any previous versions of Delphi. Use it to set the properties (and event handlers) for all the components on the Web Form (and the Web form itself).
In general, you should never name your forms TWebForm1 - the idea that comes from the fact that most probaly all your Delphi Win32 forms are not named TForm1. Now, using the Object Inspector change the name of this form to THelloWorld. Note that this is not enough - you should also save the WebForm1.aspx under a different name - I would suggest HelloWorld.aspx; as expected the .pas unit file also gets renamed.

Finally, select the Button1 component in the Object Inspector and activate the Events tab. Note the names of the control events: all the events are "missing" the "On" prefix - in the .Net world events are called "Click" not "OnClick" or "TextChanged" not "OnTextChanged".

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

Unit the next chapter, do drop some components (pick those that have names you recognize from your Win32 projects, like: CheckBox, Panel, Image etc) from the WebControls tool palette and try settings some properties and handling some events.

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.