Getting Started with ASP.NET

For years now, ASP has been the leading choice for Web developers building dynamic Web sites on Windows Web servers. Offering the simplicity of scripting with the flexibility of several languages to choose from, combined with the fact that ASP is built into every Microsoft Windows based Web server, has made ASP a difficult act to follow.

Early in 2002, Microsoft released its new platform for Internet development. Dubbed .NET, this platform included the long-awaited successor to ASP. Originally entitled ASP+, it was finally released as ASP.NET under the new naming scheme for Microsoft’s Internet development products.

Compared to ASP, ASP.NET represents a leap forward both in complexity and productivity for the developer. It maintains its flexibility in the choice of language, but instead of a range of simple scripting languages, developers must choose between several full-fledged programming languages. Development in ASP.NET can require not only an understanding of HTML and Web design, but also a firm grasp on the concepts of object-oriented programming and development.

In this article, I’ll introduce you to basics of ASP.NET. I’ll walk you through installing it on your Web server, and take you through a couple of simple dynamic pages that demonstrate the differences between ASP.NET and other server side languages. By the end of the article I hope to show you that ASP.NET can be a little more complicated, but a lot more powerful than many of the other choices out there.

What is ASP.NET?

ASP.NET is a server-side framework for developing Web applications based on the Microsoft .NET Framework. Coming to grips with that lingo-filled description is the first challenge faced by any developer who wants to build dynamic Web pages with Microsoft technologies today. In this section, I’ll try to break down the jargon to give you a clear picture of exactly what ASP.NET is and what it can do for you.

ASP.NET is server-side; that is, it runs on the Web server. Most Web designers start out by learning client-side technologies like HTML, JavaScript, and Cascading Style Sheets (CSS). When a Web browser requests a Web page created with client-side technologies, the Web server simply grabs the files that the browser (the client) requests and sends them down the line. The client is entirely responsible for reading the code in the files and interpreting it to display the page on the screen.

Server-side technologies like ASP.NET are different. Instead of being interpreted by the client, server-side code (e.g. the code in an ASP.NET page) is interpreted by the Web server. In the case of ASP.NET, the code in the page is read by the server and used to dynamically generate standard HTML/JavaScript/CSS that is then sent to the browser. Since all processing of ASP.NET code happens on the server, it’s called a server-side technology.

ASP.NET is a framework for developing Web applications. A Web application is just a fancy name for a dynamic Web site. Web applications usually (but not always) store information in a database on the Web server, and allow visitors to the site to access and change that information. Many different programming languages exist for creating Web applications: PHP, Java, Perl and Cold Fusion are just a few of the more popular ones. Rather than tying you to a specific language, however, ASP.NET is a framework — a technology that lets you write Web applications in your favourite (supported) programming language.

And finally, ASP.NET is based on the Microsoft .NET Framework. The .NET Framework collects all the technologies needed for building Windows applications, Web applications, and Web services into a single package with a set of twenty-some programming languages. To develop Web sites with ASP.NET, you’ll need to download the .NET Framework Software Development Kit, which I’ll guide you through in the next section.

Ok, so with all the jargon demystified, you’re probably still wondering: what makes ASP.NET so good? Compared to other options for building Web applications, ASP.NET has the following advantages:

• ASP.NET lets you use your favourite programming language, or at least something that’s really close to it. The .NET Framework currently supports over 20 languages, all of which may be used to build ASP.NET Web sites.
• ASP.NET pages are compiled, not interpreted. Instead of reading and interpreting your code every time a dynamic page is requested, ASP.NET compiles dynamic pages into efficient binary files that the server can execute very quickly. This represents a big jump in performance compared to interpreted languages like PHP, Perl, and ASP.
• ASP.NET has full access to the functionality of the .NET Framework. Support for XML, Web Services, database interaction, email, regular expressions, and many other technologies is built right into .NET, which saves you from having to reinvent the wheel.
• ASP.NET lets you separate the server-side code in your pages from the HTML layout. When working in a team composed of programmers and design specialists, this separation is a great help, as it lets programmers modify the server-side code without stepping on the designers’ carefully-crafted HTML and vice versa.

With all this going for it, ASP.NET has relatively few downsides. In fact, only two come to mind:

• ASP.NET is a Microsoft technology. While this isn’t a problem in and of itself, it does mean that (at least for now) you need to use a Windows server to run an ASP.NET Web site. If your organization uses Linux or some other operating system for its Web servers, you’re out of luck.
• Serious ASP.NET development requires an understanding of object-oriented programming. If you don’t consider yourself a programmer and JavaScript gives you a headache, ASP.NET is probably not the best choice for you.

Still with me? Great! Time to gather the tools of the trade…

What do I need?

For the moment, if you’re going to learn ASP.NET, you’re going to need a Windows-based Web server. Open source initiatives are underway to produce versions of ASP.NET that will run on other operating systems, such as Linux; however, these are not expected to be available in stable form for at least several months.

While developers had the option of getting their feet wet with ASP on Windows 95, 98, or ME using a scaled-down version of IIS called a Personal Web Server (PWS), ASP.NET requires the real deal. As a bare minimum, you’ll need a computer equipped with Windows 2000 Professional before you get started. Windows XP Professional will work just fine too, as will any of the Windows 2000 Server packages.

If you don’t have one of the required versions of Windows, another option is to secure ASP.NET hosting from someone who does. You can write ASP.NET pages on any operating system; but to run them, you need to put them on a Web server equipped with IIS and ASP.NET.

Other than that, all you need is enough disk space to install IIS (if you haven’t already), and a text editor. Notepad will do fine for dabbling, and it’s certainly all you’ll need for this article, but if you get serious about ASP.NET you’ll probably want to invest in a development environment like Visual Studio .NET or Dreamweaver MX.

Installing ASP.NET

If you’ll be working on a Web host that supports ASP.NET, everything in this section has already been done for you, and you can safely skip ahead. If not, you’ll need to set up your machine as a local Web server equipped with ASP.NET, and that’s exactly what I’ll show you how to do.

Before you install ASP.NET, you must have Microsoft Internet Information Services (IIS) installed. If you don’t (or if you’re not sure), complete the following steps to install it:

1. Open Control Panel
2. Click Add/Remove Programs
3. Click Add/Remove Windows Components
4. Select IIS from the list of components
5. Follow the onscreen prompts to complete installation

You’ll need to have your Windows CD on hand, so make sure you dig it out of the closet in advance.

Once IIS is installed, you can make sure it’s working properly by opening Internet Explorer (or any other Web browser) and typing http://localhost/ into the address field. When you press Enter, the browser should load a page that introduces IIS and provides the documentation for the server.

With IIS installed, you’re ready to add ASP.NET support. ASP.NET is part of the .NET Framework, Microsoft’s new multi-language development platform for Windows Internet applications. To develop ASP.NET Web sites, you’ll need at least the .NET Framework Redist, which contains everything you need to run .NET applications, including ASP.NET Websites on your computer. You may also want to obtain the .NET Framework SDK, which contains example applications and full reference documentation for programmers.

The .NET Framework Redist and the .NET Framework SDK are free downloads provided by Microsoft. At this time, you can reach the download page directly at this address: http://www.asp.net/download-1.1.aspx Be aware that the Redist and SDK together add up to 131MB of downloads, so if you’re on a modem this could take some time!

Once you’ve downloaded the SDK, run the .NET Framework Redist installation file. The program may warn you that your Windows Installer and/or Microsoft Data Access Components (MDAC) are out of date. Allow the program to update your Windows Installer automatically if it asks to. If your MDAC is out-of-date, cancel the SDK installation and download the latest MDAC (2.7 as of this writing) from http://www.microsoft.com/data/ before starting the SDK installation over.

If you downloaded the SDK, run its installer once the .NET Framework Redist is finished installing. When the installers are done, ASP.NET will be installed on your system.

Testing ASP.NET

A good way to make sure that ASP.NET is working properly on your system is to configure the .NET Framework SDK samples (assuming you downloaded the SDK). On your Start menu, you’ll find a new folder called Microsoft .NET Framework SDK. Inside this folder, click Samples and QuickStart Tutorials.

Internet Explorer will open with a page that lists two steps that you need to complete before the samples and tutorials are available:

1. Install the .NET Framework Samples Database
2. Set up the QuickStarts

Go ahead and click the first link, then click Open in the dialog that appears to run the database installation. Don’t be confused by the mention of Microsoft SQL Server in the description of Step 1; the program will silently install MSDE, a standalone version of SQL Server on your system to host the samples that require a database backend.

When Step 1 is finished, click Step 2 to have it fill the newly-installed database with the sample data for the QuickStart Tutorials. When Step 2 completes, click Launch to go to the QuickStart Tutorials homepage (you can get to this page in future by clicking the same icon as before on your Start Menu).

Since the focus of this article is on ASP.NET development, click the ASP.NET QuickStarts link. If you are taken to the ASP.NET QuickStart Tutorial, you can rest assured that ASP.NET is properly installed on your system. The tutorial itself is written in ASP.NET, so if you can view the tutorial, your server can run ASP.NET.

The QuickStart Tutorial gives plenty of examples of ASP.NET in action, but unless you’re an experienced programmer, you’ll need a little more guidance before you can learn purely by example. Mere mortals in the audience are therefore advised to close their browser and read on…

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 the Text property of TimeLabel to 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.


The VB.NET version
As I said earlier, ASP.NET lets you use your choice of a number of programming languages to write the script blocks in your pages. For the sake of comparison, here's the example we just looked at converted to VB.NET:
<%@ Page Language="VB" %>     

<html>     

<head>     

<title>My First ASP.NET Page</title>     

<script runat="server">     

  Sub Page_Load(Source As Object, E As EventArgs)     

    TimeLabel.Text = DateTime.Now.ToString()     

  End Sub     

</script>     

</head>     

<body>     

     

<p>Hello there!</p>     

     

<p>The time is now: <asp:label runat="server" id="TimeLabel" /></p>     

     

</body>     

</html>
As you can see, the only parts of the page that have changed are the page directive, which now specifies VB as the language in use on the page, and the code block.

I won't waste your time describing the three lines of VB.NET code in the script block; if you look at it closely, you'll see that it is essentially identical to the C# code from our original example. All that's changed is the language syntax.
To prove to yourself that the two examples are equivalent, type the above code into you text editor and save it as hellothere-vb.aspx. If you view it in your browser, you'll see that it's identical to the C# example, right down to the HTML code that it generates.
Note: the filename of an ASP.NET page doesn't have to contain -vb or -cs to identify the language in use; I simply did that for our own benefit, to keep our examples organized. All ASP.NET pages should end with .aspx, however.
Stay tuned...
In my next article, I'll show you how to use ASP.NET to create and process forms on the Web! Until then, I welcome your comments!