How can i do paging in asp.net mvc3?

Question

I am working on asp.net mvc3 application and have many records coming from database. I want to display only 10 records first then user can click on button to see next 10 records and so on... Like facebook wall posting more records.

How can I implement this thing in my application using jQuery and ajax?

How can I control display data in view using paging?

I am using this to get 10 records but I want to display all records using more record button

var Entity = (from a
    in context.Data
    where <Condition>
    select a).Take(10);

Answer 1

The following articles should give you an idea :

http://weblogs.asp.net/andrewrea/archive/2008/07/01/asp-net-mvc-quot-pager-quot-html-helper.aspx

http://weblogs.asp.net/gunnarpeipman/archive/2010/02/21/simple-pager-for-asp-net-mvc.aspx

On the other hand, you can implement it like this :

Get the nuget package called TugberkUg.MVC

Then, your controller should look like below :

    public ActionResult Index(int page = 0) {

        const int pageSize = 10;

        #region _filter the model

        IQueryable<myModel> model = _myrepo.GetAll()

        #endregion

        #region _convert the model to paginatedList

        var paginatedModel = 
            new TugberkUg.MVC.Helpers.PaginatedList<myModel>(model, page, pageSize);

        #endregion

        return View(paginatedModel);
    }

And, here how your controller should look like :

@model TugberkUg.MVC.Helpers.PaginatedList<myModel>

@foreach(var item in Model) { 

     <p>@item.id</p>

}

You need to handle the pager as well and here is a sample for you :

ASP.NET MVC PaginatedList Pager - Put wise "..." after certain point

This TugberkUg.MVC.Helpers.PaginatedList class will provide all the necessary fields for pager.

Answer 2

I'm not aware of any .net library that will do pagination for you out of the box, so I will roll out a DIY solution for you to think about.

How can i implement this thing in my application using jquery and ajax?

It is probably wise to have a specific Controller for ajax requests. Just have a separate Area (Ajax), and send your ajax requests to that url you set up.

How can i control display data in view using paging?

Set up a controller that takes in a "page" parameter.

public ActionResult GetData(int? page){ // page is nullable to allow for default page

// Do your query here to get the specific page.

}

I'm not sure if you require more information other than this. If I were trying to do what you were doing, this is what I would do. Hope that helps.

Answer 3

If your are using Webgrid to display data then rowsperpage will do.

 var grid = new WebGrid(source: Model, selectionFieldName: "SelectedRow", rowsPerPage: 10, canPage: true, canSort: true);

Answer 4

I would suggest using a telerik mvc control. They are really easy to use, powerful and free.

www.telerik.com