- What Is ASP.NET?
- Installing the .NET Framework, Visual Web Developer, and SQL Server 2008
- 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 give Visual Web Developer a test spin. To launch Visual Web Developer, go to the Start menu, choose Programs, and click Microsoft Visual Web Developer 2010 Express. Figure 1.8 shows Visual Web Developer after it has loaded.
)
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 on the left and a Get Started section on the right that includes links for accomplishing common tasks. There's also a Latest News tab on the Start Page that lists recent developer articles from Microsoft's website.
On the far left you'll find tabs for the Toolbox, CSS Properties, and Manage Styles windows. You can expand these windows by hovering your mouse over the tabs. At this point, these three windows are empty, but when you're creating or editing an ASP.NET page they'll include a variety of options. For example, the Toolbox is where you'll find the plethora of ASP.NET Web controls that can be added to an ASP.NET page. (We'll discuss what Web controls are and their purpose in the next hour.) The CSS Properties and Manage Styles windows are used to define style and appearance settings for the HTML and Web control elements within a web page.
On the right of the screen, you'll find the Solution Explorer. From the Start Page the Solution Explorer 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. 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.
Creating a New ASP.NET Website
To create and design an ASP.NET page, we must first create an ASP.NET website. There are several ways to create a new ASP.NET website from Visual Web Developer. 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 New Web Site link above the Recent Projects pane of the Start Page.
All these approaches bring up the New Web Site dialog box, which is 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." By default, the New Web Site dialog box should have Visual Basic as the selected programming language, ASP.NET Web Site as the selected website template, and the File System option selected in the Web location drop-down list. Change the website template from ASP.NET Web Site to Empty Web Site. Next, change the location of the website so that it will be created in a folder named MyFirstWebsite on your desktop. You can type in the name or click the Browse button to select the folder.
)
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.
)
Figure 1.10 A new website has been created that contains a single file, web.config.
Creating a Simple ASP.NET Page
When you fire up your browser and visit a website, your browser requests a particular web page from the web server. At the moment, our website does not yet contain any ASP.NET pages, which means there is no way to visit the site. Let's add an ASP.NET page to our website.
Right-click the website name in the Solution Explorer and choose the Add New Item menu option. This brings up the Add New Item dialog box shown in Figure 1.11. The default settings add a new ASP.NET page to the project named Default.aspx. We'll examine this dialog box and its various options in Hour 3. For now, make sure that the Visual Basic programming language and Web Form item templates are selected. Ensure that the name is set to Default.aspx and that the Place code in separate file check box is checked, and then click the Add button.
)
Figure 1.11 Add a new ASP.NET page to the website.
Figure 1.12 shows Visual Web Developer after the Default.aspx page has been added to the website. Note that Default.aspx is listed in the Solution Explorer and that its contents are displayed in the main window.
)
Figure 1.12 Visual Web Developer displays the contents of the Default.aspx file.
Right now Default.aspx 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 the source code. If you expand Default.aspx in the Solution Explorer, you'll see that there's another file, Default.aspx.vb. This is the source code file for Default.aspx.
There are three "views" from which you can work with the HTML elements and Web controls in an ASP.NET page. The first is the Source view, which shows the page's HTML markup and Web control syntax. This is the default view and the one shown in Figure 1.12. 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 or by typing Shift-F7 on your keyboard.
Testing the ASP.NET Page
For us to view or test an ASP.NET 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 Solution Explorer, right-click Default.aspx, and choose the View in Browser 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.13). The portNumber portion in the URL will depend on the port selected by the ASP.NET Development Web Server.
)
Figure 1.13 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.