Getting Started with ASP.NET Web Sites

Downloads
Lessons
Unlimited 3G Broadband Internet
Buy New DVDs
The Official World Series Film Collection

What Icon 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 Icon 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.

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#)

New Site Dialog

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

Solution Explorer

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.

    1 using System;

    2 using System.Collections.Generic;

    3 using System.Linq;

    4 using System.Web;

    5 using System.Web.UI;

    6 using System.Web.UI.WebControls;

    7 

    8 public partial class _Default : System.Web.UI.Page

    9 {

   10     protected void Page_Load(object sender, EventArgs e)

   11     {

   12 

   13     }

   14 }

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.

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

    2 

    3 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

    4 

    5 <html xmlns="http://www.w3.org/1999/xhtml">

    6 <head runat="server">

    7     <title></title>

    8 </head>

    9 <body>

   10     <form id="form1" runat="server">

   11     <div>

   12     </div>

   13     </form>

   14 </body>

   15 </html>

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. 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.

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

    2 

    3 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

    4 

    5 <html xmlns="http://www.w3.org/1999/xhtml">

    6 <head runat="server">

    7     <title></title>

    8 </head>

    9 <body>

   10     <form id="form1" runat="server">

   11     <div>

   12         Name: <asp:TextBox ID="FirstName" runat="server"></asp:TextBox>

   13         <br />

   14         <asp:Button ID="SubmitButton" runat="server" Text="Greet"

   15             onclick="SubmitButton_Click" />

   16         <br />

   17         <asp:Label ID="WelcomeLabel" runat="server" Text="Label"></asp:Label>

   18     </div>

   19     </form>

   20 </body>

   21 </html>

The button control registers a click event 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.

    1 using System;

    2 using System.Collections.Generic;

    3 using System.Linq;

    4 using System.Web;

    5 using System.Web.UI;

    6 using System.Web.UI.WebControls;

    7 

    8 public partial class _Default : System.Web.UI.Page

    9 {

   10     protected void Page_Load(object sender, EventArgs e)

   11     {

   12 

   13     }

   14     protected void SubmitButton_Click(object sender, EventArgs e)

   15     {

   16         WelcomeLabel.Text = "Hello " + FirstName.Text;

   17     }

   18 }

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



Shop OfficeMax!

So What Icon 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.



blog comments powered by Disqus