You would turn your pagination list into a partial view.
Then, I would create <a href="#" id="prev">Previous</a> and <a href="#" id="next">Next</a> links
in your <script>, you would set up $("#prev").click(function () { ..... }) that would call a $.get()
Within the $.get(), you would include your /controller/action as the url, pass in any parameters, then your handler function would call a data-fill, $("#DivContainerName").html(data);
In your action, you would return your Partial View with the updated data.
I will be around to help if you need some guidance. Start by creating a Partial View that includes your paged list, and add your next/previous links (as described above). We'll go from there if you have questions.
Bormeth
Member
67 Points
85 Posts
MVC Form + jQuery :)
May 07, 2012 03:11 PM|LINK
Hey guys. I would love my paging to use jQuery so the whole site doesnt need a pagerefresh.
my .cshtml code
<nav class="pagination">
@{ if (ViewBag.HasPrevious)
{
<a href="@Url.Action("Read", "Blog", new { page = (ViewBag.CurrentPage - 1) })" class="left">Previous </a>
}
} @{
if (ViewBag.HasMore)
{
<a href="@Url.Action("Read", "Blog", new { page = (ViewBag.CurrentPage + 1) })" class="right" >Next </a>
}
}
</nav>
and my CS code
public ActionResult Read(int? page, int id) { var blogComments = GetPagedComments((page ?? 0) * pageSize, pageSize, id); var viewModel = new blogPageVM(_entities.BlogCategories.ToList(), _entities.BlogPosts.Where(x => x.Id == id).ToList(), blogComments); ViewBag.HasPrevious = blogComments.HasPrevious; ViewBag.HasMore = blogComments.HasNext; ViewBag.CurrentPage = (page ?? 0); return View(viewModel); } public PagedList<BlogComment> GetPagedComments(int skip, int take, int id) { var query = _entities.BlogComments.Where(x => x.BlogPostId == id).OrderByDescending(x => x.Id); var CommentsCount = query.Count(); var Comments = query.Skip(skip).Take(take).ToList(); return new PagedList<BlogComment> { Entities = Comments, HasNext = (skip + pageSize < CommentsCount), HasPrevious = (skip > 0), Count = CommentsCount }; } public class PagedList<T> { public bool HasNext { get; set; } public bool HasPrevious { get; set; } public List<T> Entities { get; set; } public int Count { get; set; } }How would i go around getting some jQuery to do some magic, so i can press next/prev without pagerefresh. :)
JohnLocke
Contributor
3162 Points
703 Posts
Re: MVC Form + jQuery :)
May 07, 2012 05:05 PM|LINK
You would turn your pagination list into a partial view.
Then, I would create <a href="#" id="prev">Previous</a> and <a href="#" id="next">Next</a> links
in your <script>, you would set up $("#prev").click(function () { ..... }) that would call a $.get()
Within the $.get(), you would include your /controller/action as the url, pass in any parameters, then your handler function would call a data-fill, $("#DivContainerName").html(data);
In your action, you would return your Partial View with the updated data.
I will be around to help if you need some guidance. Start by creating a Partial View that includes your paged list, and add your next/previous links (as described above). We'll go from there if you have questions.
TroyGoode
Member
54 Points
15 Posts
Re: MVC Form + jQuery :)
May 11, 2012 12:26 AM|LINK
Consider using my PagedList nuget package. It has an example of a jquery-based paging implementation:
https://github.com/TroyGoode/PagedList/blob/master/src/PagedList.Mvc.Example/Controllers/HomeController.cs
https://github.com/TroyGoode/PagedList/blob/master/src/PagedList.Mvc.Example/Views/Home/Ajax.cshtml