Sorting a table in asp.net MVC

Question

I was wondering how people were going about sorting a table in asp.net mvc? I've heard of javascript solutions that work pretty well with non-paged tables, such as jquery's table sorter, but i need a solution that will work with paged tables.

The project I'm working on currently uses the following solution, but I find it very messy.

Controller

public ActionResult Sort(string parameter)
{  

 IEnumerable<IProduct> list;

 if (Session["Model"] != null)
  list = (IEnumerable<IProduct>)Session["Model"]).ToList<IProduct>();
 else
  list = _service.GetAll();

 if (Session["parameter"] == null && Session["sortDirection"] == null)
 {
  //set the parameter and set the sort to desc
  Session["parameter"] = parameter;
  Session["sortDirection"] = "DESC";
 }
 else if (Session["parameter"] != null) //already set so not the first time
 {
  //same parameter sent
  if (Session["parameter"].ToString().Equals(parameter))
  {
   //check sort direction and reverse
   if (Session["sortDirection"].ToString().Equals("DESC"))
    Session["sortDirection"] = "ASC";
   else
    Session["sortDirection"] = "DESC";
  }
  else //different parameter sent
  {
   Session["sortDirection"] = "DESC";
   Session["parameter"] = parameter;
  }
 }

 if (Session["sortDirection"].CompareTo("ASC") == 0)
  list = Models.ContollerHelpers.SortingHelper.OrderBy(list.AsQueryable(), column);
 else
  list = Models.ContollerHelpers.SortingHelper.OrderByDescending(list.AsQueryable(), column);

 return View("Results", list.ToList);
}

Helper

public class Helper()
{
 private static IOrderedQueryable<T> OrderingHelper<T>(IQueryable<T> source, string propertyName, bool descending, bool anotherLevel)
 {
  ParameterExpression param = Expression.Parameter(typeof(T), string.Empty); // I don't care about some naming
  MemberExpression property = Expression.PropertyOrField(param, propertyName);
  LambdaExpression sort = Expression.Lambda(property, param);

  MethodCallExpression call = Expression.Call(
   typeof(Queryable),
   (!anotherLevel ? "OrderBy" : "ThenBy") + (descending ? "Descending" : string.Empty),
   new[] { typeof(T), property.Type },
   source.Expression,
   Expression.Quote(sort));

  return (IOrderedQueryable<T>)source.Provider.CreateQuery<T>(call);
 }

 public static IOrderedQueryable<T> OrderBy<T>(this IQueryable<T> source, string propertyName)
 {
  return OrderingHelper(source, propertyName, false, false);
 }

 public static IOrderedQueryable<T> OrderByDescending<T>(this IQueryable<T> source, string propertyName)
 {
  return OrderingHelper(source, propertyName, true, false);
 }

 public static IOrderedQueryable<T> ThenBy<T>(this IOrderedQueryable<T> source, string propertyName)
 {
  return OrderingHelper(source, propertyName, false, true);
 }

 public static IOrderedQueryable<T> ThenByDescending<T>(this IOrderedQueryable<T> source, string propertyName)
 {
  return OrderingHelper(source, propertyName, true, true);
 }
}

List View

<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<IEnumerable<Models.Interface.IProduct>>" %>
<% Session["model"] = Model; %>
 <table>
    <tr>
   <th>
    Edit Details
   </th>
   <th>
    <%=Html.ActionLink("Id","Sort",new {parameter ="Id"}) %>
   </th>
   <th>
    <%=Html.ActionLink("Name", "Sort", new { parameter = "Name"})%>
   </th>
   <th>
    <%=Html.ActionLink("Status", "Sort", new { parameter = "Status" })%>
   </th>
   <th>
    <%=Html.ActionLink("Notes", "Sort", new { parameter = "Notes"})%>
   </th>
  </tr>
  <% foreach (var item in Model){ %>

   <tr>
    <td>
     <%= Html.ActionLink("Edit", "Edit", new {  id=item.Id }) %> |
    </td>
    <td>
     <%= Html.Encode(item.Id) %>
    </td>
    <td>
     <%= Html.Encode(item.Name) %>
    </td>
    <td>
     <%= Html.Encode(item.Status) %>
    </td>
    <td>
     <%= Html.Encode(item.Notes) %>
    </td> 
   </tr>

  <% } %>   
    </table>

Is this the only way of doing something like this? If anyone knows of a nicer way that doesn't involve having all of the records being loaded to a page at once then please link to examples.

Answer 1

Check out the DataTables @ DataTables This will let you page the result and query it with easy setup. it works well with ajax and json data. Look at the samples. Hope this will help you out.

Answer 2

Try the following extension methods (from top of head):

static class OrderByExtender
{
    public static IOrderedEnumerable<T> OrderBy<T>(this IEnumerable<T> collection, string key, string direction)
    {
        LambdaExpression sortLambda = BuildLambda<T>(key);

        if(direction.ToUpper() == "ASC")
            return collection.OrderBy((Func<T, object>)sortLambda.Compile());
        else
            return collection.OrderByDescending((Func<T, object>)sortLambda.Compile());
    }

    public static IOrderedEnumerable<T> ThenBy<T>(this IOrderedEnumerable<T> collection, string key, string direction)
    {
        LambdaExpression sortLambda = BuildLambda<T>(key);

        if (direction.ToUpper() == "ASC")
            return collection.ThenBy((Func<T, object>)sortLambda.Compile());
        else
            return collection.ThenByDescending((Func<T, object>)sortLambda.Compile());
    }

    private static LambdaExpression BuildLambda<T>(string key)
    {
        ParameterExpression TParameterExpression = Expression.Parameter(typeof(T), "p");
        LambdaExpression sortLambda = Expression.Lambda(Expression.Convert(Expression.Property(TParameterExpression, key), typeof(object)), TParameterExpression);
        return sortLambda;
    }
}

Usage:

var products = Session["Model"] as IEnumerable<Product>() ?? _service.GetAll();

return products.OrderBy("Name", "ASC").ThenBy("Price", "DESC");

Assuming you are only using 1 orderby condition at a time you can use:

var products = Session["Model"] as IEnumerable<Product>();

var sortDirection = Session["Direction"] as string ?? "DESC";
Session["Direction"] = sortDirection == "DESC" ? "ASC" : "DESC";
sortDirection = Session["Direction"] as string;

return products.OrderBy(parameter, sortDirection);

Answer 3

If JavaScript is disabled, you have a problem.

I'd go for a noscript solution.

I'd have two radio button groups:

direction:  ( ) ascending    (.) descending

orderBy:  (.) Id   ( ) Name   ( ) Status

I'd treat the View as a form with multiple submit buttons:

(without JavaScript) ~~ same name for both buttons.

on your .aspx page, add three buttons:

 <input type="submit"    value="Requery"   name="submitButton"/>
 <input type="submit"    value="Previous"  name="submitButton"/>
 <input type="submit"    value="Next"      name="submitButton"/>

in your Controller:

[AcceptVerbs(HttpVerbs.Post)]
public ActionResult Sort(string direction, string orderBy, string submitButton)
{
    if (submitButton == "Requery")       //et cetera

TMTOWTDI: There's More Than One Way To Do It