根据 table 中的单元格筛选 IEnumerable 以显示动态 table

Question

我的前端有一个 table，它有 3 列和 3 行。

我想让这些单元格可以点击，并根据他们点击的内容在 table 下方显示过滤器。

我有一个列表，我想根据点击的内容应用过滤器。我该怎么做？

+-------+----------+----------+----------+
|       | Col 1    | Col 2    | Col 3    |
+=======+==========+==========+==========+
| Row 1 | Item 1-1 | Item 2-1 | Item 3-1 |
+-------+----------+----------+----------+
| Row 2 | Item 1-2 | Item 2-2 | Item 3-2 |
+-------+----------+----------+----------+
| Row 3 | Item 1-3 | Item 2-3 | Item 3-3 |
+-------+----------+----------+----------+

我有

MyList = await GetMyList();

例如，我希望当我单击“项目 1-1”时，根据我想要的条件（过滤器将是每个单元格不同）例如仅当 EmployeeName = 'XX' 或 GlPeriodName = 'YY' 我该怎么做？

目前我有这个（显示了整个列表）：

@if (Model.MyList?.First() is not null)
{
    <h2>Expenditures</h2>
    <table class="table">
        <thead>
        <tr>
            <th>Task Number</th>
            <th>Employee Name</th>
            <th>Employee Number</th>
            <th>GL Period Name</th>
        </tr>
        </thead>
        <tbody>
        @foreach (var expenditure in Model.MyList)
        {
            <tr>
                <td>@expenditure.TaskNumber</td>
                <td>@expenditure.EmployeeName</td>
                <td>@expenditure.EmployeeNumber</td>
                <td>@expenditure.GlPeriodName</td>
            </tr>
        }
        </tbody>
    </table>
}

我明白我可以用Model.MyList.Where(x => x.parameter = filter)过滤，但是我如何根据点击什么在上层点击什么行来传递这个参数条件table?
因为过滤器不会每次都相同，例如：

如果他们点击我想要的项目 1-1

Model.MyList.Where(x => x.parameterX = valueX)

如果他们点击项目 1-2：

Model.MyList.Where(x => x.parameterY = valueXY)

Answer 1

您可以将table单元格值作为锚点link并使用asp-route-{value}传递参数值。

这是一个简单的演示：

@page
@model IndexModel
<table class="table">
    <thead>
        <tr>Col1</tr>
        <tr>Col2</tr>
        <tr>Col3</tr>
    </thead>
    <tbody>
        <tr>
            <td><a asp-page="Index" asp-page-handler="SpecificEmployee" asp-route-employeeName="aa">Item 1-1</a></td>
            <td><a asp-page="Index" asp-page-handler="SpecificEmployee" asp-route-employeeName="bb">Item 2-1</a></td>
            <td><a asp-page="Index" asp-page-handler="SpecificEmployee" asp-route-employeeName="cc">Item 3-1</a></td>
        </tr>
        <tr>
            <td><a asp-page="Index" asp-page-handler="SpecificEmployee" asp-route-glPeriodName ="dd">Item 1-2</a> </td>
            <td><a asp-page="Index" asp-page-handler="SpecificEmployee" asp-route-glPeriodName="ee">Item 2-2</a> </td>
            <td><a asp-page="Index" asp-page-handler="SpecificEmployee" asp-route-glPeriodName="ff">Item 3-2</a> </td>
        </tr>
        <tr>
            <td><a asp-page="Index" asp-page-handler="SpecificEmployee" asp-route-employeeName="gg">Item 1-3 </a> </td>
            <td><a asp-page="Index" asp-page-handler="SpecificEmployee" asp-route-employeeName="hh">Item 2-3 </a> </td>
            <td><a asp-page="Index" asp-page-handler="SpecificEmployee" asp-route-employeeName="ii">Item 3-3 </a></td>
        </tr>
    </tbody>
</table>
@if (Model.MyList!=null)         //it is better to change here in case of null exception.....
{
    <h2>Expenditures</h2>
    <table class="table">
        <thead>
        <tr>
            <th>Task Number</th>
            <th>Employee Name</th>
            <th>Employee Number</th>
            <th>GL Period Name</th>
        </tr>
        </thead>
        <tbody>
        @foreach (var expenditure in Model.MyList)
        {
            <tr>
                <td>@expenditure.TaskNumber</td>
                <td>@expenditure.EmployeeName</td>
                <td>@expenditure.EmployeeNumber</td>
                <td>@expenditure.GlPeriodName</td>
            </tr>
        }
        </tbody>
    </table>
}

页面模型：

public class IndexModel : PageModel
{
   //for easy testing, I just hard coded.....
    public List<TestVM> MyList { get; set; }=new List<TestVM>()
    {
            new TestVM() { EmployeeName = "aa",EmployeeNumber = "1001",GlPeriodName = "dd",TaskNumber = "task1"},
            new TestVM() { EmployeeName = "bb",EmployeeNumber = "1002",GlPeriodName = "ee",TaskNumber = "task2"}
    };
      
    public void OnGetSpecificEmployee(string employeeName,string glPeriodName)
    {
        if(!string.IsNullOrEmpty(employeeName))
            MyList = MyList.Where(a=>a.EmployeeName.Equals(employeeName)).ToList();
        if(!string.IsNullOrEmpty(glPeriodName))
            MyList = MyList.Where(a => a.GlPeriodName.Equals(glPeriodName)).ToList();
    }

    public void OnGet()
    {

    }
}

根据 table 中的单元格筛选 IEnumerable 以显示动态 table

Filter IEnumerable according to cell in table to show dynamic table

c#

asp.net-core

razor-pages