HTML and CSS Reference
In-Depth Information
The
Index()
action method accepts an optional integer parameter that indicates an image ID. If this
parameter is supplied, an image with that particular ID is displayed; otherwise the first image from the
Images
table is displayed.
The Previous and Next buttons submit the form to the server and display the previous or next slide. In
order to navigate through the browser history, you need to handle the
click
event of the < and > buttons
and call the
back()
and
forward()
methods of the
History
object, respectively. Listing 6-2 shows how this is
done.
Listing 6-2.
Calling the
back()
and
forward()
Methods
$(document).ready(function () {
$("#btnBackward").click(function () {
window.history.back();
});
$("#btnForward").click(function () {
window.history.forward();
});
});
As you can see, the
click
event handler of the
btnBackward
button calls the
History
object's
back()
method, whereas the
click
event handler of the
btnForward
button calls
History
object's
forward()
method.
To see how the
back()
and
forward()
methods work, run the application and navigate through the
slides using the Previous and Next buttons. Then try clicking < and >. The browser address bar reflects the
appropriate slide URL depending on the button clicked. You can also verify the behavior using the
browser's back and forward navigation buttons.
Understanding the History-Tracking Problem
The
History
object discussed in the preceding section essentially tracks the URLs you visit through the
browser address bar, hyperlinks, navigation menus, or code. For example, every time you click the Previous
or Next button in the Slide Show application, the browser address bar reflects a different URL. This is
possible because you submit the entire form to the server. In other words, for every slide, you have a
unique URL. However, there can be situations where such a one-to-one mapping between the content of a
page and its URL can't be maintained. Consider the following cases:
• You're developing a Web Forms based application, and the logic of displaying
different slides is embedded in the server-side
click
event handlers of the Previous
and Next buttons. You're using a single web form to display all the slides. An
Image
control on the page is updated with the new picture whenever the Previous or Next
button is clicked. As a result, all the slides have the same URL. In such a case, there
isn't a one-to-one match between slides and URLs.
• If you use Ajax techniques such as the jQuery
$.Ajax()
method or ASP.NET Ajax
extensions, the complete page isn't submitted to the server. Instead, you make an
Ajax call to the server and retrieve the next or previous slide. In this case, too, there
isn't a unique URL for each slide.
In both cases, the browser history records a single URL for all the slides shown in a page. Because a
single URL represents all the slides, the user can't bookmark a specific slide. A user may bookmark the
page, thinking that a bookmark is being added for a specific slide; but if the bookmark is accessed, it
always shows the first slide because the URL is common to all the slides. To understand this problem more
