Creating Your First ASP.NET 4 Web Site

1. Start VWD 2008-2010 from the Windows Start menu if you haven’t done so already. The first time you start VWD, there might be a delay before you can use VWD because it’s busy configuring itself. Subsequent starts of the application will go much faster.

2. If you’re using a commercial version of Visual Studio, you also get a dialog box that lets you choose between different collections of settings the first time you start Visual Studio. The choice you make on that dialog box influences the layout of windows, toolboxes, menus, and shortcuts. Choose the Web Development settings because those settings are designed specifically for ASP.NET developers. You can always choose a different profile later by resetting your settings, as explained later in this chapter.

3. Once VWD is fully configured, you see the main screen appear, as shown in Figure 1-2.

Figure 1-2

You get a full description of all the windows, toolbars, panels, and menus in the next section, so for now, just focus on creating a new web site. Click the File menu in the upper-left corner and choose New Web Site. If you’re using a commercial version of Visual Studio, depending on the settings you chose when starting Visual Studio the first time, you may have to open the submenu New first. (Make sure you don’t accidentally use the New Project menu, because that is used to create different types of .NET applications.) The New Web Site dialog box appears as shown in Figure 1-3.

Figure 1-3

4. In the Installed Templates section on the left you can choose a programming language you will use for your site. This book shows all examples in both Visual Basic and Visual C# so you can choose a language to your liking.

5. In the list with templates in the middle, verify that ASP.NET Web Site is selected. Verify that File System is the selected option in the Web Location drop-down list at the bottom left. If you want, you could change the location on disk where the web site is stored by clicking the Browse button and choosing a new location on your computer’s hard drive. For now, the default location — a folder under your Documents folder — is fine, so you can leave the location as is.

6. Click OK. VWD creates a new web site for you that includes a number of files and folders to jump start your web site as shown in Figure 1-4. It also opens the file Default.aspx so you can see the code for the page.

Figure 1-4

7. Remove the code inside the <asp:Content> block (it starts with <h2> and ends with </p>) and replace it with the following bolded text and code:

<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">

  <h2>Hello World</h2>

  <p>Welcome to Beginning ASP.NET 4 on <%= DateTime.Now.ToString() %></p>

</asp:Content>

You’ll see code formatted like this a lot more in this book. When you are instructed to type in code formatted like this with some code in bold, you only need to type in the highlighted code. The other code should already be present in the file.

Don’t worry about the code with the angle brackets (<>) and percentage symbol in the welcome message; you learn how it works later. Although this code may not look familiar to you now, you can probably guess what it does: it writes out today’s date and time.

8. Press Ctrl+F5 to open the page in your default web browser. You see a page similar to the one shown in Figure 1-5.

Figure 1-5

If you get a dialog box asking for your user name and password, close your browser and go back to VWD. Right-click your site in the Solution Explorer (it’s the first item in Figure 1-4) and choose Property Pages. In the Start Options section clear the checkbox for the NTLM Authentication item. Then click OK and press Ctrl+F5 again to view the page in the browser. If you see an information bar warning about Intranet settings in Internet Explorer, click the bar and choose Enable Intranet Settings. If you want to learn more about the implications of these settings first, choose What are Intranet Settings from the popup menu.

If you don’t see the date and time in the page, or if you get an error, look again at the code in the welcome message. It starts with an angle bracket (<) followed by a percentage symbol and an equals sign. It closes with a single percentage sign and another angle bracket (>). Also, make sure you typed in the code exactly as shown here, including capitalization. This is especially true when you are using C#, because that language is case sensitive.

9. Notice how a small icon with a screen tip appeared in the tray bar of Windows, visible in Figure 1-6.

If you don’t see the icon, right-click the arrow near the other icons in the Windows tray and choose Customize Notification Icons. Then set the WebDev.WebServer40.exe option to Show Icon and Notifications. The icon belongs to the ASP.NET Development Server. This web server has been started by VWD automatically to serve the request for your page. You learn more about how the web server processes your page later in this chapter.

Figure 1-6

That’s it. You just created your very first ASP.NET 4 web site with VWD.

How It Works

Although the web site you created in this Try It Out is quite simple, the process that eventually results in the page Default.aspx being displayed in your browser isn’t so simple. All by itself, an ASP.NET page (also referred to as an ASPX page because of its extension) can’t do much. It needs to be processed and served by a web server before your browser can display it. That’s why VWD automatically started up the built-in ASP.NET Development Server to handle the request for the page. Next, it started up your default web browser and directed it to the address of the web server, http://localhost:49212/WebSite1/Default.aspx in the Try It Out example, although the actual number in the address may change every time you start the web server because the number is randomly chosen by VWD.

It’s important to realize that the ASPX file you modified in VWD is not the same as the one that eventually gets displayed by the browser.

When you create a page in VWD, you add markup to it. The markup in an ASPX page is a combination of plain text, HTML, code for ASP.NET Server Controls (which you learn more about in this chapter and in Chapter 4), code written in Visual Basic.NET or C#, and more.

When you request an ASPX page in your browser, the web server processes the page, executes any code it finds in the file, and effectively transforms the ASP.NET markup into plain HTML that it then sends to the browser, where it is displayed. In the preceding Try It Out, the resulting HTML causes the browser to display the current date and time. HTML, or HyperText Markup Language, is the language that browsers use to display a web page. You learn how HTML looks and how to use it later in this chapter.

To see how the final HTML differs from the original ASPX page, open the source for the page in your browser. In most browsers, you can bring up the source window by right-clicking the page in the browser and choosing View Source or View Page Source. This brings up your default text editor, showing the HTML for the page.

If you already closed your browser after the preceding Try It Out, press Ctrl+F5 in VWD to open the page and choose View Source again.

Most of the HTML you see in the text editor is similar to the original ASPX page. However, if you look at the line that displays the welcome message and the current date and time, you’ll notice a big difference. Instead of the code between the angle brackets and percentage signs, you now see the actual date and time:

<div class="main">

  <h2>Hello World</h2>

  <p>Welcome to Beginning ASP.NET 4 on 10/30/2009 6:19:16 PM</p>

</div>

When the web server processed the page, it looked up the current date and time from the server, and inserted it in the HTML that got sent to the browser. Depending on the language settings of your Windows installation, you may see the date and time formatted differently to accommodate the Windows Regional Settings.