Walkthrough: Creating a New ASP.NET Web Site

Artikel
11/16/2012

This walkthrough gives you an introduction to the Web development features of Microsoft Visual Web Developer Express and Microsoft Visual Studio 2008. It guides you through creating a simple page. Additionally, this walkthrough introduces you to the WYSIWYG visual designer.

Tasks illustrated in this walkthrough include the following:

Creating a file-system Web site.
Familiarizing yourself with Visual Web Developer.
Running pages by using the Visual Studio Development Server, which lets you test ASP.NET Web pages locally and does not require IIS.

Prerequisites

To complete the walkthrough, you need the following:

Microsoft Visual Studio 2008 or Microsoft Visual Web Developer Express. For download information, see the Visual Studio Development Center Web site.

Creating a Web Site and Page

In the first part of the walkthrough, you will create an ASP.NET Web site that has a default page. This Web site will be a file-system Web site that does not require Microsoft Internet Information Services (IIS). This enables you to create and run the page from the local file system of your computer.

A file-system Web site is one that stores pages and other files in a folder that you select somewhere on the local computer. Other Web-site options include a local IIS Web site, which stores the files in a subfolder of the local IIS root (typically, \Inetpub\wwwroot\). An FTP site stores files on a remote server that you access by using File Transfer Protocol (FTP). A remote site stores files on a remote server that you can access across a local network. For more information, see Walkthrough: Editing Web Sites with FTP in Visual Web Developer.

Note

You can also create Web sites by using Web application projects. For more information, see Web Application Projects Overview.

To create a file system Web site

Open Visual Web Developer.
In the File menu, click New Web Site.

The New Web Site dialog box is displayed, as shown in the following illustration.
Under Visual Studio installed templates, click ASP.NET Web Site.
In the Location box, select the File System box, and then enter the name of the folder where you want to keep the pages of the Web site.

For example, type the folder name C:\Tasks.
In the Language list, click Visual Basic or Visual C# to select the programming language that you will use throughout the Web project

Note

In this walkthrough, you will not write any program code.
Click OK.

Visual Web Developer creates the folder and a new page named Default.aspx. By default, when a new page is created, Visual Web Developer displays the page in Source view, where you can see the page's HTML elements. The following illustration shows a default Web page in Source view.

A Tour of Visual Web Developer

Before you continue, it is useful to become familiar with the Visual Web Developer development environment. The following illustration shows you some of the windows and tools in Visual Web Developer.

Diagram of Visual Web Developer environment

Schematic of IDE windows and tools

Examine the previous illustration and match the text to the following list, which describes the most frequently used windows and tools. (Not all windows and tools that you see are listed here, only those marked in the previous illustration.)

Toolbars. Provide commands for formatting text, finding text, and so on. Some toolbars are available only when you are working in Design view.
Solution Explorer. Displays the files and folders in the Web site.
Document window. Displays the documents you are working on in tabbed windows. You can switch between documents by clicking tabs.
View tabs. Present different views of the same document. Design view is a near-WYSIWYG editing surface. Source view is the editor for the page that displays the markup. Split view displays both Design view and Source view for the document. You will work with Design view and Source view later in this walkthrough. If you prefer to open Web pages in Design view, on the Tools menu, click Options, select the HTML Designer node, and change the Start Pages In option.
Properties window. Lets you change settings for the page, HTML elements, controls, and other objects.
CSS Properties window. Displays the current CSS styles when Design view is active.
Manage Styles and Apply Styles windows. Help you control the CSS styles of the Web site.
Toolbox. Provides controls and HTML elements that you can drag onto a page. Toolbox elements are grouped by common function.
Database Explorer. Displays database connections. If you do not see the Database Explorer window in Visual Web Developer, on the View menu, click Other Windows, and then click Database Explorer.

Note

The Database Explorer window in Visual Web Developer is named Server Explorer in the full version of Visual Studio.

You can rearrange, resize, and dock the windows to suit your preferences. The View menu enables you to display additional windows.

To tour the development environment

On the View menu, click Toolbars.

A submenu of available toolbars is displayed. Toolbars that are currently selected appear with a check box next to the toolbar selection.
Scroll to the bottom of the toolbars list and click Customize.

The Customize dialog box is displayed.
Review the available toolbars. When you are finished, click Close.
In the View menu, click Solution Explorer.

The Solution Explorer window is displayed. By default, this window is docked on one side of the Visual Web Developer environment.
Right-click the top item in the in site list in Solution Explorer.

A shortcut menu of common Web site operations is displayed.
Press ESC to close the shortcut menu.
In Solution Explorer, right-click the Web.config file and then click Open to open the file in the document window.
Double-click the Default.aspx page to open the page in the document window. Double-clicking a file is an alternative to using the Open command of the shortcut menu.

Notice that the name of each open page is displayed in a tab at the top of the document window.
At the bottom of the document window, click Split to display Source view and Design view at the same time.
In the View menu, click Properties Window.

The Properties window is displayed.

When you select an object in the document window, the Properties window displays the properties of the selected object.
In the Source view pane, select the form element, and then in the Properties window, examine the available properties.
In the View menu, click Toolbox.

The Toolbox window is displayed.
In Design view, from the Standard tab of the Toolbox, drag a Button control to the document and drop it in the div element.

Notice that Source view is updated with the appropriate markup.
On the View menu, click Database Explorer.

The Database Explorer window is displayed.

Note

The Database Explorer window in Visual Web Developer is named Server Explorer in the full version of Visual Studio.
Right-click Data Connections to see the available database options.

Creating an ASP.NET Web Page

When you create a new Web site, Visual Web Developer adds an ASP.NET Web page (Web Forms page) named Default.aspx. You can use the Default.aspx page as the home page for the Web site. However, for this walkthrough, you will create and work with a new page.

To add a page to the Web site

In the document window, right-click the tab for the Default.aspx page and then click Close.
If you are asked to save changes, click No.
In Solution Explorer, right-click the Web site (for example, C:\Tasks), and then click Add New Item.

The Add New Item dialog box is displayed.
Under Visual Studio installed templates, click Web Form.
In the Name box, type Home.aspx.
In the Language list, select the programming language that you prefer to work with (Visual Basic or C#).
Clear the Place code in separate file check box.

The following illustration shows the Add New Item dialog box.
Click Add.

Visual Web Developer creates the new page. By default, the page is displayed in Source view.

Adding HTML to the Page

In this part of the walkthrough, you will add some static text to the page.

To add text to the page

At the bottom of the document window, click the Design tab to switch to Design view.
On the page, type To-Do List.

Running the Page

Before you continue, you can test the page. To run a page, you need a Web server. In a production Web site, you use IIS as the Web server. However, to test a page, you can use the Visual Studio Development Server, which runs locally and does not require IIS. For file system Web sites, the default Web server in Visual Web Developer is the Visual Studio Development Server.

To run the page

Press CTRL+F5 to run the page.

Visual Web Developer starts the Visual Studio Development Server. An icon appears on the Windows toolbar to indicate that the Visual Web Developer Web server is running, as shown in the following illustration:

The page is displayed in the browser. Although the page you created has an extension of .aspx, it currently runs like any HTML page.

Note

If the browser displays a 502 error or an error that indicates that the page cannot be displayed, you might have to configure your browser to bypass proxy servers for local requests. For details, see How to: Bypass a Proxy Server for Local Web Requests.
Close the browser.

Next Steps

This walkthrough has illustrated the basic features of the Visual Web Developer.

For improved file control, consider storing Web site files in a source-control system such as Visual SourceSafe. For more information, see Introducing Source Control.

Dela via