如何向我的 MVC asp.net Core 應用程序添加排序功能？

Question

我有一個 MVC 應用程序，用戶可以在其中記錄他們的創建條目並在屏幕上的表格中查看它們。 我想添加一個功能，用戶可以在其中單擊名稱標題和按名稱列排序的表格。 我正在使用這個 docs.Microsoft 教程來幫助我，但我似乎沒有任何進展。 這是我到目前為止所擁有的：

控制器：

public async Task<IActionResult> Index(string sortOrder)
    {
        ViewData["NameSortParm"] = String.IsNullOrEmpty(sortOrder) ? "name_desc" : "";
        ViewData["DateSortParm"] = sortOrder == "Date" ? "date_desc" : "Date";
        var logs = from l in _context.Log
                        select l;
        switch (sortOrder)
        {
            case "name_desc":
                logs = logs.OrderByDescending(l => l.Name);
                break;
            case "Date":
                logs = logs.OrderBy(l => l.Date);
                break;
            case "date_desc":
                logs = logs.OrderByDescending(l => l.Date);
                break;
            case "relation":
                logs = logs.OrderByDescending(l => l.Relation);
                break;
            case "type":
                logs = logs.OrderByDescending(l => l.Type);
                break;
            default:
                logs = logs.OrderBy(l => l.Date);
                break;
        }
        return View(await logs.AsNoTracking().ToListAsync());
    }

    public async Task OnGetAsync(string parentComment, string searchString)
    {
        // Use LINQ to get list of dates.
        IQueryable<DateTime> dateQuery = from m in _context.Log
                                        // orderby m.Date
                                        select m.Date;

        var logs = from l in _context.Log
                     select l;

        if (!String.IsNullOrEmpty(searchString))
        {
            logs = logs.Where(s => s.Name.Contains(searchString));
        }

        if (!String.IsNullOrEmpty(parentComment))
        {
            logs = logs.Where(x => x.Type == parentComment);
        }
        Dates = new SelectList(await dateQuery.Distinct().ToListAsync());
        Log = await logs.ToListAsync();
    }

看法

<table class="table">
    <thead>
        <tr>
            <th>
                @Html.DisplayNameFor(model => model.Log[0].Date)
            </th>
            <th>
            <a asp-action="Index" asp-route-sortOrder='@ViewData["NameSortParm"]'>
                @Html.DisplayNameFor(model => model.Log[0].Name)
            </a>
        </th>
            <th>
                @Html.DisplayNameFor(model => model.Log[0].Relation)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.Log[0].Type)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.Log[0].Comment)
            </th>
            <th></th>
        </tr>
    </thead>
    <tbody>
        @foreach (var item in Model.Log)
        {
            <tr>
                <th>
                    @Html.DisplayFor(modelItem => item.Date)
                </th>
                <td>
                    @Html.DisplayFor(modelItem => item.Name)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.Relation)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.Type)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.Comment)
                </td>
                <td>
                    <a asp-page="./Edit" asp-route-id="@item.ID">Edit</a> |
                    <a asp-page="./Details" asp-route-id="@item.ID">Details</a> |
                    <a asp-page="./Delete" asp-route-id="@item.ID">Delete</a>
                </td>
            </tr>
        }
    </tbody>
</table>

如您所見，我為視圖中的Name列設置了它。 當我點擊它時，URL 會發生變化，讓我知道Index()方法已觸發（ https://localhost:5001/HSLogs?action=Index ）並且頁面會重新加載。 沒有排序發生。 幾乎沒有任何事情發生。 想法？

Answer 1

陳雪莉的建議奏效了。 謝謝你。

我擺脫了控制器中的Task<T> Index方法。 我將 switch 語句移至Task OnGetAsync()方法並更新了語法。

控制器：

public string NameSort { get; set; }
public string DateSort { get; set; }    

public async Task OnGetAsync(string sortOrder)
    {
        NameSort = String.IsNullOrEmpty(sortOrder) ? "name_desc" : "";
        DateSort = sortOrder == "Date" ? "date_desc" : "Date";

        IQueryable<Log> logsEntry = from s in _context.Log
                                        select s;
        switch (sortOrder)
        {
            case "name_desc":
                logsEntry = logsEntry.OrderByDescending(l => l.Name);
                break;
            case "Date":
                logsEntry = logsEntry.OrderBy(l => l.Date);
                break;
            case "date_desc":
                logsEntry = logsEntry.OrderByDescending(l => l.Date);
                break;
            default:
                logsEntry = logsEntry.OrderBy(l => l.Date);
                break;
        }

        Log = await logsEntry.AsNoTracking().ToListAsync();
    }

在視圖中，我為日期列和名稱列使用適當的標簽助手更新了標題鏈接。

看法

<table class="table">
    <thead>
        <tr>
            <th>
                <a asp-page="./Index" asp-route-sortOrder="@Model.DateSort">
                    @Html.DisplayNameFor(model => model.Log[0].Date)
                </a>
            </th>
            <th>
                <a asp-page="./Index" asp-route-sortOrder="@Model.NameSort">
                    @Html.DisplayNameFor(model => model.Log[0].Name)
                </a>
            </th>
            <th>
                @Html.DisplayNameFor(model => model.Log[0].Relation)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.Log[0].Type)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.Log[0].Comment)
            </th>
            <th></th>
        </tr>
    </thead>
         ...
</table>

Answer 2

在 Asp.net core 5.0 上進行排序的一種簡單且可重用的方法

public async Task<IActionResult> Index(Query query)
{
   var models = await _context.model.AsQueryable();

   var columnName = new Dictionary<string, Expression<Func<Model, object>>>()
   {
      ["name"] = m => m.name,
      ["date"] = m => m.date
   } 

   models = query.IsSortByAscending 
         ? models.SortBy(columnName[query.SortBy])
         : models.OrderByDescending(columnName[query.SortBy])
}

如果要添加更多列進行排序，只需添加列名作為 Dictionay 中的鍵及其值（以 Lamba 表達式的形式）。