Geeks With Blogs


Celebrate Computer Science Education
Locations of visitors to this page
Brian Scarbeau Insights from a seasoned Computer Science Trainer

Lesson 7 contains an introduction to some programming concepts that my students have never heard of especially arrays. As a teacher, you'll need to spend a little bit of time explaining how this will work on their page.

The students will be creating an array of pictures on the page and then with a button click advanced to the next picture and then a previous button will take them to the previous picture.

I had an assignment that I've used with my students before using the Curlique lessons and I demonstrate with that assignment first. Here's an example of that:

Creating a slide show of pictures


Create a new ASP.NET file and call it Show.aspx


Create a heading on the page like Student Art/Photos


Drag the following to the workspace:


LinkButton- In properties  ID call it buttonPrevious and in Text call it Previous


LinkButton- In properties  ID call it buttonNext and in Text call it Next


Image – In properties ID call it imageSlide


Switch to Code View and type


Dim path As String

Dim slideNames (5) As String

Dim currentSlide as Integer


Code Explanation:

This code creates 3 variables

2 String variables named path and slideName

1 Integer called currentSlide


slideName variable is an array which allows you to hold many values under one name. Here we set the number to 5 and you might think that you can hold 5 pictures here but you can actually hold 6 because an array starts at 0 and not 1.


You can add to this number depending on the number of pictures you have to show in the slide show.


Now what’s needed is to have something happen when you’re page gets loaded.


Type this code:


Sub Page_Load()

Path = “images/”

slideNames(0) = “slide1.jpg”

slideNames(1) = “slide2.jpg”

slideNames(2) = “slide3.jpg”

slideNames(3) = “slide4.jpg”

slideNames(4) = “slide5.jpg”

slideNames(5) = “slide6.jpg”

imageSlide.ImageUrl = path & slideNames(0)

End Sub

Code Explanation:

First of all, your pictures that you have created will be stored in a folder called images and it will be below where you have your web page folder.


For example:

If you have a folder called case study create a folder called images and store your pix there.

C:\casestudy\images will be the path.

Remember you can show gif, png or jpg pictures on the web


Notes the array assignment to the slides  slide1.jpg is just an example. It could be any file name you selected.


After the array is filled, the program sets the ImageUrl that was created earlier in the Image properties to the first slide. The full name of each slide consists of the path plus the name of the individual slide. So the program concatenates (puts together) the values of the path variable and the first element in the imageSlide array using  the & operator.


Navigation for your  Next button


In Design View, double click the Next button.


Type :


Sub buttonNext_Click(sender As Object, e As EventArgs)


    currentSlide += 1

    If currentSlide > slideNames.Length - 1 Then

       currentSlide = 0

    End If

    imageSlide.imageUrl = path & slideNames(currentSlide)

    Viewstate("currentslide") = currentSlide


End Sub


Code Explanation:

This will increment the value of the currentSlide variable by one. With new value of currentSlide, the program gets the name of the next slide out of the array and assigns it as the ImageUrl property of the Image control. It then stores the updated value of currentSlide in Viewstate again. The code in the click handler will run after Page Loader runs.

Navigation for your  Previous button

Sub buttonPrevious_Click(sender As Object, e As EventArgs)

    currentslide -= 1

    If currentSlide < 0 Then

       currentSlide = slideNames.Length - 1

    End If

    imageSlide.imageUrl = path & slideNames(currentSlide)

    Viewstate("currentslide") = currentSlide


Students do understand the importance of viewstate when working with They also learn a little programming as well.

BTW, my students took the test on Chapters 4-6 and the average of the class was an 89 which was fantastic and proves to me that they are learning.

Posted on Wednesday, November 9, 2005 12:16 PM Teaching with ASP.NET | Back to top

Copyright © Brian Scarbeau | Powered by: