MVC3 WebGrid切换排序方向

时间:2011-11-12 16:27:28

标签: asp.net-mvc-3 sorting webgrid

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

谢谢!

罗布

2 个答案:

答案 0 :(得分:2)

根本问题结果是一个格式错误的专栏。 columnName实际上与实际的columnName不匹配(它被设置为标题文本)。此问题被隐藏,因为格式指定了Html.ActionLink。

更改列定义以使columnName正确(并且标头设置为实际标头值)更正了问题。

答案 1 :(得分:1)

注1:使用Razor语法进行标记,将C#用作ServerSide代码。

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

因此...

  

这是网格的最终结果视图视图

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

  

这是我在Index Action上的ServerSide代码(所以当我的页面加载时)(再次参见上面的链接以获取更多背景信息)

    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”当然是null。但是,下面的模式演示了我如何完成“姓氏”列的切换。另外,请注意我将默认的第一个状态设置为Descending。或者,如果您希望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>

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

  

希望这会有所帮助。如果您需要更多帮助,请告诉我们!我很自豪能帮忙(如果可以的话)

干杯!