MVC Form + jQuery :) : The Official Microsoft ASP.NET Forums

Reply

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. :)

Please Mark as Answer if the post helps you. :)

Reply

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.