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) {
$("#id").val(image.Id);
$("#title").html(image.Title);
$("#desc").html(image.Description);
$("#img").attr("src",image.ImageUrl);
$("#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) {
$("#id").val(image.Id);
$("#title").html(image.Title);
$("#desc").html(image.Description);
$("#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
passed.
