CIS Department > Tutorials > ASP .NET Web Apps > VB 2005

A Web App with a Drop-Down List

The Goals for this Example

One main goal is to show how to use a drop-down list to allow the user to make a selection. In addition, as soon as the selection is made the user's browser is redirected to another page containing the response to the selection. This example also uses a button to send the user back to the initial page and uses links that are images.

Creating the Example

What the App Should Do

The main idea is that the application will present the user with a list of courses in a drop down list. When a selection is made, the user will be redirected to a page giving the course description.
Here is an image of the completed web form as it appears in Visual Studio.
Begin as usual by creating a new Visual Basic project using the ASP .NET web app template. Put the project on your M drive or other easy-to-access location. Name your project Courses or something like that.
In Solution Explorer, rename Default.aspx to be Courses.aspx.
Click on your web form and make sure that the Properties box shows that you are on the Document, and not some subsection of it. Look under Layout, Position, Auto-position Options to see that Absolutely Positioned is selected.
Change the title of the page to "CIS Course Descriptions".

Adding Images that are Links

The image at the top of the web form is a link, so that the user can click on it in order to go to the home page for the CIS Department.
You can use your own image and link destination instead if you like. We will assume here that you use the CIS Department image, but you can modify the instructions if you wish to use something else.
Begin by getting a HyperLink from the Toolbox and placing it at the top of the form.
Use My Computer or similar to copy the cis.jpg file used in the last web app example. Then in Solution Explorer, right click on the project icon and paste in the image.
In Properties for this hyperlink, change the ImageURL to point to cis.jpg.
In a similar way, find NavigateURL under Properties for this link and change the URL to http://cis.stvincent.edu (or whatever you wish). This is so that clicking on the link will take the user to http://cis.stvincent.edu.
Then add a label beneath the image link and set its Text property to CIS Course Descriptions. Under Font, Size in the Properties window, change the size to extra large. Also make the text bold.
Save your work so far by using File, Save All.

The Drop-Down List

Drag a DropDownList from the Toolbox and place it on the form, just below the label.
Change the AutoPostBack property to true. This is what allows the web app to process the user's selection from the drop-down list as soon as the selection is made. This is more convenient that making the user click on a button in order to submit the selection. You are given a chance to turn this property on when you drag the drop-down list onto the form. Or, if you put the mouse near the upper right corner of the list, you will get a "smart tag" that can be clicked on to see the same tasks that can be done on the list, such as enabling AutoPostBack.
Below the drop-down list add a label containing the following text:
Note: This is a programming example only. It does not show all of the CIS courses at Saint Vincent College, nor is there any guarantee that the information is current.
Add a hyperlink for the standard disclaimer below this. See the directions used in our first web app.

Adding Additional Web Forms

In Solution Explorer you should see the name of your project, probably Courses, at the top. Below that is the list of files used by your project.
Right click on the name (or icon) for your project and select Add, Add New Item, Web Form. In the resulting dialog box, fill in cs101.aspx as the name of the new web form.
Click on the Add button and you should get your new, empty web form. In Source view, change the title to "CS 101". Then switch to Design view.
Put the same hyperlink at the top of this form as used on the original web form above. You can do this by copying it (with right click, copy), and then pasting it into the new form (with right click, paste).
We want the resulting cs101.aspx form to look as shown in this screen shot.
Add a label to hold the course number, CS 101, and set it to use a font size of extra large.
Add another label to hold the course title, Survey of Computers and Computing, and have it use a font size of large.
Add one more label to hold the course description. Leave the font size at its normal default value.
Copy in the description for this (and other courses) from the Brief Descriptions of CIS Courses web page.
Add a button below this and change its Text property to Back. Then change its BackColor (background color) property to LightGray.
In the same manner, create web forms for each of the rest of the courses in the list for this web app: CS 110, CS 111, CS 221, CS 230, and CS 310. Hint: You may want to copy all of the items on the cs101.aspx form and paste them into each new form where they can be modified as desired. This easiest way to do this may be to go into Source View on cs101.aspx, highlight the entire body section, the part between <body> and </body>, and then paste it into the new web form (in design view) so as to replace the existing body section. Then go into design view and adjust the text as needed.
Change the title of each to "CS 110", "CS 111", etc.
Save your work by using File, Save All.

Processing the Selection

We need to add code to handle the user's selection in the drop-down list found on the original web form, which we renamed as Courses.aspx.
If Courses.aspx.vb is not already available under one of the editor tabs, find this file in Solution Explorer and double click on it to display it in the editor.
The first step is to add code to show the choices, the course numbers, in the drop-down list. In a fancier application we might read this information from a database, but in this example we simply hard-code the data. Add the code shown below to the Page_Load procedure:


Private Sub Page_Load(ByVal sender As System.Object, _
    ByVal e As System.EventArgs) Handles MyBase.Load
	
    'Put user code to initialize the page here
    If Not IsPostBack Then
        DropDownList1.Items.Add("make a selection")
        DropDownList1.Items.Add("CS 101")
        DropDownList1.Items.Add("CS 110")
        DropDownList1.Items.Add("CS 111")
        DropDownList1.Items.Add("CS 221")
        DropDownList1.Items.Add("CS 230")
        DropDownList1.Items.Add("CS 310")
    End If
End Sub

Note that this code assumes that you left the default name DropDownList1 as the name of the drop-down list. Just change the name in the code if you renamed the drop-down list itself.
If we don't have a postback, then we are on the initial loading of the page. That is when we need to add the course numbers to the drop-down list.
Next, we need to add a whole new procedure to process the course selected by the user in the drop-down list. Here is how to do that:


Private Sub DropDownList1_SelectedIndexChanged(ByVal sender As System.Object, _ 
    ByVal e As System.EventArgs) Handles DropDownList1.SelectedIndexChanged
	
    If DropDownList1.SelectedItem.Text = "CS 101" Then
        Server.Transfer("cs101.aspx")
    ElseIf DropDownList1.SelectedItem.Text = "CS 110" Then
        Server.Transfer("cs110.aspx")
    ElseIf DropDownList1.SelectedItem.Text = "CS 111" Then
        Server.Transfer("cs111.aspx")
    ElseIf DropDownList1.SelectedItem.Text = "CS 221" Then
        Server.Transfer("cs221.aspx")
    ElseIf DropDownList1.SelectedItem.Text = "CS 230" Then
        Server.Transfer("cs230.aspx")
    ElseIf DropDownList1.SelectedItem.Text = "CS 310" Then
        Server.Transfer("cs310.aspx")
    End If
End Sub

Note that there are 2 ways to redirect to a new web page.
One is to use something like Response.Redirect("cs101.aspx"). Although this works fine, it sends a response to the user's browser telling it to redirect to the new web page on the server. This round trip (from server to PC and back) can take a noticeable amount of time.
It is faster to use Server.Transfer("cs101.aspx") since this is handled entirely on the server; no round trip to the user's browser is needed.
We have chosen the faster method above.
You can see all of the code for the main web form in this screen shot of Courses.aspx.vb.

Implementing the Back Buttons

Compared to the above, this is very easy.
Begin by double clicking on the Back button on the cs101.aspx web form.
This should show the code for cs101.aspx.vb in the editor and place in it the outline for a procedure named Button1_Click.
Simply fill in this one line of code inside this procedure:
Server.Transfer("Courses.aspx")
This screen shot for cs101.aspx.vb shows this line of code in the Button1_Click procedure.
Do the same steps to implement the Back Button on each of the other course web forms.
Use File, Save All to save your work.

Building and Testing Your App

Use Build, Build Courses (or whatever you named your project).
If the build succeeded, the Output window will give you a message to that effect.
If not, fix any problems.
Then try out your web app locally by using Debug, Start Without Debugging.
If the Back buttons display as long rectangles, go to Visual Studio and drag the right edge of each to widen the button a bit. That sometimes helps.
If you watch carefully you will probably see one strange thing: Once you have selected a course (and possibly used the Back button), the browser seems to display the wrong URL at the top of each page. This is because of our use of the quick Server.Transfer method. It tells the server to immediately switch to the new page, leaving the URL bar still holding the old URL. If this nuisance bothers you, you can use the slower Response.Redirect instead as it does not suffer from this problem.
You may also have realized that the design used in this web app does not scale well. It works fine for a list of 6 courses, but would be unwieldy with 100 courses. In the latter case, we might have the information on the courses in a database and have our web app retrieve the data from there. Then we would not need to manually add each course number to the drop-down list, nor have a separate web form containing the description of each course.

Publishing The Web App

You may wish to publish this project to a web server, as in the calculate web app.
Once the app is working, use Build, Publish. Choose to publish All Project Files. In CS 305 at Saint Vincent College you can publish to your W drive, which is your web folder on the cis2.stvincent.edu server. Click on the Create Folder button to make a new folder to hold your web app. Use a name such as Courses for the folder.
Remember that you need to ask your web server administrator to convert your project folder (the one published to the web server) to an IIS web application.
Try looking at your web app by going to the appropriate URL for the above web page. For the example described above, the correct URL would be http://cis2.stvincent.edu/studentj/Courses/Courses.aspx, where we assume that your username (and hence your web folder) on cis2.stvincent.edu is studentj and that your main form is named Courses.aspx.

Back to the main page for ASP .NET Web Apps

Author: Br. David Carlson
Last updated: October 07, 2008
Disclaimer


Computing & Information Systems Department		Search CIS Site Tutorials