Pagination for Detail Page

Question

I've looked around and have only found examples of pagination for lists of items. But I would like an example of the item's detailed page to be pageable. For ex:

I have an Index page that list all items from Table A that and each item has a "View Detail" button.

When user clicks on "View Detail" button, it takes them to its detail page (I got this working).

And I'd like the user to be able to click "Next" / "Previous" to view the next item's detail page.

Can anyone give me an example or links to examples on how to do this?

UPDATES: 4/6/2014

I'm trying to combine both suggestions that Jasen and Ehsan Sajjad gave, but I'm still stuck. So I'm hoping these codes will help make the description clearer.

I have a Project table and a Work table. Project table can have 0...* Work, but the Work table can only belong to 1 Project.

On the Project Index page, all the projects are listed by the project order (int projectOrder). And when you click on "View Details," it will take you to the project detail page that pulls all of that project's info and the work (from the Work table) belonging to that project. While on that detail page, you will be able to click on the "Next/Prev" button that will take you to the next/prev project detail page (by the project order).

Right now I have:

:: WORK CONTROLLER ::

    myContext myDB = new myContext();

    public ActionResult Index()
    {
        var projects = myDB.Projects.OrderBy(p => p.projectOrder).Include("Works");
        return View(projects);
    }

    public ActionResult Projects(string project, int? pOrder)
    {
        var projectView = myDB.Projects.Include("Works")
            .SingleOrDefault(p => p.projectName == project);

        //var i = 1;
        //int projOrder = projectView.projectOrder;
        //int nextPO = projOrder + i;
        //var stuff = myDB.Projects.SingleOrDefault(j => j.projectOrder == pOrder);

        return View(projectView);
    }

The 4 lines commented out were the ones I tried to get the next project by the menu order - but it's not working.

:: VIEW - Work - Index() ::

@model IEnumerable<myStuff.Model.Project>

@foreach (var project in Model)
{
    @project.projectName
    @Html.ActionLink("View Details", "Projects", "Work", new { project = project.projectName }, null)
}

:: VIEW - Work - Projects() ::

@model myStuff.Model.Project

@Model.projectName
@Html.ActionLink("Next >", "Projects", new { pOrder = Model.projectOrder})

I'm listing all the work (from the Work table) on another page, too, and they have links that will link to their Project's detail page.

I tried to increment/decrement the projectOrder by 1, but I'm not doing this right. So I'm hoping someone can help me.

Thank you again for your time!

If you set the _items per page_ to a single item would that not get the effect you desire without doing anything differently? — Jasen, Apr 05 '14 at 20:06
I thought of doing that, but Table A has related data from other table (Table B is the child). Table B has its own page and has link to Table A's detailed page. I don't know if the linking will work. Besides, listing Table A's items with the url as "page1, page2, etc," which won't be good for search engine. So, I'm wondering if there's another way to accomplish this. — jannn, Apr 05 '14 at 20:59
Regarding "page1": Most paginators I have worked with allow you to drop that text or change it altogether. — Jasen, Apr 05 '14 at 21:02
Ohh that's awesome! But then, how would I link the child pages to the parent's list page? Right now I have it as' @foreach (var item in Model) { @Html.ActionLink(item.Table.tableItemName, "Index", new { stuff = item.Table.tableSth }) }' — jannn, Apr 05 '14 at 21:24
Not quite following you. I think a more concrete example would find you more help. — Jasen, Apr 05 '14 at 21:30
what i used to do is in foreach loop take an int variable and save them in tempdata like TempData["Item_"+i] = object; and on next press i pass the current item id and inceremnt it in action and get the next record to display — Ehsan Sajjad, Apr 06 '14 at 08:49
Thank you for your help so far. I've tried combining both of your suggestions, but I'm still not getting the desired result. I put up my code, and I'm hoping you can help pointing out an alternative way to do things. — jannn, Apr 06 '14 at 21:08

score 0 · Answer 1 · edited May 23 '17 at 11:49

Here's an approach you can take:

Set up your controller to give you a single Project detail

public ActionResult Detail(int id)
{
    var project = Projects.Where(p => p.Id == id).FirstOrDefault();
    return View(project);
}

Next and Previous simply is Detail(i + 1) and Detail(i - 1). Except there might be gaps in the IDs so don't increment/decrement. Instead find that up front with the original.

The controller action becomes:

public ActionResult Detail(int id)
{
    var project = Projects.Where(p => p.Id == id).FirstOrDefault();
    var prevId = projectsRepository.GetPrev(project.Id);
    var nextId = projectsRepository.GetNext(project.Id);
    var projectVM = new ProjectVM {
        Project = project,
        PrevId = prevId,
        NextId = nextId
    };
    return View(projectVM);
}

This gives you the links on your view

@Html.ActionLink("prev", "Detail", new { id = Model.PrevId })
@Html.ActionLink("next", "Detail", new { id = Model.NextId })

In this example I have made up a projectsRepository to provide the int? GetPrev() and int? GetNext(). You'll have to provide the implementation but here's a start:

Pagination for Detail Page

1 Answers1