HTML and CSS Reference
In-Depth Information
As you can see in Figure 6-1, there are four buttons at the bottom of the page arranged in two rows.
The top row of buttons (Previous and Next) cause the page to be submitted back to the server and then
display either the previous slide or the next slide depending on the button clicked. The bottom row of
buttons (< and >) use the
History
object to navigate backward or forward, respectively. The URL pattern
used by the Slide Show application is like this:
http://localhost:1065/home/index/2
In this URL,
home
is the MVC controller name,
index
is the action method that handles the server-side
logic of fetching a slide, and
2
is the ID of the slide being displayed. For different slides, the ID at the end of
the URL is different.
n
Note
You may wonder why you're building a complete database-driven application just to illustrate couple of
methods of the
History
object. You're starting with this project to demonstrate the use of
History
object in a non-
Ajax application; then you move it to Ajax to see the problems that occur, and finally you see how the
History
object's new functionality can resolve that problem.
The Slide Show application stores its data in a SQL Server database named
ImageDb
. The
ImageDb
database contains a single table—
Images
—that stores image information such as title, description, and
image URL. Figure 6-2 shows an Entity Framework data model for the
Images
table.
Figure 6-2.
Entity Framework data model for the
Images
table
As shown in Figure 6-2, the Image data model class has four properties:
Id
,
Title
,
Description
, and
ImageUrl
. The
Id
column is the primary key for the
Images
table.
The main
Controller
class of the application (
HomeController
) contains just one action method—
Index()
. The skeleton of the
Index()
action method is shown in Listing 6-1. The code that retrieves the
image information from the database is omitted for the sake of simplicity.
Listing 6-1.
Index()
Action Method
public ActionResult Index(int id=0)
{
ImageDbEntities db = new ImageDbEntities();
IQueryable<Image> data = null;
...
...
return View(data.SingleOrDefault());
}