Article
Getting Started with ASP.NET
Your first ASP.NET page
For your first run at ASP.NET, we'll create the simple example shown here:
Let's get started! Open your text editor (again, Notepad is fine). If you have fancy software for creating ASP.NET pages automatically, such as Visual Studio .NET, please do not use it yet. These programs provide lots of powerful tools for building complex ASP.NET pages in a hurry, but for simple examples like this one, they tend to get in the way more than anything. Plus, there's a certain value to learning how to do something by hand before you let a fancy tool do it for you.
So with your text editor, create a file called hellothere-cs.aspx. If you are using Notepad, remember to choose All Files from the Save as type drop-down when you save the file; otherwise, Notepad will save it as hellothere-cs.aspx.txt and it just won't work.
Let's start with the plain HTML for this page:
<html>
<head>
<title>My First ASP.NET Page</title>
</head>
<body>
<p>Hello there!</p>
<p>The time is now: </p>
</body>
</html>
So far so good, right? Now to this simple HTML code, we'll add some ASP.NET code that will create the dynamic elements of the page, starting with the time.
<html>
<head>
<title>My First ASP.NET Page</title>
</head>
<body>
<p>Hello there!</p>
<p>The time is now: <asp:label runat="server" id="TimeLabel" /></p>
</body>
</html>
We've added an <asp:label> tag to the document. This is a special tag that lets us insert dynamic content into the page. The asp: part of the tag name identifies it as a built-in ASP.NET tag. ASP.NET comes with a whole bunch of built-in tags, and <asp:label> is arguably the simplest.
The runat="server" attribute identifies the tag as something that needs to be handled on the server. In other words, the Web browser will never see the <asp:label> tag -- ASP.NET sees it and converts it to regular HTML tags before the page is sent to the browser. It's up to us to write the code that will tell ASP.NET to replace this particular tag with the current time.
To do this, we must add some script to our page. Like ASP before it, ASP.NET gives you the choice of a number of different languages to use in your scripts. The two most common languages are Visual Basic .NET (VB.NET) and C# (pronounced C-sharp). Personally I prefer C#, so let's start by looking at the C# version of our script:
<%@ Page Language="C#" %>
<html>
<head>
<title>My First ASP.NET Page</title>
<script runat="server">
protected void Page_Load(Object Source, EventArgs E)
{
TimeLabel.Text = DateTime.Now.ToString();
}
</script>
</head>
<body>
<p>Hello there!</p>
<p>The time is now: <asp:label runat="server" id="TimeLabel" /></p>
</body>
</html>
Ok, if you've never done any server-side programming before, this may be starting to look a little scary. Let's break down the new elements of this page:
<%@ Page Language="C#" %>
This line is called the page directive. It lets you set options that apply to the page as a whole. In this case, we're using it to set the language that will be used for server-side script blocks on the page. We'll see other page attributes that can be set with the page directive in future articles.
<script runat="server">
This tag marks the start of a server-side script block. Like the <asp:label> tag, this <script> tag uses the runat="server" attribute to let ASP.NET know that the tag should be processed before sending the page to the browser.
protected void Page_Load(Object Source, EventArgs E)
{
If you've ever written a program in Java or C++, these lines don't need much explanation. If not, they can be pretty darned confusing. For now, all you need to know is that you can write script fragments that are run in response to different events, such as a button being clicked or an item being selected from a drop-down list. What the first line basically says is "execute the following script whenever the page is loaded". The opening brace ({) marks the start of the script to be executed at page load time.
For the technically-minded, the code we've just seen is a method declaration for a page load event handler. Don't worry if that means nothing to you, but if it does you're about ten steps ahead of the game.
Finally, here's the line that actually displays the time on the page:
TimeLabel.Text = DateTime.Now.ToString();
In plain English, here's what this line says:
Set theTextproperty ofTimeLabelto the current date/time, expressed as a string of text.
TimeLabel is the id attribute of the <asp:label> tag that we want to show the time. So TimeLabel.Text, the Text property of TimeLabel, refers to the text that will be displayed by the tag.
DateTime is a class that is built into the .NET Framework that lets you do all sorts of useful things with dates and times. There are thousands of these classes in the .NET Framework that do all sorts of useful things. If you're interested in perusing them, you can use the Class Browser sample application that comes with the ASP.NET QuickStart Tutorial, and should be available on your server at this address:
http://localhost/quickstart/aspplus/samples/classbrowser/vb/classbrowser.aspx
The DateTime class has a property called Now that always contains the current date/time. This Now property has a method called ToString() that expresses that date/time as text (a segment of text is commonly called a string in programming circles).
Classes, properties, methods... these are all important words in the vocabulary of any object oriented programmer, but for now all you need to take away from this discussion is that DateTime.Now.ToString() will give you the current date/time as a text string, which you can then tell your <asp:label> tag to display.
The rest of the script block is just tying up loose ends:
}
</script>
The closing brace (}) marks the end of the script to be run when the page is loaded, and the </script> tag marks the end of the script block.
Save your changes to the file, place it in a directory on your Web server and then load the page in your browser. You should see a page like this:
If the time isn't displayed, chances are you opened the file directly in your browser instead of loading it through your Web server.
Because ASP.NET is a server-side language, your Web server needs to have a crack at the file before it is sent to your browser for display. If it doesn't, the ASP.NET code is never converted into HTML that your browser can understand. In this example, the <asp:label> tag doesn't get replaced with the current date/time.
Make sure you load the page through your Web server (e.g. by typing a URL beginning with http://localhost/, or the name of your Web server if you're not using your own machine), and the example should show up fine.
With the page displayed in your browser, use the View Source feature (View -> Source in Internet Explorer) to view the HTML code for the page. Here's what you'll see:
<html>
<head>
<title>My First ASP.NET Page</title>
</head>
<body>
<p>Hello there!</p>
<p>The time is now: <span id="TimeLabel">6/2/2002 1:55:09 PM</span></p>
</body>
</html>
Notice that all of the ASP.NET code is gone! The page directive and the script block have been completely removed, and the <asp:label> tag has been replaced by a <span> tag (with the same id) containing the date/time string.
Seeing this should give you a full appreciation of how ASP.NET works. From the Web browser's point of view, there is nothing special about an ASP.NET page; it's just plain HTML like any other page out there. All of the ASP.NET code is run by your Web server and converted to the plain HTML that is sent to the browser.