HTML and CSS Reference
In-Depth Information
current image and a direction (
N
=Next or
P
=Previous).
GetImage()
then returns an
Image
object
representing the previous or next image. The
OnSuccess()
function simply reads the
Image
object
properties and displays a slide accordingly. Listing 6-5 shows the
OnSuccess()
function.
Listing 6-5
.
OnSuccess()
Function
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);
}
OnSuccess()
receives an
Image
object returned from the
GetImage()
action method.
Title
,
ImageUrl
,
and
Description
are then assigned to appropriate HTML elements. A
<div>
element also shows the
number of entries in the
History
object to prove the point.
The skeleton of the
GetImage()
action method that is invoked using the
$.Ajax()
calls is shown in
Listing 6-6.
Listing 6-6.
GetImage()
Action Method
public JsonResult GetImage(int id,string direction)
{
ImageDbEntities db = new ImageDbEntities();
IQueryable<Image> data = null;
...
return Json(data.SingleOrDefault());
}
GetImage()
accepts an ID of an image and a direction. It then finds the next or previous image in the
specified direction. If no direction is specified, it fetches an image with the specified ID. The return type of
GetImage()
is
JsonResult
. The
Json()
method converts an
Image
object into its JSON equivalent and
returns it to the caller.
Now, to understand the problem discussed at the beginning of this section, run the new Slide Show
application and navigate through the slides using the Previous and Next buttons. Figure 6-3 shows slide 2
displayed in the browser, but the address bar still shows the base URL.
Figure 6-3.
Changing the current slide doesn't change the URL in the address bar.
Because you're fetching slides using
$.Ajax()
, the browser address bar doesn't change the URL. Once
you're finished, try clicking the < and > buttons. Even if you navigate through all the slides, you aren't taken
forward or backward because the browser has just one entry in the
History
object:
http://
localhost:1065/Ajaxhome
.
