MVC3 WebGrid切换排序方向

Question

使用 ASP.NET MVC3 WebGrid 如何设置列排序，以便单击列标题在升序排序和降序排序之间切换？

谢谢！

罗伯

Answer 1

原来的根本问题是列格式错误。 columnName 实际上与实际的 columnName 不匹配（它被设置为标题文本）。此问题已隐藏，因为格式指定了 Html.ActionLink。

更改列定义以使 columnName 正确（并且将标题设置为实际标题值）更正了问题。

Answer 2

注意 1： 使用 Razor 语法标记和 C# 作为服务器端代码。

注意 2： 排序的基本设置知识来自 Sorting, Filtering, and Paging with the Entity Framework Tutorial，但我需要比他们提供的简单示例更多的控制和利用。

所以...

这是网格的最终结果视图

Default View http://cognitivegenerationenterprises.net/cgeCorp/Images/Toggling-MVC-Grid/defaultGrid3.png

这是我在索引操作上的服务器端代码（所以当我的页面加载时）（再次，请参阅上面的链接了解更多背景信息）

    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());
    }

第一次运行时，“sortOrder”当然会为空。然而，下面的模式演示了我如何完成“姓氏”列的切换。另外，请注意，我将默认的第一个状态设置为降序。或者，如果您希望 Ascending 作为用户单击链接时注册的第一个状态，您可以翻转它。就我而言，“降序”效果最好。

    @{
         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>

就是这样...切换现在适用于“姓氏”...现在我将为其他列实现排序切换

希望这会有所帮助。如果您需要更多帮助，请告诉我！我很自豪能提供帮助（如果可以的话）

干杯！