What makes ASP.NET Web Sites Different?

In this lesson I will show you how to create a basic ASP.NET web site. I will also explain the basic structure of a web site as follows.

• How ASP.NET separates Code from HTML
• What files are included in an ASP.NET web site
• Special folders in ASP.NET web sites

At the conclusion of this lesson you will be able to create an ASP.NET Web Site and create a web form with basic functionality.

How are ASP.NET Web Sites Created?

Create an ASP.NET Web Site

Begin by launching Visual Studio (in the video I am using Visual Studio 2008, but Visual Studio 2005 or Visual Studio Web Developer Express Editions will also work).
Click File > New > Web Site.

This will open a New Web Site Dialog box where you will specify…

1. The project template (select ASP.NET Web Site)
2. The .NET Framework version (available options are 2.0, 3.0 and 3.5 – for this exercise select 3.5 – the default)
3. The location of the project files (select File System as type and specify a location)
   • The name of the selected folder acts as the name of the web site as well (you do not select a project name with an ASP.NET template)
   • File System – this allows you to specify a folder on the current machine
   • FTP – this allows you to connect directly to a site via FTP. By selecting this option you modify files directly on the FTP server
   • HTTP – this option allows you to connect directly to a site on the web server. The server must have Front Page Extensions installed for this option to work.
4. The default programming language – options are Visual Basic and Visual C#
   • Unlike other project types, if you choose the wrong language here, you can change the language later (you can even mix languages – some pages VB some C#)

When you click “OK” it will create the web site at the specified location with the following files and folders.

• App_Data (folder)
• Default.aspx
• Default.aspx.cs (or.vb depending on language)
• web.config

HTML is separated from Code

Notice that the default page that was created (Default.aspx) has an associated code page (Default.aspx.cs for C# or Default.aspx.vb for Visual Basic). In ASP.NET code is separated from the HTML. This allows designers to more easily focus the look and feel of the page while the developers focus on programming it.
To see how the aspx page is linked to the associated code file, you need to open Default.aspx in Source View (this is done by double clicking Default.aspx in Solution Explorer). Look at the page directive at the top of the page.

<%@ Page Language=”C#” AutoEventWireup=”true”  CodeFile=”Default.aspx.cs” Inherits=”_Default” %>

Each attribute in the page directive plays a part in telling the server how to process the page.

• Language – specifies which compiler the web server should use to compile the code. Each page can only specify one language.
• AutoEventWireup – specifies whether or not auto page events should be processed (i.e. Page_Load). If a page will not have code in any of the auto events, processing is more efficient if auto events are not wired.
• CodeFile – specifies the location of the associated code file.
• Inherits – specifies the name of the class in the code file with which the page should merge.

Now open Default.aspx.cs (or Default.aspx.vb) by double clicking it in Solution Explorer. The file contains a partial class named _default. This is the class that is referenced in the page directive. Both the HTML page and the Code file are partial classes and are therefore merged at runtime.

Why are pages in ASP.NET called WebForms?

Aspx pages in ASP.NET are referred to as WebForms. This is because the each page has to be based on a single form element. Unlike standard HTML form elements however, a WebForm must be a server form control.

The method and action attributes are omitted. This means that default values are used. In other words, the method is Post and the action is that the page will pst back to itself. Notice that the form element has 2 non-standard attributes (runat=”server” and ID=form1″).

• runat=”server” – makes the form accessible to sever side processing.
• ID=”form1” – specifies that form1 is the name by which server side code can access the form.

Adding Code to the Page
Now we can add a few controls to add basic functionality to the form. We will add 3 [controls|Working with Controls in ASP.NET]. Notice that like the form, each control has a runat=”server” attribute.

• TextBox – a text box in which the user will enter their name.
• Button – when clicked will execute code to display a greeting to the name entered in the FirstName text box.
• Label – a placeholder where the greeting will be displayed.

The button control registers a [click event|Introducing Event Handling in ASP.NET] which will be handled by the following server side code. When the button is clicked, the code will take the text of the FIrstName text box as input and display a greeting to the user in the label placeholder.

To test the page press the F5 key (you can also launch the page bly clicking Debug > Start Debugging).

So What?

One of the very exciting benefits of programming web sites with ASP.NET is the seperation of HTML and Code. This means that both design teams and development teams can work on projects at the same time. In other web development environments (such as classic ASP or PHP) Code is intermixed with the HTML. This usually means that once programming logic has been introduced, web designers can not make changes to the page directly. Instead, they must submit changes to the development team who must implement the design changes in their programming logic.
With this code separation it is much easier to manage and maintain existing sites. Also, since code is separated, both the HTML and Code files appear much less cluttered and are easier to read.

Categories: Misc

Tags: .NET, ASP.NET, C#