HTML and CSS Reference
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:
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;