Export (0) Print
Expand All

Lab 6: Building a Browser-Based Application

Visual Studio .NET 2003
 

Visual Studio Team
Microsoft Corporation

August 2001

Summary: In this hands-on lab, you will use a Web form to build a step-by-step Hello World Web application. (7 printed pages)

Download the Experience Visual Studio .NET Lab files from the introduction topic.

Contents

Introduction
Creating a Hello World Web Application
Editing a Web Form
Closing Out of Lab 6

Introduction

In this hands-on lab, you will use a Web form to build a step-by-step Hello World Web application.

Creating a Hello World Web Application

  1. Click Start, click Programs, click Microsoft Visual Studio .NET, and then click Microsoft Visual Studio .NET. The Start page appears as in Figure 1.

    Figure 1. Start page in the Visual Studio .NET IDE

  2. Click New Project. The New Project window appears as in Figure 2.

    Figure 2. New Project window

  3. From the Project Types pane, click Visual Basic Projects, and from the Templates pane, click ASP.NET Web Application. Leave the default values in the Name (WebApplication1) and Location (http://<SERVER>) fields.
  4. Click OK. A blank Web form design grid titled "WebForm1.aspx" appears as in Figure 3.

    Figure 3. Blank Web form design grid

  5. On the View menu, click Toolbox (or click the Toolbox icon).

    Use the Toolbox menu to create your Web form. The Toolbox menu displays a list of controls available in Web forms.

  6. From the Toolbox menu, click and drag a Label to the top left of the WebForm1.aspx design grid.
  7. From the Toolbox menu, click and drag a TextBox to the right side of the label that you placed in step 2.
  8. From the Toolbox menu, click and drag a Button to the right side of the text box that you placed in step 3.
  9. From the Toolbox menu, click and drag another TextBox and place it under the first text box that you placed in step 3. Your Web form is now similar to the one shown in Figure 4.

    Figure 4. Web Form design grid with objects

Editing a Web Form

You will now edit the objects that you dragged to your form (WebForm1.aspx). You will use the Properties box on the lower right corner of the page to edit the properties of the label and the button. You will also add a procedure to the button.

  1. On the form, click Label.
  2. From the Properties box, change the Text field from "Label" to "Enter Name:".
  3. On the form, click Button.
  4. From the Properties box, change the Text field from "Button" to "OK".
  5. On the form, double-click newly created button titled OK. The source code for WebForm1.aspx.vb appears with two procedures: Page_Init and Button1_Click. In this lab, you will modify only the Button1_Click procedure.
    Caution   Do not edit the Page_Init procedure because it is used by the Web Form Designer.
  6. Enter the following code under the Button1_Click procedure:
    If   TextBox1().Text <> "" Then
         TextBox2().Text = "Hello " & TextBox1().Text & "!"
    End If
    

    When this code has been entered, the application is ready to run.

  7. Press F5.

    The application compiles and is loaded into a new browser window as in Figure 5.

    Figure 5. Browser view of the Web form

  8. In the top text box, enter a name such as "John".
  9. Click OK. Your edited Web form appears as shown in Figure 6.

    Figure 6. Web form results

Closing Out of Lab 6

Follow these steps to close the application.

  1. To close Internet Explorer, click File, and then click Close.
  2. To close the IDE, click File, and then click Exit.

Other articles and labs in the Experience Visual Studio .NET set include:

Introducing the Visual Studio .NET Lab Series

Lab 1: Hello World

Lab 2: XML Comments

Lab 3: ASP vs. ASP.NET

Lab 4: Server Controls Walkthrough

Lab 5: Using the Visual Basic Upgrade Wizard

Lab 7: Inheritance and Override

Show:
© 2014 Microsoft