首页 > 解决方案 > 如何向我的 MVC asp.net Core 应用程序添加排序功能?

问题描述

我有一个 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)并且页面重新加载。没有排序发生。几乎没有任何事情发生。想法?

标签: c#asp.netsortingasp.net-core-mvcasp.net-core-2.0

解决方案


陈雪莉的建议奏效了。谢谢你。

我摆脱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>

推荐阅读