Walkthrough: Creating a New ASP.NET Web Site

  • Article

This walkthrough gives you an introduction to the Web development features of Microsoft Visual Web Developer Express and Microsoft Microsoft Visual Studio 2010. 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:

Prerequisites

To complete the walkthrough, you need the following:

  • Microsoft Microsoft Visual Studio 2010 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 ASP.NET Web Application Projects.

To create a file system Web site

  1. Open Visual Web Developer.

  2. In the File menu, click New Web Site.

    The New Web Site dialog box is displayed, as shown in the following illustration.

    New Web Site Dialog Box screenshot

  3. Under Installed Templates, click Visual Basic or C# and then select ASP.NET Web Site.

  4. In the Web location box, select File System 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.

  5. Click OK.

    Visual Studio creates a Web project that includes prebuilt functionality for layout (a master page, the Default.aspx and About.aspx content pages, and a cascading style sheet), for Ajax (client script files), and for authentication (membership). For more information about how to select project templates, see Visual Studio Project Templates for Web Applications.

    When a new page is created, by default, Visual Web Developer displays the page in Source view, where you can see the page's HTML elements. The following illustration shows the default Web page in Source view.

    Default 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

  1. 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.

  2. Scroll to the bottom of the toolbars list and click Customize.

    The Customize dialog box is displayed.

  3. Review the available toolbars. When you are finished, click Close.

  4. 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.

  5. Right-click the top item of the site list in Solution Explorer.

    A shortcut menu of common Web site operations is displayed.

  6. Press ESC to close the shortcut menu.

  7. In Solution Explorer, right-click the Web.config file and then click Open to open the file in the document window.

  8. 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.

  9. At the bottom of the document window, click Split to display Source view and Design view at the same time.

  10. 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.

  11. In the Source view pane, select the first a (anchor) element, and then in the Properties window, examine the available properties.

  12. In the View menu, click Toolbox.

    The Toolbox window is displayed.

  13. In Design view, from the Standard tab of the Toolbox, drag a Button control to the document and drop it at the bottom of the Default.aspx page.

    Notice that Source view is updated with the appropriate markup.

  14. On the View menu, click Server Explorer.

    The Server Explorer window is displayed.

    Note

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

  15. 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

  1. In the document window, right-click the tab for the Default.aspx page and then click Close.

  2. If you are asked to save changes, click No.

  3. 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.

  4. In the template list, select Web Form.

  5. In the Name box, type Home.aspx.

  6. Clear the Place code in separate file check box.

    For this walkthrough, you will not be linking the new page to a master page.

    The following illustration shows the Add New Item dialog box.

    Add New Item dialog box

  7. 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

  1. At the bottom of the document window, click the Design tab to switch to Design view.

  2. 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 ASP.NET 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 ASP.NET Development Server.

To run the page

  1. Press CTRL+F5 to run the page.

    Visual Web Developer starts the ASP.NET 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:

    Development Web Server icon

    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.

  2. 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.

See Also

Concepts

ASP.NET Walkthroughs by Scenario