Creating a Web Form

From GCHSWiki
Jump to: navigation, search

Begin the Project

This is a simple step-by-step exercise to create a Web application that displays a Hello message on a document in a browser window.

  • Open Visual Studio 2010
  • Select "New Project" from the Start Page. In the New Project dialog box, under Visual Basic select "Web" the File and in the middle column select ASP.NET Empty Web Application. Set the Web site name to "Hello" and change the Location to your Chapter 4 folder. Click OK.
  • Right click in the Solution Explorer (go to View / Solution Explorer if the explorer is not on your screen) and select Add -> New Item. The ASPX Web Form will be the default so change the Name to Default.aspx and click ADD.

Create the User Interface

You add elements to a Web page in a manner similar to writing text in a word processor. You must press Enter to move to a new line and press the spacebar to move across a line.

  • Click underneath the box at top of the page and press Enter a few times: type "Enter Name: " (do not include the quotes, but do include the colon and a space).
  • Add a TextBox control from the Standard section of the toolbox. You can drag the text box onto the form or double-click the tool in the toolbox. Double-clicking makes the text box appear at the insertion point. (Note: The text box is a server control, and the text "Enter name:" is static HTML. You will learn more about these elements later in this chapter.)
  • Set the ID property of the text box to txtName. You may want to click the Alphabetic button in the Properties window to sort the properties. The ID property appears at the top of the list due to the parentheses, just as the Name property appears at the top of the list in Windows Form.
  • Click after the text box, press Enter twice, and add a Label control.
  • Set the Label's ID property to lblMessage and delete the Text property. The label will display its ID property at design time but not at run time.
  • Click after the label, press Enter a couple of times, and add a Button control. Set the ID property to btnSubmit and the Text property to "Submit".
  • In the Properties windows, drop down the list of objects and select DOCUMENT, which is teh Web Form. Set the BgColor property (background color) to a color of your choice.
  • Set the docuemnt's Title property to "Hello Application". The Title property displays in the title bar of the browser when you run the application.

Add Code

  • Double-click on the Submit button and add the following code.
'Web Site:      Chapter 4 hello
'Web Page:      Default.aspx
'Programmer:    Your name here
'Date:          Jan 2014
'Description:   Concatenate the name and display in a label

Partial Class _Default
    Inherits System.Web.UI.Page

    Protected Sub btnSubmit_Click(Byval sender As Object, ByVal e As System.EventArgs) Handles btnSubmit.Click
        'Display the name and a message.

         lblMessage.Text = "Hello, " & txtName.Text & "!"
    End Sub
 End Class

Run the Web Application

The menu choices and toolbar buttons for running a Web application differ somewhat from Visual Web Developer, and the full version of Visual Studio.

  • Run the project. In the full VS, you can run without debugging using Ctrl + F5, even though it does not appear on the menu. (Note: You also can right-click on the aspx file or on the page in the Document window and select View in Browser.
  • The default browser should launch and open the page with your page showing.
  • Enter a name and press the Submit button. A "Hello", message should appear in the label.
  • Close the browser window to end the execution.