CIS Logo SVC Logo

   Computing & Information Systems
   Department

 

Schoology Facebook        Search CIS Site      Tutorials

Survey Web App



The Goals for this Example


Our main goal is to work our way through a first example that is relatively simple, just to get used to working with Visual Studio and web applications. In the process we will use a text box and a dropdown list. We also learn how to set up a new web site via Visual Studio.

The Survey Example


The following shows the end result so that you know what we are aiming for.

Creating the Example


This section outlines the directions for building this web app.

Creating a Web Site

  1. Begin by starting Visual Studio.
  2. Click on File, New Web Site.
  3. Under Templates, select Visual Basic.
  4. Click on ASP.NET Empty Web Site.
  5. At the bottom of the dialog box, select an appropriate location for this web site. At St. Vincent College, students might well use their W drives. Thus the location might be W:\WebSite1. The WebSite1 folder name is considered to be the name of the web site.
  6. Click OK.
  7. Next, we want to use Solution Explorer. If it is not already visible in Visual Studio, click on View, Solution Explorer.
  8. In Solution Explorer, right click the web site (not the solution which encompasses it). Click on Add, Add New Item, Web Form. Make sure that VB, not C#, is the selected language. Name your file Survey.aspx and make sure that the check box for "Place code in separate file" is checked. Then click the Add button.

Working with the Form

  1. As you go through the following, refer to the completed form to see what you are trying to produce.
  2. If the web form isn't on the screen, open it by double clicking Survey.aspx in Solution Explorer.
  3. If necessary, use View, Properties Window and View, Toolbox so that these 2 items are available.
  4. Change the title of the form document to Survey. This is probably easiest in Source view, where you simply type Survey between the opening <title> and closing </title> tags.
  5. Next, use Design View on your web form, not Source view. (Split view might work reasonably as well.)
  6. Add the following controls to your web form by dragging them from the Toolbox onto the form (inside the div section):
    1. One label. Once the label is on the form, click on it (just once) so that it is selected. Then look in the Properties window. (Use View, Properties Window if you can't find Properties.) Change the Text property to "Your name:".
    2. One text box. The default ID of TextBox1 should be fine, though in later projects we will sometimes change the IDs.
    3. Next, add another label and change its Text property to "Your favorite:".
    4. Add a DropDownList control. As you move the mouse over this control, you should be able to get a little box to show up above it. This is called a "smart tag" and offers you several options for configuring the drop down list. Skip the Choose Data Source option, but do check Enable AutoPostBack. Then select Edit Items. This puts you into the ListItem Collection Editor, where you manually enter the items for the drop down list. Click the Add button which will result in a ListItem being added on the left side. On the right side, click to the right of Text and type in an item that the user of the survey can pick as being the favorite. Note that Value will automatically be given the same string as its contents. Then click Add again and fill in another item, etc. For my version of the survey app, I used various foods: Cookies, Hamburgers, Ice cream, Lobster, Pie, Pizza, Tacos, and Watermelon. You can use whatever items you wish. Be sure to add "Select an item:" as one of the list items and make it the first item on the list. You adjust where an item goes in the list by using the up and down arrow buttons in the collection editor. You can move your other items so that they are in alphabetical order.
    5. Finally, add a literal as the last control on your form. This is fairly similar to a label.
  7. Now, how do you line up the controls so that they fit on the form in the desired layout? Click on each control in turn and then on Format, Set Position, Absolute.
  8. The literal, however, does not accept style information such as absolute positioning. So, how can we move it down the page? One way is to put your form into Source View, cut and paste the literal from wherever it is to a position just before the closing </div> tag, and then put several <br /> tags before it. You might have to experiment to see how many of these break tags you need. If you don't want to work with the literal, however, you can use a label instead since it will accept absolute positioning.
  9. If you go to Split View, you will see that you have nested web elements: a body, which contains a form, which contains a div. The controls are supposed to be inside the div section. Drag the bottom edges of the form, and then the div so that you get a rectangle large enough to hold all of your controls in a reasonably-spaced manner. Make sure that the div is totally inside the form, which is totally inside the body. (In Visual Studio you will have a div inside a form inside a page.)
  10. Now you should be able to drag the 5 controls around within the div section so that they approximately match the layout of our running application. This layout can also be seen on our picture of the form in Design view.
  11. Another way to get absolute positioning and a reasonable spacing of the controls is to switch to Source View and adjust the value for the style attribute of each control so that it is the same or similar to what I have for the style information.
  12. At this point save all of your files by using File, Save All (or the corresponding button).

Adding Click Handler Code

  1. Double click the drop down list on your form. This will take you to an editor showing the survey.aspx.vb code-behind file. Here is where you place the Visual Basic code needed to make your web page operational. An outline of the click handler for any SelectedIndexChanged event for the drop down list is automatically supplied. You simply add your code to that outline. Because of the AutoPostBack feature that we turned on in the drop down list, when a user selects a different item in the drop down list, the selected index changes, causing your code in the click handler to run.
  2. We wish to add to the click handler the code to display in the literal control a text message that says Hello, so-and-so, I see that you like such-and-such. The name of the user is taken from the text box and the selected favorite food from the drop down list and inserted into this message at the appropriate spots. You may want to try coding this yourself. Then compare your work to the code below. For a quick solution, just copy the code below into your Survey.aspx.vb file.
  3. You will note that the code below uses If tests to see if the selected item is the "Select an item:" located at index 0. If so, there is no favorite to report, and we do not want to say "Hello, so-and-so, I see you like Select an item:". Similarly, the length of the string in the text box is checked to see if it is greater than zero. There is no sense in printing an empty string as the name of the person with commas around it as in "Hello, , I see that you like such-and-such."
  4. If you changed any of the IDs of your controls, then you will have to adjust the code below so that it uses those IDs.

Partial Class Survey
    Inherits System.Web.UI.Page

    Protected Sub DropDownList1_SelectedIndexChanged(sender As Object, e As EventArgs) _
        Handles DropDownList1.SelectedIndexChanged

        Dim Temp As String
        Temp = TextBox1.Text
        If DropDownList1.SelectedIndex = 0 Then
            If Temp.Length > 0 Then
                Literal1.Text = "Hello, " & TextBox1.Text & "."
            Else   ' Length is 0.
                Literal1.Text = "Hello."
            End If
        Else
            If Temp.Length > 0 Then
                Literal1.Text = "Hello, " & TextBox1.Text & ", I see that you like " & DropDownList1.SelectedValue & "."
            Else   ' Length is 0.
                Literal1.Text = "Hello.  I see that you like " & DropDownList1.SelectedValue & "."
            End If

        End If
    End Sub
End Class

Build Your App

  1. Save all of your files.
  2. Then use Build, Build Website.
  3. If the build succeeded, the Output window will give you a message to that effect.
  4. If not, take a look at the error messages to see if you can tell what went wrong and fix it.
  5. You can close the Output window to get it out of your way.

Testing and Debugging The App

  1. Click the button with the green triangle and labeled Internet Explorer to see your web app running using a simple web server running on your local machine via a certain port. (Equivalently, you can click on Debug, Start Without Debugging.)
  2. Try out the survey app to see if it works as expected.
  3. If the app does not produce the desired results, check your code and the IDs for the controls.
  4. Once you have your app working, be sure to save all of your files in Visual Studio.
  5. Note that our survey app does nothing with the submitted data other than to display it to the user who submitted it. A more useful survey would store the results (perhaps in a database) and make those results available in some fashion.

Back to the main page for ASP.NET 4.5 Web Apps



Author: Br. David Carlson
Last updated: August 28, 2017
Disclaimer