对所有列进行排序的 ASP NET Core MVC 数据库列表视图

Question

我的FileManager.cshtml 页面中有一个列表视图（代码如下），我需要对该视图上显示的所有列实现排序功能。我查看了网络和 YouTube 上的一些示例，但有 Javascript 函数或“手工”命名空间。没有JScript可以做到吗？ 谢谢你的帮助！

我的控制器中的函数显示来自dbo.Files 的列表视图，按记录的用户 ID 过滤：

private readonly TextCloudContext Context;

public IActionResult FileManager()
{
    var user = _userManager.GetUserId(User);
    var items = Context.Files.Where(f => f.UserID == user).ToList();
    return View(items);
}

TextCloudContext.cs 中的字符串，从我的 SQL Server 表“文件”中获取和设置“文件”表中的值：

public DbSet<File> Files { get; set; }

File.cs 模型在 TextCloudContext 中初始化 Db 参数的值并在我的 FileManagerView.cshtml 中显示列名

public class File
{
    public int Id { get; set; }
    [Display(Name = "File Name")]
    public string Name { get; set; }
    public string Data { get; set; }
    [Display(Name = "File Type")]
    public string Extension { get; set; }
    [Display(Name = "Date")]
    public string Date { get; set; }
    public string UserID { get; set; }
    public TextCloudUser User { get; set; }
}

最后用表类查看：

<table class="table">
<thead>
    <tr>
        <th>
            @Html.DisplayNameFor(model => model.Name)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.Extension)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.Date)
        </th>
        <th>
            @Html.DisplayName("Actions")
        </th>
        <th></th>
    </tr>
</thead>
<tbody>
    @foreach (var item in Model)
    {
        <tr>
            <td>
                @Html.DisplayFor(modelItem => item.Name)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.Extension)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.Date)
            </td>               
            <td> - this razor Html doesn't work yet
                @Html.ActionLink("Download", "Download", new { fileName = item.ToString() }) |
                @Html.ActionLink("Delete", "Delete", new { /* id=item.PrimaryKey */ })
            </td>
        </tr>
    }
</tbody>

Answer 1

基于this docs，下面是一个工作演示：

查看：

@model IEnumerable<File>
<table class="table">
    <thead>
        <tr>
            <th>
                <a asp-action="FileManager" asp-route-sortOrder="@ViewData["NameSortParm"]">@Html.DisplayNameFor(model => model.Name)</a>      
            </th>
            <th>
                <a asp-action="FileManager" asp-route-sortOrder="@ViewData["ExtensionSortParm"]">@Html.DisplayNameFor(model => model.Extension)</a>
            </th>
            <th>
                <a asp-action="FileManager" asp-route-sortOrder="@ViewData["DateSortParm"]">@Html.DisplayNameFor(model => model.Date)</a>
            </th>
            <th>
                @Html.DisplayName("Actions")
            </th>
            <th></th>
        </tr>
    </thead>
    <tbody>
        @foreach (var item in Model)
        {
            <tr>
                <td>
                    @Html.DisplayFor(modelItem => item.Name)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.Extension)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.Date)
                </td>
                <td>
                    @Html.ActionLink("Download", "Download", new { fileName = item.ToString() }) |
                    @Html.ActionLink("Delete", "Delete", new { /* id=item.PrimaryKey */ })
                </td>
            </tr>
        }
    </tbody>
</table>

控制器：

public IActionResult FileManager(string sortOrder)
    {
        //var user = _userManager.GetUserId(User);
        //var items = Context.Files.Where(f => f.UserID == user);  //you may change this..

        //for easy testing,i just create data manually..
        var items = new List<File>()
        {
            new File(){ Id=1, Data="a", Date="2019-8-9", Extension=".jpg", Name="file1", UserID="1"},
            new File(){ Id=1, Data="b", Date="2019-7-9", Extension=".png", Name="file2", UserID="2"},
            new File(){ Id=1, Data="c", Date="2019-5-8", Extension=".png", Name="file3", UserID="3"},
            new File(){ Id=1, Data="d", Date="2019-4-7", Extension=".jpg", Name="file4", UserID="4"}
        }.AsQueryable();

        ViewData["NameSortParm"] = String.IsNullOrEmpty(sortOrder) ? "name_desc" : "";
        ViewData["DateSortParm"] = sortOrder == "Date" ? "date_desc" : "Date";
        ViewData["ExtensionSortParm"] = sortOrder == "Extension" ? "ext_desc" : "Extension";
        switch (sortOrder)
        {
            case "name_desc":
                items = items.OrderByDescending(s => s.Name);
                break;
            case "Date":
                items = items.OrderBy(s => s.Date);
                break;
            case "date_desc":
                items = items.OrderByDescending(s => s.Date);
                break;
            case "Extension":
                items = items.OrderBy(s=>s.Extension);
                break;
            case "ext_desc":
                items = items.OrderByDescending(s => s.Extension);
                break;
            default:
                items = items.OrderBy(s => s.Name);
                break;
        }
        return View(items);
    }

结果：