Asp.net-mvc – Paging & Sorting grids with ASP.Net MVC

asp.netasp.net-mvcgridviewobjectdatasource

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>

Best Answer

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.

Related Solutions

Asp.net-mvc – Compile Views in ASP.NET MVC

From the readme word doc for RC1 (not indexed by google)

ASP.NET Compiler Post-Build Step

Currently, errors within a view file are not detected until run time. To let you detect these errors at compile time, ASP.NET MVC projects now include an MvcBuildViews property, which is disabled by default. To enable this property, open the project file and set the MvcBuildViews property to true, as shown in the following example:

<Project ToolsVersion="3.5" DefaultTargets="Build" xmlns="http://schemas.microsoft.com/developer/msbuild/2003">
  <PropertyGroup>
    <MvcBuildViews>true</MvcBuildViews>
  </PropertyGroup>

Note Enabling this feature adds some overhead to the build time.

You can update projects that were created with previous releases of MVC to include build-time validation of views by performing the following steps:

Open the project file in a text editor.
Add the following element under the top-most <PropertyGroup> element: <MvcBuildViews>true</MvcBuildViews>
At the end of the project file, uncomment the <Target Name="AfterBuild"> element and modify it to match the following:

<Target Name="AfterBuild" Condition="'$(MvcBuildViews)'=='true'">
    <AspNetCompiler VirtualPath="temp" PhysicalPath="$(ProjectDir)\..\$(ProjectName)" />
</Target>

C# – How to create a dropdownlist from an enum in ASP.NET MVC

For MVC v5.1 use Html.EnumDropDownListFor

@Html.EnumDropDownListFor(
    x => x.YourEnumField,
    "Select My Type", 
    new { @class = "form-control" })

For MVC v5 use EnumHelper

@Html.DropDownList("MyType", 
   EnumHelper.GetSelectList(typeof(MyType)) , 
   "Select My Type", 
   new { @class = "form-control" })

For MVC 5 and lower

I rolled Rune's answer into an extension method:

namespace MyApp.Common
{
    public static class MyExtensions{
        public static SelectList ToSelectList<TEnum>(this TEnum enumObj)
            where TEnum : struct, IComparable, IFormattable, IConvertible
        {
            var values = from TEnum e in Enum.GetValues(typeof(TEnum))
                select new { Id = e, Name = e.ToString() };
            return new SelectList(values, "Id", "Name", enumObj);
        }
    }
}

This allows you to write:

ViewData["taskStatus"] = task.Status.ToSelectList();

by using MyApp.Common