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
Listing 6-2. Calling the back() and forward() Methods
$(document).ready(function () {
$("#btnBackward").click(function () {
$("#btnForward").click(function () {
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()
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
Search WWH ::

Custom Search