So you want to develop web applications with ASP.NET? Fair enough. You've got a lot to learn, of course. There's some incredible technology running under the hood of each and every ASP.NET web application, and you're not going to understand all of it overnight. That said, once you do grasp the technology, you will have some incredibly powerful tools for rapid and robust web application development at your fingertips.

However, if you are like me, you'll want to jump in and learn the technology as you go. For this reason, I am putting together a series of articles to help you get accustomed to Visual Studio, ASP.NET, and the .NET framework as a whole. Basically, I'll show you what I wish I had when I was starting out. The infamous Hello World application is a good place to start. I'll show you three ways to accomplish this in ASP.NET

Okay, let's get started. Open up Visual Studio. I'll be using Visual Studio 2008 here, but 2005 will work as well. If you don't have either, you should download Microsoft's Visual Web Developer 2008 Express. VWD Express provides all the functionality we'll need to get through this series. The certainly are many differences between Visual Studio and VWD Express, but that's another article.

When your IDE of choice is open, create a new Project by opening the File menu, hovering your cursor over "New," and selecting "Project..." as shown below.

On the dialog that pops up, select "ASP.NET Web Application", under the "Web" project type. Name the project "HelloWorld." A project is a unit of compilation, or, in other words, a container for the files you'll create for your application. Click the image thumbnail to view it at full-size.

At this point, the HelloWorld project will be created and the Visual Studio (or VWD) view will change. You will be presented with the contents of the "Default.aspx" file. Default.aspx is, as its name implies, the default page that will be shown for your application, much like index.html for a static HTML project. What you are viewing is ASP markup, which is a mix of ASP.NET tags and HTML. Since we don't know any ASP.NET code yet, let's switch to Visual Studio's WYSIWYG view, Design mode. You can switch to Design mode by clicking on "Design" at the bottom of the file editor.

In Design mode, we see that we have an empty page (no, that's not en error - you have not added any content yet!) We're trying to show "Hello World!" to the world, and this is a WYSIWYG editor, so just type it in. The text should appear within the div tag, as shown.

That's it! Let's start out application so we can see if it compiles and runs correctly. Select "Start Without Debugging" from the "Debug" menu.

You should notice that a popup message appears in your task bar noting that the ASP.NET Development server is running. This means that Visual Studio has started a service on your local computer that allows your computer to behave like a real webserver and host your application. It'll continue to run until we decide to end the runtime session, which, in our case, will end when we close Internet Explorer.

More importantly, Internet Explorer will open and display the Default.aspx page to us. Hopefully, it looks like this:

Congratulations! You've just created and run your first ASP.NET web application. Excited yet? I hope so, because we've got more to cover here. Design mode is nice, but it doesn't always provide us with the granularity of control that we want when designing pages. Let's switch to Source mode, which is what we were started in originally. Do this by clicking "Source" at the bottom of the editor. Then, remove the existing "Hello World!" text. Replace it with the following code:

<%= "Hello World" %>

This is what's called an "inline expression." It is a type of ASP tag that inserts the value of the expression into the page at runtime. The quotes are necessary because we are providing a string expression. If they were omitted, it would try to evaluate them just like any other C# code. We will look at using inline expressions, other code render blocks, and examine the other ASP tags in another article. For now, ensure that your Default.aspx page looks like this one:

Run the application again by using the Start Without Debugging command. You're going to be using this a lot, so you should probably learn the keyboard shortcut for it (Ctrl+F5). Verify that "Hello World!" is shown again, and close Internet Explorer. Cool! Two out of three ways of showing "Hello World" down. Now, let's take a look at how we can combine Design mode and Source mode so we can get both a preview of our page and granular control over its contents. Visual Studio provides a way for us to view both at the same time. Click on "Split" at the bottom of the editor, as below, to switch to this mode.

Next, we're going to look at the Toolbox. The Toolbox contains all of the nifty little toys that Microsoft has provided us with for developing our applications quickly. It's pretty extensive, and rightly so. Why should we have to rewrite code for features that are included in almost every web application? By default, the Toolbox (shown below), should reside to the left of the editor frame. You may have to click on a "Toolbox" button to get it to display, depending on your resolution.

Each entry in the Toolbox is called a control, and the controls run the gamut from displaying text, to providing a file upload feature, to handling user login. Each control can be dropped into your page (into either the Design window or the Source window), and then configured to match your needs. We're interested in display text here, so double click on the Label control. Visual Studio will insert a label control at your cursor. Notice that you can see both the ASP tag representing the Label in Source mode and the appearance of the Label in Design mode. It should look like this:

If you click on the Label in the design window, we'll see another important Visual Studio pane: the Property Editor. By default, this is shown in the bottom-right corner of the IDE. The image below highlights a few things you should notice about the property window. When the Label is selected, its name is shown in the first line of the Property Editor. Likewise, its properties are shown for direct editing. The Text property is highlighted, and its value is Label. Looking at the tip displayed, we see that the Text property represents the text that the label shows. Ah-ha! It is currently set to "Label," so that is why Design mode shows what it does. Let's change that to "Hello World!" as shown (quotes not required here - Visual Studio will insert them for us.)

Notice that Visual Studio updates both our Design and Source views to show the new value of the Text property for Label1. Run this application one final time to verify that it works. If you've forgotten the keyboard shortcut, I'll remind you that it's Ctrl+F5, but don't let it happen again!

So, we've gotten our Hello World application running three different ways (pure HTML, inline expressions, and the Label control), and learned the basics of moving around within Visual Studio. Like I said, we've got a lot of ground to cover still, but this is a good start. This was an image-heavy post, but that was appropriate for your first tutorial. Please don't expect them all to be like this. In future articles, I will use less images, but I am as-wordy, at the very least. Please feel free to post any questions you have.

Next article: Getting Started with ASP.NET Part 2: Code-behind and Events >>