Friday, April 10, 2009

ASP.NET From Scratch - 1st Program - Part II

With MS Visual Web Developer installed, we're ready to create our first ASP.NET website. In VWD, this is very easy. Open the File menu and select "New Web Site". You will be presented with the following dialog:



You need to select "ASP.NET Web Site", if it's not already selected. You should also name your new site. This is done by entering a name in the Location box. This text box is probably already filled for you, with the last part being something like "Website1". You can choose to accept this, as well as the location of the project, or you can enter a new one, like I did. I have created a folder, "My Websites", and within this folder, I would like to create the new project with the name of "FirstWebSite". For now, this is less important, but later on you might wish to gather all your projects in a specific folder.

This tutorial will focus on the C# language. Once again, no knowledge of this is required, so if you already know another .NET language, you will get to learn some C# with this tutorial as well. Select C# in the Language dropdown. Now, click the Ok button to create this new website.

VWD will create a very basic website for you, consisting only of a Default.aspx file (and it's partner, the Default.aspx.cs file) and an App_Data folder. I will explain this later, but for now, just accept the fact that they are there. We will only use the Default.aspx for this first example. Move on to the next chapter, for the obligatory "Hello, world!" example.

Hello World Program

In almost every programming tutorial you will find the classic "Hello, world!" example, and who am I to break such a fine tradition? Let me show you how you can say hello to the world from ASP.NET. Open the Default.aspx (if it's not already opened) by doubleclicking it in the Solution Explorer. It already contains a bunch of (X)HTML markup, as well as some stuff you probably won't recognize, like the Page directive in the top, or the runat attribute on the form tag. This will all be explained later, but for now, we want to see some working code.

First of all, we will add a Label control to the page.
A Label control is some what simple, since it's just used to hold a piece of text. Add the following piece of HTML-looking code somewhere between the set of <form> tags:

<asp:Label runat="server" id="HelloWorldLabel"></asp:Label>

Secondly, add this script block somewhere on the page, preferably below the Page directive in the top:

<%
HelloWorldLabel.Text = "Hello, world!";
%>


If you haven't worked with ASP.NET before, I'm sure there's a bunch of things that you're wondering about now, but as I said, this is all about seeing some results right now.
To see the page in action, use Debug -> Start Without Debugging, or simply press F6. VWD will now compile your project, and launch the page you're working on in your default browser. The page will simply have a piece of text which says "Hello, world!" - congratulations, you have just created your first ASP.NET website!

Here is the complete listing:

<%
HelloWorldLabel.Text = "Hello, world!";
%>
<!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 runat="server">
<title>Untitled Page</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:Label runat="server" id="HelloWorldLabel"></asp:Label>
</div>
</form>
</body>
</html>

No comments: