HTML and CSS Reference
In-Depth Information
To understand how you can use the new History API, you can modify the Ajax version of the Slide
Show (MVC) application developed earlier. Recollect that the Slide Show application uses the jQuery
$.Ajax() method to make Ajax requests to the server-side GetImage() action method and retrieve slides.
Also recall that the browser address bar shows the same base application URL even if different slides are
being shown to the user. Just for the sake of easy understanding, the Slide Show application's OnSuccess()
function is given again in Listing 6-7.
Listing 6-7. OnSuccess() Function Without the HTML5 History API
function OnSuccess(image) {
$("#divMsg").html("History Length : " + history.length);
n Note For your convenience, the source code download contains three versions of the Slide Show MVC
application. The controller names are HomeController , AjaxHomeController , and HTML5HomeController ,
respectively. While trying this example, you can modify AjaxHomeController and its index view instead of starting
from scratch.
To use the HTML5 History API, you need to modify the OnSuccess() function as shown in Listing 6-8.
Listing 6-8. OnSuccess() Function Using the pushState() Method to Add a History Entry
function OnSuccess(image) {
$("#img").attr("src", image.ImageUrl);
history.pushState(image, image.Title, "/HTML5Home/index/" + image.Id);
$("#divMsg").html("History Length : " + history.length);
The OnSuccess() function receives a JSON object returned by the GetImage() action method that
represents an image from the database. After assigning image details such as Title , Description , and
ImageUrl , you add an entry to the History object using the pushState() method. The first parameter of
pushState() is state information that you wish to access inside the popstate event handler. Here, the code
passes the entire Image JSON object as the state information. The second parameter is a title that you're
assigning to this history entry. This title is typically displayed in the browser's history menu or dialog. The
third parameter is a URL that is to be associated with this history entry. The browser simply puts this URL
in the address bar without navigating to it. Also, the browser doesn't check whether the URL really exists on
the server. It's up to you to decide what that URL should be. The URL used by the Slide Show application is
in the form /index/<image_id> . Later you modify the Index() action method to take care of the image ID
Search WWH ::

Custom Search