Paging & Sorting grids with ASP.Net MVC

Question

I'm new to MVC, and am not following how you'd do paging and sorting on a grid. I'm used to using the asp.Net GridView control with an ObjectDataSource pointed at objects in our business layer - and in that case the ODS handles all of the paging & sorting using the methods that our ORM generates on the objects.

I've looked at using the same ORM with MVC - and things work out fine there - i just loop thru the collections to build the table on the page - but without the ODS to handle the paging & sorting, i'm confused as to how I'd handle that. Would I have a separate controller for the paging and sorting?

I understand that I need to roll my own - but where do I start? I've created a CustomerController, and a view that displays a table of customers that looks like below - and I want to sort on FirstName or LastName columns. My Model has a Sort() method on it that'll take a string sort expression in the format that would be used by a GridView/ODS pair. Would I create a new Action on my CustomerController called Sort, and put an ActionLink in my header?

    <table>
    <tr>
        <th>
            First Name
        </th>
        <th>
            Last Name
        </th>
    </tr>
    <% foreach (var item in Model)
       { %>
    <tr>
        <td>
            <%= Html.Encode(item.FirstName) %>
        </td>
        <td>
            <%= Html.Encode(item.LastName) %>
        </td>
    </tr>
    <% } %>
</table>

Matthijs Wessels · Answer 1 · 2014-11-14T16:27:04.937

nowadays MVC 3 now has a webGrid out of the box. I know this question is from a while ago, but I ended up on it when looking for something about webGrid. So I thought it should have an answer mentioning the new webGrid.

Here are a few good posts on how to use it:

http://www.dotnetcurry.com/ShowArticle.aspx?ID=615

http://cnug.co.in/blogs/shijuv/archive/2010/10/08/using-the-webgrid-helper-in-asp-net-mvc-3-beta.aspx

http://www.nickharris.net/tag/webgrid/

It supports sorting, paging and also some Ajax stuff. It can do lot for you already, but you can also specify every separate column separately.

Update:
There are also many JavaScript libraries available that can do the table for you. I personally like to use DataTables. You can feed it an existing html table generated on the server or give it an endpoint where it can retrieve the data (all or just one page).

There are plenty more, just Google around.

Greate out-of-box functionality, ships with MVC 3, simple to use. Love it! — Didaxis, Jan 20 '12 at 17:22
Here's another good post on MSDN that has a little more details: http://msdn.microsoft.com/en-us/magazine/hh288075.aspx — Torben Junker Kjær, Apr 13 '12 at 07:50

score 29 · Accepted Answer · answered Jan 30 '09 at 22:43

Your can use the same controller, just add an additional parameter and name it sort. Then check in the controller what value sort has, and sort your data based on that parameter.

Or if you want to do things on the client side, you can use something like tablesorter, a plugin for jquery.

score 3 · Answer 3 · answered Jan 30 '09 at 17:58

3

With MVC you sort of have to roll your own sorting, paging, etc. I would suggest YUI DataTable or some of the other JavaScript Grids out there.

Also if you find your self doing heavy Data Grid work you may want to take a look at ASP.NET Dynamic Data, it is specifically designed for these types of interactions against ORM's.

answered Jan 30 '09 at 17:58

Nick Berardi

54,393
15
113
135

I am going the route of MVC/Dynamic Data hybrid applications at the moment: the mvc stuff for the non-admin pages and the DD for admin pages. – Merritt Jul 30 '09 at 16:12

score 1 · Answer 4 · answered Jan 30 '09 at 21:55

1

First use jQuery. jQuery is your friend. Then use this awesome and probably the best Grid control for jQuery jqGrid.

In your CustomerController create an action called CustomerData. All interaction with the Grid should point to this action.

Go here for tons of examples on how to use jqGrid.

answered Jan 30 '09 at 21:55

Donny V.

22,248
13
65
79

jqGrid is javascript dependent. What if you need JavaScript independency? – Andrei Rînea Feb 07 '09 at 02:20
Then you will need to build the table your self. I'v built a paging class & a user control you can use if you want. – Donny V. Feb 07 '09 at 23:10
2

For most developers, JavaScript is a reasonable requirement. – RickAndMSFT Apr 04 '13 at 22:02
sorting on the client is horrible in any circumstance. develop good reusable code for server-side paging – Northstrider Aug 27 '13 at 20:48

score 0 · Answer 5 · answered Feb 23 '15 at 11:59

0

We have been using client side control JqxGrid from JqWidgets and much satisfied with its performance related to huge number of records along with paging, filtering, sorting inbuilt within. Here is an example of binding it within ASP.Net MVC

answered Feb 23 '15 at 11:59

CleanBold

1,551
1
14
37

please provide some specific details in how to use those controls to fix the specific scenario - thanks – Mauricio Gracia Gutierrez Jan 07 '16 at 04:16

Paging & Sorting grids with ASP.Net MVC

5 Answers5

Linked

Related