- What Is ASP.NET?
- Installing the ASP.NET Engine, Editor, and Database System
- A Brief Tour of Visual Web Developer
- Summary
- Q&A
- Workshop
This chapter is from the book
This chapter is from the book
This chapter is from the book
A Brief Tour of Visual Web Developer
When the installation process completes, take a moment to poke through Visual Web Developer. To launch Visual Web Developer, go to the Start menu, choose Programs, and click Microsoft Visual Web Developer 2008 Express Edition. Figure 1.8 shows Visual Web Developer when it loads.
)
Figure 1.8 The Start Page shows when Visual Web Developer is loaded.
When you open Visual Web Developer, the Start Page is initially shown. This Start Page includes a list of Recent Projects in the upper-left corner, a Getting Started section with some links for accomplishing common tasks in the bottom-left corner, and a list of recent articles on Microsoft's MSDN site in the right column.
On the left you'll find the Toolbox. When you view the Start Page, the Toolbox is empty, but when you work with an ASP.NET page, it contains the plethora of ASP.NET Web controls that can be added to the page. (We'll discuss what Web controls are and their purpose in the next hour.) Two other windows share the left region with the Toolbox: CSS Properties and Manage Styles. These windows are used to define style and appearance settings for the HTML and Web control elements within a web page.
To the right of the screen, you'll find the Solution Explorer. Again, on the Start Page this is empty, but when you load or create an ASP.NET website, the Solution Explorer will list the website's files. These files include database files, HTML pages, ASP.NET pages, image files, CSS files, configuration files, and so on. In addition to the Solution Explorer, the right portion of the screen is also home to the Database Explorer and Properties windows. The Database Explorer lists the databases associated with the project and provides functionality for creating, editing, and deleting the structure and contents of these databases. When you design an ASP.NET page, the Properties window displays information about the currently selected Web control or HTML element.
Creating a New ASP.NET Website
To create and design an ASP.NET page, we must first create an ASP.NET website. From Visual Web Developer, you can choose several ways to create a new ASP.NET website. You can go to the File menu and choose the New Web Site option; you can click the New Website icon in the Toolbar; or you can click the Create Web Site link in the Recent Projects pane of the Start Page.
All these approaches bring up the New Web Site dialog box, as shown in Figure 1.9. Let's take a moment to create a website. For now, don't worry about all the options available or what they mean because we'll discuss them in detail in Hour 3, "Using Visual Web Developer." Leave the Templates selection as ASP.NET Web Site, the Location drop-down list as File System, and the Language drop-down list as Visual Basic. The only thing you should change is the actual location of the website. Place the website in a folder named MyFirstWebsite on your desktop.
)
Figure 1.9 Create a new ASP.NET website in a folder on your desktop.
After you create the new website, your screen should look similar to Figure 1.10. When creating the new website, Visual Web Developer automatically created an App_Data folder, an ASP.NET page named Default.aspx, and a web configuration file (web.config). This folder and these two files are shown in the Solution Explorer.
)
Figure 1.10 A new website has been created with an ASP.NET page, Default.aspx.
The Default.aspx page that was automatically created is opened and its contents are shown in the main window. Right now this ASP.NET page consists of just HTML. As we will see in future hours, ASP.NET pages can also contain Web controls and server-side source code. Typically, ASP.NET pages are broken into two files: one that contains the HTML markup and Web control syntax, and another that contains just the code. In fact, if you click the plus icon on Default.aspx in the Solution Explorer, you'll see that there's another file, Default.aspx.vb, that is nested. This is the source code file for Default.aspx.
When you're working with the HTML elements and Web controls in an ASP.NET web page, you'll notice three views. The first is the Source view, which shows the page's underlying HTML markup and Web control syntax. This is the default view, and the one shown in Figure 1.10. The second view, called the Design view, provides a simpler alternative to specifying and viewing the page's content. In the Design view you can drag and drop HTML elements and Web controls from the Toolbox onto the design surface. You don't need to type in the specific HTML or Web control syntax. The third view, Split, divides the screen in half, showing the Source view in the top portion and the corresponding Design view in the bottom. You can toggle between the Source, Design, and Split views for an ASP.NET page by using the Design, Source, and Split buttons at the bottom of the main window.
Creating and Testing a Simple ASP.NET Web Page
To view or test an ASP.NET web page, a browser needs to make a request to the web server for that web page. Let's test Default.aspx. Before we do, though, let's add some content to the page, because right now the page's HTML will not display anything when viewed through a browser. From the Source view, place your cursor between the <div> and </div> tags in Default.aspx and add the following text:
<h1>Hello, World!</h1>
This displays the text Hello, World! in a large font. After entering this text, go to the Debug menu and choose the Start Without Debugging menu option. This starts the ASP.NET Development Web Server and launches your computer's default browser, directing it to http://localhost:portNumber/MyFirstWebsite/Default.aspx (see Figure 1.11). The portNumber portion in the URL will depend on the port selected by the ASP.NET Development Web Server.
)
Figure 1.11 Default.aspx, when viewed through a browser.
This ASP.NET page isn't very interesting because its content is static. It does, however, illustrate that to view the contents of an ASP.NET page, you must start the ASP.NET Development Web Server and request the page through a browser.