Chapter 1 : Chapter 1 Introduction to Asp.net 1
: Walkthrough: Creating a Basic Web Page in Visual Studio
This walkthrough provides you with an introduction to the Web development environment
in Microsoft Visual Studio 2010 and in Microsoft Visual Web Developer Express. This
walkthrough guides you through creating a simple ASP.NET Web page and illustrates the
basic techniques of creating a new page, adding controls, and writing code.
Tasks illustrated in this walkthrough include:
Creating a file system Web site project.
Familiarizing yourself with Visual Studio.
Creating a single-file ASP.NET page.
Running pages by using the Web server that is built into Visual Studio for testing.
Creating a Web Site Project and a Page
In this part of the walkthrough, you will create a Web site project and add a new page to it. You will also add HTML text and run the page in your Web browser.
For this walkthrough, you will create a file system Web site project that does not require that you work with Microsoft Internet Information Services (IIS). Instead, you will create and run your page in the local file system.
A file system Web site project is one that stores pages and other files in a folder that you choose somewhere on your computer. 2
Slide 3 : To create a file system Web site
Open Microsoft Visual Studio 2010 or Microsoft Visual Web Developer Express.
On the File menu, click New Web Site.
The New Web Site dialog box appears, as shown in the following illustration: 3
Slide 4 : 4
Slide 5 : Under Installed Templates, click Visual Basic or C# and then select ASP.NET Web Site.
When you create a Web site project, you specify a template. Each template creates a Web project that contains different files and folders. In this walkthrough, you are creating a Web site based on the ASP.NET Web Site template, which creates files and folders that are typically used in ASP.NET Web sites.
In the Web Location box, select File System, and then enter the name of the folder where you want to keep the pages of your Web site.
For example, type the folder name C:\BasicWebSite.
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 (ASP.NET membership). When a new page is created, by default Visual Studio displays the page in Source view, where you can see the page's HTML elements. The following illustration shows the Source view of a Web page. 5
Slide 6 : 6
Slide 7 : A Tour of the Visual Studio Web Development Environment
Before you proceed with working on the page, it is useful to familiarize yourself with the Visual Studio development environment. The following illustration shows you the windows and tools that are available in Visual Studio and Microsoft Visual Web Developer Express. 7
Slide 8 : The Visual Studio environment 8
To familiarize yourself with the Web designerExamine the preceding illustration and match the text to the following list, which describes the most commonly used windows and tools. (Not all windows and tools that you see are listed here, only those marked in the preceding illustration.)1) Toolbars. Provide commands for formatting text, finding text, and so on. Some toolbars are available only when you are working in Design view.2) Solution Explorer window. Displays the files and folders in your Web site.3) Document window. Displays the documents you are working on in tabbed windows. You can switch between documents by clicking tabs.4) Properties window. Allows you to change settings for the page, HTML elements, controls, and other objects.5) View tabs. Present you with different views of the same document. Design view is a near-WYSIWYG editing surface. Source view is the HTML editor for the page. Split view displays both the Design view and the Source view for the document. You will work with the Design and Source views 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. : To familiarize yourself with the Web designerExamine the preceding illustration and match the text to the following list, which describes the most commonly used windows and tools. (Not all windows and tools that you see are listed here, only those marked in the preceding illustration.)1) Toolbars. Provide commands for formatting text, finding text, and so on. Some toolbars are available only when you are working in Design view.2) Solution Explorer window. Displays the files and folders in your Web site.3) Document window. Displays the documents you are working on in tabbed windows. You can switch between documents by clicking tabs.4) Properties window. Allows you to change settings for the page, HTML elements, controls, and other objects.5) View tabs. Present you with different views of the same document. Design view is a near-WYSIWYG editing surface. Source view is the HTML editor for the page. Split view displays both the Design view and the Source view for the document. You will work with the Design and Source views 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. 9
6) Toolbox. Provides controls and HTML elements that you can drag onto your page. Toolbox elements are grouped by common function.7) Server Explorer/Database Explorer. Displays database connections. If Server Explorer is not visible, on the View menu, click Server Explorer or Database Explorer. Note The Server Explorer window is named Database Explorer in Microsoft Visual Web Developer Express. To see all available menu items in Microsoft Visual Web Developer Express, on the Tools menu, click Settings, and then click Expert Settings. Creating a New ASP.NET Web Forms PageWhen you create a new Web site using the ASP.NET Web Site project template, Visual Studio adds an ASP.NET page (Web Forms page) named Default.aspx. You can use the Default.aspx page as the home page for your Web site. However, for this walkthrough, you will create and work with a new page. : 6) Toolbox. Provides controls and HTML elements that you can drag onto your page. Toolbox elements are grouped by common function.7) Server Explorer/Database Explorer. Displays database connections. If Server Explorer is not visible, on the View menu, click Server Explorer or Database Explorer. Note The Server Explorer window is named Database Explorer in Microsoft Visual Web Developer Express. To see all available menu items in Microsoft Visual Web Developer Express, on the Tools menu, click Settings, and then click Expert Settings. Creating a New ASP.NET Web Forms PageWhen you create a new Web site using the ASP.NET Web Site project template, Visual Studio adds an ASP.NET page (Web Forms page) named Default.aspx. You can use the Default.aspx page as the home page for your Web site. However, for this walkthrough, you will create and work with a new page. 10
To add a page to the Web site1) Close the Default.aspx page. To do this, right-click the tab that displays the file name and then click Close.2) In Solution Explorer, right-click the Web site (for example, C:\BasicWebSite), and then click Add New Item.The Add New Item dialog box is displayed. The following illustration shows an example of the Add New Item dialog box. : To add a page to the Web site1) Close the Default.aspx page. To do this, right-click the tab that displays the file name and then click Close.2) In Solution Explorer, right-click the Web site (for example, C:\BasicWebSite), and then click Add New Item.The Add New Item dialog box is displayed. The following illustration shows an example of the Add New Item dialog box. 11
Slide 12 : 12
3) In the template list, select Web Form.4) In the Name box, type FirstWebPage.When you created the Web site project, you specified a default language based on the project template that you selected. However, each time you create a new page or component for your Web site, you can select the programming language for that page or component. You can use different programming languages in the same Web site.5) Clear the Place code in separate file check box. In this walkthrough, you are creating a single-file page with the code and HTML in the same page. The code for ASP.NET pages can be located either in the page or in a separate class file.6) Click Add.Visual Studio creates the new page and opens it. Adding HTML to the PageIn this part of the walkthrough, you will add some static text to the page. To add text to the page1) At the bottom of the document window, click the Design tab to switch to Design view. Design view displays the page that you are working on in a WYSIWYG-like way. At this point, you do not have any text or controls on the page, so the page is blank except for a dashed line that outlines a rectangle. This rectangle represents a div element on the page. : 3) In the template list, select Web Form.4) In the Name box, type FirstWebPage.When you created the Web site project, you specified a default language based on the project template that you selected. However, each time you create a new page or component for your Web site, you can select the programming language for that page or component. You can use different programming languages in the same Web site.5) Clear the Place code in separate file check box. In this walkthrough, you are creating a single-file page with the code and HTML in the same page. The code for ASP.NET pages can be located either in the page or in a separate class file.6) Click Add.Visual Studio creates the new page and opens it. Adding HTML to the PageIn this part of the walkthrough, you will add some static text to the page. To add text to the page1) At the bottom of the document window, click the Design tab to switch to Design view. Design view displays the page that you are working on in a WYSIWYG-like way. At this point, you do not have any text or controls on the page, so the page is blank except for a dashed line that outlines a rectangle. This rectangle represents a div element on the page. 13
Slide 14 : 2) Click inside the rectangle that is outlined by a dashed line.3) Type Welcome to Visual Web Developer and press ENTER twice.The following illustration shows the text you typed in Design view. 14
Slide 15 : 4) Switch to Source view.
You can see the HTML that you created by typing in Design view, as shown in the following illustration. 15
Slide 16 : 16
Slide 17 : Running the Page
Before you proceed with adding controls to the page, you can try running it. To run a page, you need a Web
server. In a production Web site, you use IIS as your 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 site projects, the
default Web server in Visual Studio and Microsoft Visual Web Developer Express is the Visual Studio
Development Server.
To run the page
1) In Solution Explorer, right-click FirstWebPage.aspx and select Set as Start Page.
2) Press CTRL+F5 to run the page.
Visual Studio starts the Visual Studio Development Server. An icon appears in the Windows taskbar to indicate that the Visual Studio Development Server is running, as shown in the following illustration.
The page is displayed in the browser. Although the page you created has a file-name extension of .aspx, it currently runs like any HTML page.
To display a page in the browser you can also right-click the page in Solution Explorer and select View in Browser.
3) Close the browser. 17