根据表中的单元格，滤波器可以显示动态表

Question

我的前端有一个桌子，上面有3列和3行。

我想使单元单元可单击，并根据其点击的滤镜显示带有过滤器的表。

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

+-------+----------+----------+----------+
|       | 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();

​只有当applyEname ='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.mylist.mylist.（x =＆gt; x.parameter = filter）过滤，但是如何根据单击的内容来传递此参数条件上表中单击哪一行？
由于过滤器每次都不会相同，例如：

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

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

，如果他们单击项目1-2：

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

Answer 1

您可以将表单元格值作为锚点链接，并使用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>
}

PageModel：

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()
    {

    }
}