Your First ASP.Net Page

In my first ASP.Net tutorial, I will take your hands step by step to build your first ASP.Net page. As in all the programming languages I have learned, it will be a "Hello world" Application, but we will examine the basics of ASP.Net and the development environment while we are on the way.

While you can build ASP.Net applications using NotePad and the free .Net framework SDK, life will be much easier if you use advanced development IDE (Integrated development environment) such as Microsoft Visual Studio which we well use most of the time in the ASP.Net tutorials.

The first step is to open your Visual Studio, I am using Visual Studio 2008 here, click File > New > Project and choose Web from the Project Types list under the Visual C# node, notice that you can use other languages like VB.Net for your code behind ASP.Net, browse for the location where you want to save your first application, type HelloWorld in the Name text box, uncheck "Create directory for solution" and click Ok.

Now let's examine our IDE and what Visual Studio has generated for us. First take a look at the Solution Explorer, it is located at the right hand by default. If you by mistake have closed it or any other window we are talking about in this tutorial, don't worry, just click the View menu and you will find them all there!

The solution explorer is what keeps track of all the files in your project. You will see that Visual Studio has generated some files for us! We will examine them one by one in a minute but first let me tell you, in ASP.Net, the code, the ASP and HTML codes are separated in different files. People who worked in the previous version of ASP (which is now called ASP Classic) had to mix all the code in one page which wasn't really a good experience.

The first page you will see is the Default.aspx which is by default, the default page that the IIS on the server will call first. It's like the "entry" for your web site. If you click the plus sign on the left of the Default.aspx node, you will find another two files: Default.aspx.cs and Default.aspx.designer.cs. Now you must be wondering, why are there three files for one page?

The Default.aspx file has the layout of the page and the Default.aspx.cs has the code or what is called the Code Behind, it's the separation of the code and layout I've told you about, but what about the third file Default.aspx.designer.cs? In the ASP.Net world, every thing is in text files which is great, you can easily find and debug the code that Visual Studio generates for you, this code used to be stored in the same .cs (C Sharp) files in the older versions of .Net which sometimes caused trouble when mixed with the code the developer wrote. Now it's separated in a third file which is Default.aspx.designer.cs. This wasn't possible before "Partial Classes". Every new page you generate will have those two files too by default.

Now let's examine the first file, Default.aspx, double click it in the Solution Explorer and click "Source" located at the bottom of your page. Let's examine the first lines there, that's what you would type if you were using text editor instead of Visual Studio for ASP.Net:

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

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head id="Head1" runat="server">
        <title></title>
    </head>
    <body>
        <form id="form1" runat="server">
        <div>
        </div>
        </form>
    </body>
    </html>

Now look at what's between <%@ and %>:

Page Language="C#": Is the language we will be using in this page, you can use other .net languages such as VB.Net but I really prefer C# in .Net Applications.

AutoEventWireup="true": This means that Visual Studio will generate code to bind the events and the page framework will automatically call events based on their names.

CodeBehind="Default.aspx.cs": This is the file that will hold the code that you will type as I've told you before.

Inherits="HelloWorld._Default": Because almost every thing in ASP.Net is in classes, this is the class that your page will inherit from, you will find this class in the Default.aspx.designer.cs and most of the time, you need not to worry about this class or what is written in it because Visual Studio will take the responsibility of modifying this code when you add controls on your page. If you are not familiar with OOP (Object Oriented Programming) basics like classes and inheritance don't worry, I Will cover OOP in much more details in more advanced tutorials.

Every thing after that is ordinary XHTML standard code except for the runat="server" which means this part of code will be handled at the server level and could have ASP.Net Code. Also notice that all the controls you will use in the ASP.Net will be located between the <form id="form1" runat="server"> and the </form> tags.

Now let's return to the Design mode by clicking "Design" from the bottom of the page or simply pressing Shift+F7. We will now use our first ASP.Net controls, from the Toolbox on the left of Visual Studio which has all the controls you could use categorized into tabs, under the Standard tab, drag a Label control and drop it any where on your page. Also, drag and drop a Button control. Double click on the Button control and you will be taken directly to the Default.cs file to type your code and the cursor will be positioned in the Button1_Click(object sender, EventArgs e) event handler, the default event for the Button control. Ready to type your first ASP.Net line of code? Simply type this:

        Label1.Text = "Hello World!";

And that's all! I'm sue you have noticed that just when you start typing Label1 that you can choose the code instead of typing every thing, also, just typing the dot after Label1 - which is the name of the Label control we dropped on the form - you will have a list of the properties of the control for you just to choose from and press Enter, this is called "Intellisense" and it's really a great time saver by Visual Studio. Also, notice that C# is case Sensitive.

Now to test your first program, you don't need to have IIS installed and configured on your machine! Just pressing F5 will open the ASP.Net development server and will automatically open your default browser. Visual Studio will ask you if you want to modify Web.config file to enable debugging, we will talk in more details about the Web.config file and the debugging later but for now you can safely click Ok.

In your browser click the button and finally, you will see the Hello World in your browser. CONGRATULATIONS you have created your first ASP.Net Project!

Rating: 2.6/5 (63 Votes)

9 Comments

TutorialsRoom said,

May 17th, 2010

You can follow the other tutorials in here then you can just search the internet. There are a lot of resources there.

Mohammad said,

May 16th, 2010

That was a clear tutorial. It helped me understand basic ASP.NET but if I want more advanced stuff, where can I find them?

TutorialsRoom said,

March 25th, 2010

@bart, Don't forget that this is a web application not desktop application. You position controls either using CSS -but that is another story- or easier by using tables. I hope you are the happiest man alive now :)

bart said,

March 24th, 2010

anywhere on the page, if someone can direct me to a place that explains how to position controls on the page, i will be the happiest man alive. IT ALWAYS POSITIONS EVERYTHING ON THE LEFT!! said newbee bart@globalinventive.nl

Nirmallya said,

November 17th, 2009

Great

TutorialsRoom said,

August 6th, 2009

This is not a problem! Visual Studio saves its automatically generated code in this file so it doesn't mix with your code.

Aftab said,

August 2nd, 2009

Why is there a third file 'aspx.designer.cs' created? I am having the same problem.

zantl said,

July 9th, 2009

thanks for the tut :)