Lab 6: Building a Browser-Based Application
Visual Studio Team
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.
In this hands-on lab, you will use a Web form to build a step-by-step Hello World Web application.
- 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
- Click New Project. The New Project window appears as in Figure 2.
Figure 2. New Project window
- 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.
- Click OK. A blank Web form design grid titled "WebForm1.aspx" appears as in Figure 3.
Figure 3. Blank Web form design grid
- 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.
- From the Toolbox menu, click and drag a Label to the top left of the WebForm1.aspx design grid.
- From the Toolbox menu, click and drag a TextBox to the right side of the label that you placed in step 2.
- From the Toolbox menu, click and drag a Button to the right side of the text box that you placed in step 3.
- 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
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.
- On the form, click Label.
- From the Properties box, change the Text field from "Label" to "Enter Name:".
- On the form, click Button.
- From the Properties box, change the Text field from "Button" to "OK".
- 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.
- 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.
- 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
- In the top text box, enter a name such as "John".
- Click OK. Your edited Web form appears as shown in Figure 6.
Figure 6. Web form results
Follow these steps to close the application.
- To close Internet Explorer, click File, and then click Close.
- To close the IDE, click File, and then click Exit.
Other articles and labs in the Experience Visual Studio .NET set include: