Adding Slide Navigation


The interesting part of the slideshow is navigation. When you put controls on the page, you added Next and Previous buttons. Now you need to add Click event handlers to these navigation buttons to move backward and forward in the page. Before you add code that will let users navigate, however, you need a way for the page to know what slide it s on.

Maintaining the Slide Number in Viewstate

In Chapter 1, I talked about state the fact that by default the Web server (and by extension, ASP.NET) doesn t remember any information about your page once it s been rendered. Let s look at the state issue in the slideshow example. Imagine that you start the slideshow; ASP.NET runs your page and sends it to the browser. You click the Next button, which causes the page to run again from scratch. The page declares the variables again and loads the array with the list of slides, just as it did the first time. It thinks you re on slide 0 again.

Naturally, the people who developed ASP.NET were well aware of this problem and provided various ways to work around it. You need to figure out what slide you re on and then store the current slide number so that when the page makes a round trip, you can retrieve the number and use it.

You can store the slide number and keep it in the page itself by taking advantage of a feature of ASP.NET Web pages named viewstate. Speaking broadly, viewstate is a repository in the page where the page keeps information it needs during the next round trip. Normally, the page uses viewstate to store the current property values of controls their text, color, and so on. However, you can store your own values in viewstate as well. When the page is posted back to the server, you can get your values back out of viewstate. The net effect is that you re storing information you need to preserve between round trips.

From the programming perspective, you work with viewstate using the Viewstate object. The Viewstate object is similar to an array in that it can contain multiple objects. However, rather than maintain the object values as an ordered list that you access using an index value, the Viewstate object stores values by name.

start sidebar
How Viewstate Works

Viewstate works by storing information in a hidden HTML field. (A hidden field is a standard HTML element, not an ASP.NET invention.) A hidden field works like a text field in that it has a property you can set to a string. As its name implies, however, the hidden field isn t displayed to the user. Nonetheless, as with a text box or another control, its value is posted back to the server during a round trip.

Just before ASP.NET sends the page to the browser, it gets the nondefault values of all the controls on the page. (It doesn t bother to get default settings, because preserving those settings is unnecessary.) It then hashes the values up into a single string and stores the string in the hidden field on the page.

When you post the page back by clicking a button, ASP.NET first re-creates the page from scratch and then re-creates all the controls on the page. These controls initially have only default values for their properties. But then ASP.NET retrieves viewstate out of the hidden field and copies the values it finds in viewstate to the controls on the newly recreated page. After viewstate has been restored, ASP.NET then sees whether the controls have any new or changed values and applies those changes.

The result is the illusion that the controls are preserving their state. Actually, they are new controls that have been set to the values that the old page had before.

By the way, if you want to have a peek at how viewstate is stored, run one of your ASP.NET Web pages in the browser. Right-click the page, and choose View Source. Toward the top of the page you ll see an element that looks like the following:

<input type="hidden" name="__VIEWSTATE" value="dDwzMjcyNzg0Nzg7dDxwPGw8Y3VycmVudHNsaWRlOz47bDxpPDA+Oz4+O w8aTwxPjs+O2w8dDw7bDxpPDM+O 2k8Nz47aTwxMT47PjtsPHQ8cDxwPGw8VGV4dD +O2w8U2xpZGUgMSBvZiA2Oz4+Oz47Oz47dDxwPHA8bDxUZXh0Oz47bDxTYW50byB b21pbmdvIGNodXJjaDs+Pjs+Ozs+O3Q8cDxwPGw8SW1hZ2VVcmw7PjtsPEM6XFxX WJNYXRyaXhcXGltYWdlc1xcTWV4aWNvX2NodXJjaDEuSlBHOz4+Oz47Oz47Pj47P 47PspBnD1W71ybZILyfpqekWPASnkJ" />

The viewstate field for the page contains the values of all the controls encoded into a format that allows them to be stored as a single string. The hashed-up values are meaningless to you and me, but ASP.NET can turn this string back into control values during the next postback.

Doesn t viewstate add to the size of the page being downloaded? Yes. For that reason, you want to be a little careful about what you store in viewstate. For example, you wouldn t want to store enormously long strings. However, for small values such as those we re using in this chapter, the effect on the overall performance of the page will be negligible.

end sidebar

The logic you ll need for storing a slide number in viewstate is this:

  • The first time the page runs, you display slide 1. Your current slide number, therefore, is 0. Store that slide number in the Viewstate object, and display that slide.

  • The next time the page runs, and every time thereafter, you need to get the current slide number out of the Viewstate object. That way you ll know what slide is currently being displayed.

In the section Programming the Next and Previous Buttons later in this chapter, I ll explain how the navigation buttons use the slide number to move forward or backward in the list of slides. Now let s look at how to maintain a slide number in viewstate.

In the Page_Load handler you created in the previous section, replace the line

imageSlide.ImageUrl = path & slideNames(0)

with the following boldfaced code:

Sub Page_Load(     slideNames(0) = "Mexico_church1.jpg     slideNames(1) = "Mexico_church2.jpg     slideNames(2) = "Mexico_church4.jpg     slideNames(3) = "Mexico_convent.jpg     slideNames(4) = "Mexico_street1.jpg     slideNames(5) = "Mexico_street5.jpg     If IsPostBack = True Then          currentSlide = Viewstate("currentSlide")     Else         currentSlide = 0         Viewstate("currentSlide") = currentSlide         imageSlide.ImageUrl = path & slideNames(currentS lide)     End If End Sub

The new block of code checks whether this is the first time the page has run by testing the value of the page s IsPostBack property. The value of this property is True if this is a round trip in other words, if this isn t the first time the page has been run. (A little confusing, admittedly, because our true-false test ends up being backward.) If the value of the IsPostBack property is True, the program gets the value back out of Viewstate and puts it into the currentSlide variable.

If this is the first time the page runs if the IsPostBack property is not True the program initializes the variable currentSlide to 0 and then stores that value in Viewstate under the name currentSlide. (Viewstate values don t have to have the same name as the variables they store; but if they do, their names will be easier to remember.) The program then sets the Image control s ImageUrl property to the name of the slide at position 0 in the array.

If this logic isn t perfectly clear to you right now, don t worry. For one thing, you haven t finished the page, so the examining of what s in the Viewstate object is hypothetical right now. That aside, it takes some practice to get used to working with IsPostBack and Viewstate. For now, go ahead and type in the boldfaced code that you see in this section and follow along.

Programming the Next and Previous Buttons

Users will move back and forth in your slideshow by clicking the Next and Previous buttons. When they click the Next button, for example, the page will be posted back to the server. What you need to do, therefore, is to create Click handlers for the buttons and add the logic to navigate to the appropriate slide.

Create navigation for the Next button

  1. In Design view, double-click the Next button to create a Click handler.

    Web Matrix switches to Code view and creates the skeleton handler. It also adds the following attribute to the HTML syntax of the Next button:

    <asp:LinkButton  onclick="buttonNext_Click"     runat="server">Next</asp:LinkButton>
  2. Add the following boldfaced code to the event handler:

    Sub buttonNext_Click(sender As Object, e As Ev entArgs     currentSlide += 1     imageSlide.ImageUrl = path & slideNames(currentSlid e)     Viewstate("currentSlide") = currentSlide End Sub

    This code increments the value of the currentSlide variable by one. Using the 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. Then it stores the updated value of currentSlide in Viewstate again. The code in the Click handler will run after the Page_Load handler has run. That s why you can just increment the currentSlide value this value is initialized in the Page_Load handler before this code runs.

  3. Test this page by pressing F5. Click the Next button a few times.

    It works, right?

Note 

If you didn t close the browser the last time you ran the page, Web Matrix switches to the browser, but it doesn t refresh the page. Press F5 in Internet Explorer or click the Refresh button to reload the updated page.

The program has a problem, though, which you might either deduce from the code or experience firsthand when the browser displays an error. Each time you click Next, it increments the value of currentSlide and then gets the corresponding slide name from the array. Click Next enough times and currentSlide will be incremented to a value higher than the highest number of values in the slideNames array. If slideNames is dimensioned to 6, when currentSlide tries to get element 7 of the array, boom! Instead of seeing a slide in the page, you ll get an error message.

To avoid the error, add to the event handler the following boldfaced code. This code causes the value of the currentSlide variable to wrap round to the beginning of the array when it reaches the end of the array:

Sub buttonNext_Click(sender As Object, e As Ev entArgs     currentSlide +=      If currentSlide > slideNames.Length - 1 Then        currentSlide = 0     End If     imageSlide.ImageUrl = path & slideNames(curr entSlide     Viewstate("currentSlide") = currentSlid End Sub

After incrementing the value of currentSlide, the program checks the value against the highest index value in the array. All arrays have a property named Length that tells you how many elements are in the array. If you want to know the highest index value in the array, you get the array s Length property and subtract 1. For example, if an array has six elements, the highest index value is 5. If the currentSlide value is greater than the highest index value, the program just resets the value to 0. The Click handler for the Previous button is very similar to that of the Next button, except that the wraparound logic is reversed, so to speak instead of resetting the array s index value to 0 when you reach the end of the array, you set the index value to highest index value when you reach the beginning of the array.

Create navigation for the Previous button

  1. In Design view, double-click the Previous button to create the skeleton handler and add the HTML attribute to the control.

  2. In Code view, add the following boldfaced lines into the handler:

    Sub buttonPrevious_Click(sender As Object, e A s EventArgs     currentSlide -= 1     If currentSlide < 0 Then        currentSlide = slideNames.Length - 1     End If     imageSlide.ImageUrl = path & slideNames(currentSlid e)     Viewstate("currentSlide") = currentSlide End Sub 

This code decrements the value of the currentSlide variable by 1. Using the new value of currentSlide, it gets the name of the previous slide out of the array and assigns it as the ImageUrl property of the Image control. Then, it stores the updated value of currentSlide in Viewstate again. After decrementing the value of currentSlide, the program checks the value against the lowest index value in the array. If that value is less than the lowest index value, the program just resets the value to the highest index value in the array.

You might go back and look at the code for the Page_Load handler. Hopefully the If-Then-Else block with IsPostBack will make sense now. The following is a mental walkthrough of what happens as the page runs:

  1. The first time the page runs, IsPostBack is false, so the current slide is 0. The Image control shows the slide in position 0 of the slideNames array. The current slide number, 0, is stored in Viewstate.

  2. When you click the Next button, the page runs again from scratch. This time, the IsPostBack property is true, so the program reads Viewstate to get the current slide number, which is still 0.

  3. In the Click handler for the Next button, the slide number is incremented. The slide number is now 1. The Image control displays the slide in position 1 of the array. The new slide number, 1, is stored in Viewstate.

  4. Click Next again. The Page_Load handler gets the slide number (1) out of Viewstate. The Next button s Click handler increments the slide number to 2, displays the slide, and stores the slide number.

  5. Click Previous. The Page_Load handler gets the slide number (now 2). The Previous button Click handler decrements the slide number to 1. The Image control shows the slide at position 1 in the array.

And so on.




Microsoft ASP. NET Web Matrix Starter Kit
Microsoft ASP.NET Web Matrix Starter Kit (Bpg-Other)
ISBN: 0735618569
EAN: 2147483647
Year: 2003
Pages: 169
Authors: Mike Pope
BUY ON AMAZON

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net