How to page with Custom method/ActionLink?

Question

I am probably going about this completely wrong here, but that is partly what I am asking.

I am creating a blog using MVC3 and I am having some issues. My homepage currently lists each blog post with their corresponding comments and topics correctly. I want it to be limited to a number of posts, so here is my code in the HomeController.

public class HomeController : Controller
{
    private MyDB db = new MyDB();

    public ActionResult Index()
    {
        var posts = (from p in db.Set<BlogPost>()
                     orderby p.DateCreated descending 
                     select new PostViewModel
                                {
                                    Title = p.Title,
                                    DateCreated = p.DateCreated,
                                    Content = p.Content,
                                    Topics = p.Topics,
                                    Comments = p.Comments,
                                    CommentCount = p.Comments.Count
                                }).Take(5).ToList();

        IEnumerable<Topic> topics = from t in db.Topics
                                    select t;

        var blog = new BlogViewModel
        {
            Post = posts,
            Topics = topics.Select(t => new SelectListItem { 
                Value = Convert.ToString(t.id),
                Text = t.Name
            })
        };

        return View(blog);
    }
}

This works fine as I've said. I have the topics coming in separately because I want to eventually sort by those (which I also don't know where to start but that's another story).

My main problem is that I would like to have a "Next" and "Previous" button under the 5 selected posts, that when clicked, grab the next 5 or previous 5. I've been told to use...

@Html.ActionLink("Next >>", "ActionName", "Home", Custom arguement?)

type of solution where I write a custom method in my HomeController and grab the next or previous 5. Is this at all correct? I'd like to understand the best use scenario for something like this. I am completely new to MVC3, so I am not looking for shortcuts, and I feel like I maybe already have made a few.

Thanks for your help.

score 0 · Answer 1 · answered Apr 26 '12 at 18:33

I see two best scenarios:

One you could use Ajax/Jquery and do this.

Two you use a 'Partial' View. This way you are not affecting the ENTIRE view when someone presses the action link for the next five. So you would make a partial view for just the posts, then the controller receives a request for the next five and returns a partial view with a model that has five post items.

Choose which one you feel more comfortable with, but if you are learning MVC, choice two may be better for you for practice.

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

0

You can take a look at: http://nerddinnerbook.s3.amazonaws.com/Part8.htm . Also if you want to get the data with an ajax request i recommend you to convert partial view containing the data to string ( Return Razor partial view using JSON (ASP MVC 3)) and use jquery to load it (http://api.jquery.com/load/ ).

edited May 23 '17 at 11:49

Community

1
1

answered Apr 26 '12 at 18:36

Matija Grcic

12,963
6
62
90

score 0 · Answer 3 · answered Apr 26 '12 at 18:36

I'd request another action method on your controller (either with Ajax, or normal), and just reuse the same View you have been using for your initial page render.

public ActionResult Index(int? pageNumber)
{
     if(!pageNumber.HasValue)
         return Index();

     var posts = ...; // get posts

     var set = posts.Skip(pageNumber * itemsPerPage).Take(itemsPerPage);
     // or pageNumber - 1 if you want to be 1-index based

     return View(...); //or PartialView() if doing ajax, or even Json() if you want to bind on the client side
}

score 0 · Accepted Answer · answered Apr 26 '12 at 19:01

https://github.com/TroyGoode/PagedList

public class HomeController : Controller
{
    public ActionResult Index(int? page)
    {
    var posts = (from p in db.Set<BlogPost>()
                 orderby p.DateCreated descending 
                 select new PostViewModel
                            {
                                Title = p.Title,
                                DateCreated = p.DateCreated,
                                Content = p.Content,
                                Topics = p.Topics,
                                Comments = p.Comments,
                                CommentCount = p.Comments.Count
                            });

    var pageNumber = page ?? 1; // if no page was specified in the querystring, default to the first page (1)
    posts = posts.ToPagedList(pageNumber, 25); // will only contain 25 posts max because of the pageSize

    var blog = new BlogViewModel
    {
        Post = posts,
        Topics = topics.Select(t => new SelectListItem { 
            Value = Convert.ToString(t.id),
            Text = t.Name
        })
    };

    return View(blog);
    }
}

This works great. It took me some time to figure out exactly what to do based on my setup but I got it working. Thank you! I see that I can pick from templates created by them, but is there a way to customize it anymore? The CSS seems limited. — , Apr 27 '12 at 19:50
Also I feel like this might not be the best practice here? The url is currently /?page=1 where I feel it should probably be /1/ only? — , Apr 27 '12 at 19:54
Well you can add a custom route for the page and mark the page parameter as optional. — Shawn C., Apr 28 '12 at 03:22

score 0 · Answer 5 · answered Apr 26 '12 at 19:14

You could create your Controller like the example code below:

    public ViewResult List(string category, int page = 1) {

        ProductsListViewModel viewModel = new ProductsListViewModel {
            Products = repository.Products
                .Where(p => category == null ? true : p.Category == category)
                .OrderBy(p => p.ProductID)
                .Skip((page - 1) * PageSize)
                .Take(PageSize),
            PagingInfo = new PagingInfo {
                CurrentPage = page,
                ItemsPerPage = PageSize, //4 for example
                TotalItems =  category == null ? 
                    repository.Products.Count() : 
                    repository.Products.Where(e => e.Category == category).Count()
            },
            CurrentCategory = category
        };
        return View(viewModel);
    }

Inside your View, you put this custom HTML Helper:

<div class="pager">
   @Html.PageLinks(Model.PagingInfo, x => Url.Action("List", 
    new {page = x, category = Model.CurrentCategory}))
</div>

Here is the code of the Helper:

public static class PagingHelpers {

    public static MvcHtmlString PageLinks(this HtmlHelper html,
                                          PagingInfo pagingInfo,
                                          Func<int, string> pageUrl) {

        StringBuilder result = new StringBuilder();
        for (int i = 1; i <= pagingInfo.TotalPages; i++) {
            TagBuilder tag = new TagBuilder("a"); // Construct an <a> tag
            tag.MergeAttribute("href", pageUrl(i));
            tag.InnerHtml = i.ToString();
            if (i == pagingInfo.CurrentPage)
                tag.AddCssClass("selected");
            result.Append(tag.ToString());
        }

        return MvcHtmlString.Create(result.ToString());
    }
}

This example was taken from this book

How to page with Custom method/ActionLink?

5 Answers5