MVC3 WebGrid toggling sort direction - asp.net-mvc-3

Question

With an ASP.NET MVC3 WebGrid how can I setup the column sorting such that clicking on the column heading toggles between ascending sort and then descending sort?
Thanks!
Rob

Answer 1

The underlying problem turned out to be a malformed column. The columnName did not in fact match the actual columnName (it was set to be the header text). This problem was hidden because the format specified a Html.ActionLink.
Changing the column definition such that the columnName was correct (and the header set to the actual header value) corrected the problem.

Answer 2

Note 1: Using Razor Syntax for Markup and C# as ServerSide Code.
Note 2: The basic setup knowledge for Sorting came from Sorting, Filtering, and Paging with the Entity Framework Tutorial but I needed more control and leverage than what they supplied for their simple example.
So...
Here is the End-Result-View View for the Grid
Default View http://cognitivegenerationenterprises.net/cgeCorp/Images/Toggling-MVC-Grid/defaultGrid3.png
Here is my ServerSide code on the Index Action (so when my page loads) (again, see link above for more background information)
public ViewResult Index(string sortOrder)
{
// Set the defaults
ViewBag.FirstNameSortParam = "First Name desc";
ViewBag.LastNameSortParam = "Last Name desc";
ViewBag.CitySortParam = "City desc";
ViewBag.StateSortParam = "State desc";
ViewBag.DOBSortParam = "DOB desc";
var students = from s in db.Students select s;
switch (sortOrder)
{
case "First Name desc":
students = students.OrderByDescending(s => s.FirstName);
ViewBag.FirstNameSortParam = sortOrder;
break;
case "First Name asc":
students = students.OrderBy(s => s.FirstName);
ViewBag.FirstNameSortParam = sortOrder;
break;
case "Last Name desc":
students = students.OrderByDescending(s => s.LastName);
ViewBag.LastNameSortParam = sortOrder;
break;
case "Last Name asc":
students = students.OrderBy(s => s.LastName);
ViewBag.LastNameSortParam = sortOrder;
break;
case "City desc":
students = students.OrderByDescending(s => s.StudentAddress.City);
ViewBag.CitySortParam = sortOrder;
break;
case "City asc":
students = students.OrderBy(s => s.StudentAddress.City);
ViewBag.CitySortParam = sortOrder;
break;
case "State desc":
students = students.OrderByDescending(s => s.StudentAddress.State);
ViewBag.StateSortParam = sortOrder;
break;
case "State asc":
students = students.OrderBy(s => s.StudentAddress.State);
ViewBag.StateSortParam = sortOrder;
break;
case "DOB desc":
students = students.OrderByDescending(s => s.DOB);
ViewBag.DOBSortParam = sortOrder;
break;
case "DOB asc":
students = students.OrderBy(s => s.DOB);
ViewBag.DOBSortParam = sortOrder;
break;
default:
students = students.OrderByDescending(s => s.StudentID);
break;
}
return View(students.ToList());
}
The first time this runs, of course "sortOrder" will be null. However the pattern below demonstrates how I accomplished toggling of the "Last Name" column. Also, please note that I set my default 1st state to be Descending. Alternatively you could flip-it-around if you want Ascending as the 1st state registered when a user clicks on the link. For my purposes "Descending" works best.
#{
string fnSort = ViewBag.FirstNameSortParam;
string lnSort = ViewBag.LastNameSortParam;
string citySort = ViewBag.CitySortParam;
string stateSort = ViewBag.StateSortParam;
string dobSort = ViewBag.DOBSortParam;
}
<table>
<tr>
<th>
#{
if (fnSort != "First Name desc")
{
fnSort = "First Name desc";
}else{
fnSort = "First Name asc";
}
}
#Html.ActionLink("First Name", "Index", new { sortOrder = fnSort })
</th>
<th>
#{
if (lnSort != "Last Name desc")
{
lnSort = "Last Name desc";
}else{
lnSort = "Last Name asc";
}
}
#Html.ActionLink("Last Name", "Index", new { sortOrder = lnSort })
</th>
<th>
Email
</th>
<th>
Phone Number
</th>
<th>
#{
if (citySort != "City desc")
{
citySort = "City desc";
}else{
citySort = "City asc";
}
}
#Html.ActionLink("City", "Index", new { sortOrder = citySort })
</th>
<th>
#{
if (stateSort != "State desc")
{
stateSort = "State desc";
}else{
stateSort = "State asc";
}
}
#Html.ActionLink("State", "Index", new { sortOrder = stateSort })
</th>
<th>
#{
if (dobSort != "DOB desc")
{
dobSort = "DOB desc";
}else{
dobSort = "DOB asc";
}
}
#Html.ActionLink("DOB", "Index", new { sortOrder = dobSort })
</th>
<th></th>
</tr>
#foreach (var item in Model) {
<tr>
<td>
#Html.DisplayFor(modelItem => item.FirstName)
</td>
<td>
#Html.DisplayFor(modelItem => item.LastName)
</td>
<td>
#Html.DisplayFor(modelItem => item.Email)
</td>
<td>
#Html.DisplayFor(modelItem => item.PhoneNumber)
</td>
<td>
#Html.DisplayFor(modelItem => item.StudentAddress.City)
</td>
<td>
#Html.DisplayFor(modelItem => item.StudentAddress.State)
</td>
<td>
#Html.DisplayFor(modelItem => item.DOB)
</td>
<td>
#Html.ActionLink("Edit", "Edit", new { id=item.StudentID }) |
#Html.ActionLink("Details", "Details", new { id=item.StudentID }) |
#Html.ActionLink("Delete", "Delete", new { id=item.StudentID })
</td>
</tr>
}
</table>
That's it... Toggling works now for "Last Name"... now I will implement sort toggling for the other columns as well
Hope this helps. Let me know if you need more assistance! I'm proud to help (if I can)
Cheers!